@gooddata/sdk-ui-semantic-search 10.8.0-alpha.1 → 10.8.0-alpha.2
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/esm/ResultsItem.d.ts +1 -0
- package/esm/ResultsItem.d.ts.map +1 -1
- package/esm/ResultsItem.js +2 -1
- package/esm/ResultsItem.js.map +1 -1
- package/esm/{SearchResults.d.ts → SearchResultsDropdownList.d.ts} +3 -3
- package/esm/SearchResultsDropdownList.d.ts.map +1 -0
- package/esm/SearchResultsDropdownList.js +18 -0
- package/esm/SearchResultsDropdownList.js.map +1 -0
- package/esm/SemanticSearch.d.ts +28 -0
- package/esm/SemanticSearch.d.ts.map +1 -1
- package/esm/SemanticSearch.js +8 -8
- package/esm/SemanticSearch.js.map +1 -1
- package/esm/hooks/index.d.ts +1 -0
- package/esm/hooks/index.d.ts.map +1 -1
- package/esm/hooks/index.js +1 -0
- package/esm/hooks/index.js.map +1 -1
- package/esm/hooks/useListSelector.d.ts +7 -0
- package/esm/hooks/useListSelector.d.ts.map +1 -0
- package/esm/hooks/useListSelector.js +41 -0
- package/esm/hooks/useListSelector.js.map +1 -0
- package/esm/hooks/useSemanticSearch.d.ts +5 -1
- package/esm/hooks/useSemanticSearch.d.ts.map +1 -1
- package/esm/hooks/useSemanticSearch.js +6 -5
- package/esm/hooks/useSemanticSearch.js.map +1 -1
- package/esm/internal/SearchResultsList.d.ts +26 -0
- package/esm/internal/SearchResultsList.d.ts.map +1 -0
- package/esm/internal/SearchResultsList.js +18 -0
- package/esm/internal/SearchResultsList.js.map +1 -0
- package/esm/internal/SemanticSearchOverlay.d.ts +40 -0
- package/esm/internal/SemanticSearchOverlay.d.ts.map +1 -0
- package/esm/internal/SemanticSearchOverlay.js +60 -0
- package/esm/internal/SemanticSearchOverlay.js.map +1 -0
- package/esm/internal.d.ts +8 -0
- package/esm/internal.d.ts.map +1 -0
- package/esm/internal.js +9 -0
- package/esm/internal.js.map +1 -0
- package/esm/sdk-ui-semantic-search.d.ts +40 -1
- package/package.json +8 -7
- package/styles/css/internal.css +50 -0
- package/styles/css/internal.css.map +1 -0
- package/styles/scss/internal.scss +27 -0
- package/esm/SearchResults.d.ts.map +0 -1
- package/esm/SearchResults.js +0 -43
- package/esm/SearchResults.js.map +0 -1
package/esm/ResultsItem.d.ts
CHANGED
package/esm/ResultsItem.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultsItem.d.ts","sourceRoot":"","sources":["../src/ResultsItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAGhE;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,yBAAyB,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyBlD,CAAC"}
|
|
1
|
+
{"version":3,"file":"ResultsItem.d.ts","sourceRoot":"","sources":["../src/ResultsItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAGhE,eAAO,MAAM,WAAW,KAAK,CAAC;AAE9B;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,yBAAyB,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyBlD,CAAC"}
|
package/esm/ResultsItem.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import classnames from "classnames";
|
|
4
4
|
import { Icon, Typography } from "@gooddata/sdk-ui-kit";
|
|
5
|
+
export const ITEM_HEIGHT = 45;
|
|
5
6
|
/**
|
|
6
7
|
* A single result item in the search results.
|
|
7
8
|
* @internal
|
|
@@ -19,7 +20,7 @@ export const ResultsItem = ({ item, onHover, onClick, selected }) => {
|
|
|
19
20
|
"gd-semantic-search__results-item--selected": selected,
|
|
20
21
|
});
|
|
21
22
|
// Use mouse enter with the target check instead of hover to prevent multiple triggers
|
|
22
|
-
// Use mouse down instead of click to prevent the
|
|
23
|
+
// Use mouse down instead of click to prevent the dialog from disappearing before the click event is caught
|
|
23
24
|
return (React.createElement("div", { className: className, onMouseEnter: onMouseEnter, onMouseDown: onClick },
|
|
24
25
|
React.createElement("div", { className: "gd-semantic-search__results-item__icon" }, renderItemIcon(item)),
|
|
25
26
|
React.createElement("div", { className: "gd-semantic-search__results-item__text" },
|
package/esm/ResultsItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultsItem.js","sourceRoot":"","sources":["../src/ResultsItem.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"ResultsItem.js","sourceRoot":"","sources":["../src/ResultsItem.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC;AAiC9B;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5F,MAAM,YAAY,GAAG,CAAC,CAAmC,EAAE,EAAE;QACzD,4BAA4B;QAC5B,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC;YAC/B,OAAO;QACX,CAAC;QAED,OAAO,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAAC;QACzB,kCAAkC,EAAE,IAAI;QACxC,4CAA4C,EAAE,QAAQ;KACzD,CAAC,CAAC;IAEH,sFAAsF;IACtF,2GAA2G;IAC3G,OAAO,CACH,6BAAK,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO;QACvE,6BAAK,SAAS,EAAC,wCAAwC,IAAE,cAAc,CAAC,IAAI,CAAC,CAAO;QACpF,6BAAK,SAAS,EAAC,wCAAwC;YACnD,oBAAC,UAAU,IAAC,OAAO,EAAC,GAAG,IAAE,IAAI,CAAC,KAAK,CAAc,CAC/C,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,cAAc,GAAG,CAAC,IAA+B,EAAE,EAAE;IACvD,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAChB,KAAK,WAAW;YACZ,OAAO,oBAAC,IAAI,CAAC,SAAS,OAAG,CAAC;QAC9B,KAAK,eAAe;YAChB,OAAO,oBAAC,IAAI,CAAC,OAAO,OAAG,CAAC;QAC5B,KAAK,SAAS;YACV,OAAO,oBAAC,IAAI,CAAC,OAAO,OAAG,CAAC;QAC5B,KAAK,WAAW;YACZ,OAAO,oBAAC,IAAI,CAAC,SAAS,OAAG,CAAC;QAC9B,KAAK,OAAO;YACR,OAAO,oBAAC,IAAI,CAAC,KAAK,OAAG,CAAC;QAC1B,KAAK,MAAM;YACP,OAAO,oBAAC,IAAI,CAAC,IAAI,OAAG,CAAC;QACzB,KAAK,QAAQ;YACT,OAAO,oBAAC,IAAI,CAAC,MAAM,OAAG,CAAC;QAC3B,KAAK,MAAM;YACP,OAAO,oBAAC,IAAI,CAAC,IAAI,OAAG,CAAC;QACzB;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { ISemanticSearchResultItem } from "@gooddata/sdk-model";
|
|
|
4
4
|
* Search results props.
|
|
5
5
|
* @internal
|
|
6
6
|
*/
|
|
7
|
-
type
|
|
7
|
+
type SearchResultsDropdownListProps = {
|
|
8
8
|
/**
|
|
9
9
|
* Search result items.
|
|
10
10
|
*/
|
|
@@ -30,6 +30,6 @@ type SearchResultsProps = {
|
|
|
30
30
|
* A dropdown list with the search results.
|
|
31
31
|
* @internal
|
|
32
32
|
*/
|
|
33
|
-
export declare const
|
|
33
|
+
export declare const SearchResultsDropdownList: React.FC<SearchResultsDropdownListProps>;
|
|
34
34
|
export {};
|
|
35
|
-
//# sourceMappingURL=
|
|
35
|
+
//# sourceMappingURL=SearchResultsDropdownList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchResultsDropdownList.d.ts","sourceRoot":"","sources":["../src/SearchResultsDropdownList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAKhE;;;GAGG;AACH,KAAK,8BAA8B,GAAG;IAClC;;OAEG;IACH,aAAa,EAAE,yBAAyB,EAAE,CAAC;IAC3C;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CA+B9E,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// (C) 2024 GoodData Corporation
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { DropdownList } from "@gooddata/sdk-ui-kit";
|
|
4
|
+
import { ITEM_HEIGHT, ResultsItem } from "./ResultsItem.js";
|
|
5
|
+
import { useListSelector } from "./hooks/index.js";
|
|
6
|
+
/**
|
|
7
|
+
* A dropdown list with the search results.
|
|
8
|
+
* @internal
|
|
9
|
+
*/
|
|
10
|
+
export const SearchResultsDropdownList = ({ searchResults, searchLoading, isMobile, width, onSelect, }) => {
|
|
11
|
+
const [selected, setSelected] = useListSelector(searchResults, onSelect);
|
|
12
|
+
return (React.createElement(DropdownList, { width: width, isMobile: isMobile, isLoading: searchLoading, itemHeight: ITEM_HEIGHT, renderItem: ({ rowIndex, item, ...props }) => {
|
|
13
|
+
return (React.createElement(ResultsItem, { onHover: () => setSelected(rowIndex), onClick: () => {
|
|
14
|
+
onSelect(item);
|
|
15
|
+
}, selected: rowIndex === selected, item: item, ...props }));
|
|
16
|
+
}, items: searchResults }));
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=SearchResultsDropdownList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchResultsDropdownList.js","sourceRoot":"","sources":["../src/SearchResultsDropdownList.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA6BnD;;;GAGG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAA6C,CAAC,EAChF,aAAa,EACb,aAAa,EACb,QAAQ,EACR,KAAK,EACL,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IAEzE,OAAO,CACH,oBAAC,YAAY,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,WAAW,EACvB,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;YACzC,OAAO,CACH,oBAAC,WAAW,IACR,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EACpC,OAAO,EAAE,GAAG,EAAE;oBACV,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACnB,CAAC,EACD,QAAQ,EAAE,QAAQ,KAAK,QAAQ,EAC/B,IAAI,EAAE,IAAI,KACN,KAAK,GACX,CACL,CAAC;QACN,CAAC,EACD,KAAK,EAAE,aAAa,GACtB,CACL,CAAC;AACN,CAAC,CAAC"}
|
package/esm/SemanticSearch.d.ts
CHANGED
|
@@ -6,14 +6,42 @@ import { IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
|
|
|
6
6
|
* @alpha
|
|
7
7
|
*/
|
|
8
8
|
export type SemanticSearchCoreProps = {
|
|
9
|
+
/**
|
|
10
|
+
* An analytical backend to use for the search. Can be omitted and taken from context.
|
|
11
|
+
*/
|
|
9
12
|
backend?: IAnalyticalBackend;
|
|
13
|
+
/**
|
|
14
|
+
* A workspace to search in. Can be omitted and taken from context.
|
|
15
|
+
*/
|
|
10
16
|
workspace?: string;
|
|
17
|
+
/**
|
|
18
|
+
* A function called when the user selects an item from the search results.
|
|
19
|
+
*/
|
|
11
20
|
onSelect: (item: ISemanticSearchResultItem) => void;
|
|
21
|
+
/**
|
|
22
|
+
* A function called when an error occurs during the search.
|
|
23
|
+
*/
|
|
12
24
|
onError?: (errorMessage: string) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Additional CSS class for the component.
|
|
27
|
+
*/
|
|
13
28
|
className?: string;
|
|
29
|
+
/**
|
|
30
|
+
* A list of object types to search for.
|
|
31
|
+
*/
|
|
14
32
|
objectTypes?: GenAISemanticSearchType[];
|
|
33
|
+
/**
|
|
34
|
+
* A flag to enable deep search, i.e. search dashboard by their contents.
|
|
35
|
+
*/
|
|
15
36
|
deepSearch?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* A limit of search results to return.
|
|
39
|
+
*/
|
|
16
40
|
limit?: number;
|
|
41
|
+
/**
|
|
42
|
+
* Placeholder text for the search input.
|
|
43
|
+
*/
|
|
44
|
+
placeholder?: string;
|
|
17
45
|
};
|
|
18
46
|
/**
|
|
19
47
|
* Semantic search component props.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemanticSearch.d.ts","sourceRoot":"","sources":["../src/SemanticSearch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAIzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG;IAClC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"SemanticSearch.d.ts","sourceRoot":"","sources":["../src/SemanticSearch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAIzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAmGF;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAMxD,CAAC"}
|
package/esm/SemanticSearch.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { useDebouncedState, Input, Dropdown } from "@gooddata/sdk-ui-kit";
|
|
4
4
|
import { IntlWrapper } from "@gooddata/sdk-ui";
|
|
5
|
-
import {
|
|
5
|
+
import { SearchResultsDropdownList } from "./SearchResultsDropdownList.js";
|
|
6
6
|
import { useSemanticSearch } from "./hooks/index.js";
|
|
7
7
|
import classnames from "classnames";
|
|
8
8
|
/**
|
|
@@ -14,11 +14,11 @@ const DEBOUNCE = 300;
|
|
|
14
14
|
* Semantic search component core.
|
|
15
15
|
* @alpha
|
|
16
16
|
*/
|
|
17
|
-
const SemanticSearchCore = ({ backend, workspace, onSelect, onError, objectTypes, deepSearch = false, limit = 10, className, }) => {
|
|
17
|
+
const SemanticSearchCore = ({ backend, workspace, onSelect, onError, objectTypes, deepSearch = false, limit = 10, className, placeholder, }) => {
|
|
18
18
|
// Input value handling
|
|
19
19
|
const [value, setValue, searchTerm] = useDebouncedState("", DEBOUNCE);
|
|
20
20
|
// Search results
|
|
21
|
-
const {
|
|
21
|
+
const { searchStatus, searchResults, searchError } = useSemanticSearch({
|
|
22
22
|
backend,
|
|
23
23
|
workspace,
|
|
24
24
|
searchTerm,
|
|
@@ -41,17 +41,17 @@ const SemanticSearchCore = ({ backend, workspace, onSelect, onError, objectTypes
|
|
|
41
41
|
}, [onSelect]);
|
|
42
42
|
// Report errors
|
|
43
43
|
React.useEffect(() => {
|
|
44
|
-
if (onError &&
|
|
44
|
+
if (onError && searchStatus === "error") {
|
|
45
45
|
onError(searchError);
|
|
46
46
|
}
|
|
47
|
-
}, [onError, searchError]);
|
|
47
|
+
}, [onError, searchError, searchStatus]);
|
|
48
48
|
return (React.createElement(Dropdown, { className: classnames("gd-semantic-search", className), closeOnMouseDrag: false, closeOnOutsideClick: false, closeOnParentScroll: false, renderBody: ({ isMobile }) => {
|
|
49
|
-
if (!searchResults.length &&
|
|
49
|
+
if (!searchResults.length && searchStatus !== "loading") {
|
|
50
50
|
return null;
|
|
51
51
|
}
|
|
52
|
-
return (React.createElement(
|
|
52
|
+
return (React.createElement(SearchResultsDropdownList, { width: width, isMobile: isMobile, searchResults: searchResults, searchLoading: searchStatus === "loading", onSelect: onItemSelect }));
|
|
53
53
|
}, renderButton: ({ openDropdown, closeDropdown }) => {
|
|
54
|
-
return (React.createElement(Input, { ref: inputRef, isSearch: true, clearOnEsc: true, value: value, onChange: (e) => setValue(String(e)), onFocus: openDropdown, onBlur: closeDropdown }));
|
|
54
|
+
return (React.createElement(Input, { ref: inputRef, placeholder: placeholder, isSearch: true, clearOnEsc: true, value: value, onChange: (e) => setValue(String(e)), onFocus: openDropdown, onBlur: closeDropdown }));
|
|
55
55
|
} }));
|
|
56
56
|
};
|
|
57
57
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemanticSearch.js","sourceRoot":"","sources":["../src/SemanticSearch.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SemanticSearch.js","sourceRoot":"","sources":["../src/SemanticSearch.tsx"],"names":[],"mappings":"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"}
|
package/esm/hooks/index.d.ts
CHANGED
package/esm/hooks/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAEA,cAAc,wBAAwB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAEA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC"}
|
package/esm/hooks/index.js
CHANGED
package/esm/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,cAAc,wBAAwB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This hook provides keyboard navigation for a list of items. It listens to ArrowUp, ArrowDown and Enter keys and
|
|
3
|
+
* calls the onSelect callback when Enter is pressed.
|
|
4
|
+
* @internal
|
|
5
|
+
*/
|
|
6
|
+
export declare const useListSelector: <T>(items: T[], onSelect: (item: T) => void) => [number, (index: number) => void];
|
|
7
|
+
//# sourceMappingURL=useListSelector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useListSelector.d.ts","sourceRoot":"","sources":["../../src/hooks/useListSelector.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,eAAe,yCAA+C,IAAI,sBAuCtB,MAAM,KAAK,IAAI,CACvE,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
// (C) 2024 GoodData Corporation
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* This hook provides keyboard navigation for a list of items. It listens to ArrowUp, ArrowDown and Enter keys and
|
|
5
|
+
* calls the onSelect callback when Enter is pressed.
|
|
6
|
+
* @internal
|
|
7
|
+
*/
|
|
8
|
+
export const useListSelector = (items, onSelect) => {
|
|
9
|
+
const [selected, setSelected] = React.useState(0);
|
|
10
|
+
React.useEffect(() => {
|
|
11
|
+
setSelected(0);
|
|
12
|
+
}, [items]);
|
|
13
|
+
const doSetSelected = React.useCallback((newValue) => {
|
|
14
|
+
setSelected(Math.max(Math.min(newValue, items.length - 1), 0));
|
|
15
|
+
}, [items.length]);
|
|
16
|
+
React.useEffect(() => {
|
|
17
|
+
const listener = (event) => {
|
|
18
|
+
if (["ArrowDown", "ArrowUp", "Enter"].indexOf(event.key) === -1)
|
|
19
|
+
return;
|
|
20
|
+
event.preventDefault();
|
|
21
|
+
event.stopImmediatePropagation();
|
|
22
|
+
switch (event.key) {
|
|
23
|
+
case "ArrowDown":
|
|
24
|
+
doSetSelected(selected + 1);
|
|
25
|
+
break;
|
|
26
|
+
case "ArrowUp":
|
|
27
|
+
doSetSelected(selected - 1);
|
|
28
|
+
break;
|
|
29
|
+
case "Enter":
|
|
30
|
+
onSelect(items[selected]);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
// Listen to keyboard events while the component is mounted
|
|
34
|
+
document.addEventListener("keydown", listener);
|
|
35
|
+
return () => {
|
|
36
|
+
document.removeEventListener("keydown", listener);
|
|
37
|
+
};
|
|
38
|
+
}, [items, onSelect, selected, doSetSelected]);
|
|
39
|
+
return [selected, doSetSelected];
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=useListSelector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useListSelector.js","sourceRoot":"","sources":["../../src/hooks/useListSelector.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAI,KAAe,EAAE,QAA2B,EAAE,EAAE;IAC/E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,WAAW,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,QAAgB,EAAE,EAAE;QACjB,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACnE,CAAC,EACD,CAAC,KAAK,CAAC,MAAM,CAAC,CACjB,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;YACtC,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBAAE,OAAO;YAExE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAChB,KAAK,WAAW;oBACZ,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;oBAC5B,MAAM;gBACV,KAAK,SAAS;oBACV,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;oBAC5B,MAAM;gBACV,KAAK,OAAO;oBACR,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;YAClC,CAAC;QACL,CAAC,CAAC;QAEF,2DAA2D;QAC3D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAE/C,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACtD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/C,OAAO,CAAC,QAAQ,EAAE,aAAa,CAAsC,CAAC;AAC1E,CAAC,CAAC"}
|
|
@@ -7,8 +7,12 @@ import { IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
|
|
|
7
7
|
export type SemanticSearchInputResult = {
|
|
8
8
|
/**
|
|
9
9
|
* Flag indicating whether the search is in progress.
|
|
10
|
+
* - idle - means we did not search yet
|
|
11
|
+
* - loading - means we are currently searching
|
|
12
|
+
* - error - means the search failed
|
|
13
|
+
* - success - means the search succeeded
|
|
10
14
|
*/
|
|
11
|
-
|
|
15
|
+
searchStatus: "idle" | "loading" | "error" | "success";
|
|
12
16
|
/**
|
|
13
17
|
* Error message if the search failed.
|
|
14
18
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSemanticSearch.d.ts","sourceRoot":"","sources":["../../src/hooks/useSemanticSearch.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACpC
|
|
1
|
+
{"version":3,"file":"useSemanticSearch.d.ts","sourceRoot":"","sources":["../../src/hooks/useSemanticSearch.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACpC;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACvD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,aAAa,EAAE,yBAAyB,EAAE,CAAC;CAC9C,CAAC;AAWF;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG;IAClC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,wEAO3B,uBAAuB,KAAG,yBAgE5B,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { useBackendStrict, useWorkspaceStrict } from "@gooddata/sdk-ui";
|
|
|
5
5
|
* Default state of the semantic search hook.
|
|
6
6
|
*/
|
|
7
7
|
const DEFAULT_STATE = {
|
|
8
|
-
|
|
8
|
+
searchStatus: "idle",
|
|
9
9
|
searchError: "",
|
|
10
10
|
searchResults: [],
|
|
11
11
|
};
|
|
@@ -28,7 +28,7 @@ export const useSemanticSearch = ({ searchTerm, objectTypes = DEFAULT_OBJECT_TYP
|
|
|
28
28
|
setState((oldState) => ({
|
|
29
29
|
// Keep the previous state of results/error, only update the loading flag
|
|
30
30
|
...oldState,
|
|
31
|
-
|
|
31
|
+
searchStatus: "loading",
|
|
32
32
|
}));
|
|
33
33
|
// Construct the query
|
|
34
34
|
let qb = effectiveBackend
|
|
@@ -52,9 +52,10 @@ export const useSemanticSearch = ({ searchTerm, objectTypes = DEFAULT_OBJECT_TYP
|
|
|
52
52
|
})
|
|
53
53
|
.then((res) => {
|
|
54
54
|
setState({
|
|
55
|
-
|
|
55
|
+
searchStatus: "success",
|
|
56
56
|
searchError: "",
|
|
57
|
-
|
|
57
|
+
// TODO - limit does not work on backend
|
|
58
|
+
searchResults: res.results.slice(0, limit),
|
|
58
59
|
});
|
|
59
60
|
})
|
|
60
61
|
.catch((e) => {
|
|
@@ -62,7 +63,7 @@ export const useSemanticSearch = ({ searchTerm, objectTypes = DEFAULT_OBJECT_TYP
|
|
|
62
63
|
// Ignore Aborted error
|
|
63
64
|
return;
|
|
64
65
|
setState({
|
|
65
|
-
|
|
66
|
+
searchStatus: "error",
|
|
66
67
|
searchError: errorMessage(e),
|
|
67
68
|
searchResults: [],
|
|
68
69
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSemanticSearch.js","sourceRoot":"","sources":["../../src/hooks/useSemanticSearch.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"useSemanticSearch.js","sourceRoot":"","sources":["../../src/hooks/useSemanticSearch.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ISemanticSearchResultItem } from "@gooddata/sdk-model";
|
|
3
|
+
/**
|
|
4
|
+
* Search results props.
|
|
5
|
+
* @internal
|
|
6
|
+
*/
|
|
7
|
+
export type SearchResultsListProps = {
|
|
8
|
+
/**
|
|
9
|
+
* Search result items.
|
|
10
|
+
*/
|
|
11
|
+
searchResults: ISemanticSearchResultItem[];
|
|
12
|
+
/**
|
|
13
|
+
* Width of the list.
|
|
14
|
+
*/
|
|
15
|
+
width: number;
|
|
16
|
+
/**
|
|
17
|
+
* Callback for item selection.
|
|
18
|
+
*/
|
|
19
|
+
onSelect: (item: ISemanticSearchResultItem) => void;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* A dropdown list with the search results.
|
|
23
|
+
* @internal
|
|
24
|
+
*/
|
|
25
|
+
export declare const SearchResultsList: React.FC<SearchResultsListProps>;
|
|
26
|
+
//# sourceMappingURL=SearchResultsList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchResultsList.d.ts","sourceRoot":"","sources":["../../src/internal/SearchResultsList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAKhE;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,yBAAyB,EAAE,CAAC;IAC3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAwB9D,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// (C) 2024 GoodData Corporation
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { List } from "@gooddata/sdk-ui-kit";
|
|
4
|
+
import { ITEM_HEIGHT, ResultsItem } from "../ResultsItem.js";
|
|
5
|
+
import { useListSelector } from "../hooks/index.js";
|
|
6
|
+
/**
|
|
7
|
+
* A dropdown list with the search results.
|
|
8
|
+
* @internal
|
|
9
|
+
*/
|
|
10
|
+
export const SearchResultsList = ({ searchResults, width, onSelect }) => {
|
|
11
|
+
const [selected, setSelected] = useListSelector(searchResults, onSelect);
|
|
12
|
+
return (React.createElement(List, { width: width, height: ITEM_HEIGHT * searchResults.length, itemHeight: ITEM_HEIGHT, renderItem: ({ rowIndex, item, ...props }) => {
|
|
13
|
+
return (React.createElement(ResultsItem, { onHover: () => setSelected(rowIndex), onClick: () => {
|
|
14
|
+
onSelect(item);
|
|
15
|
+
}, selected: rowIndex === selected, item: item, ...props }));
|
|
16
|
+
}, items: searchResults }));
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=SearchResultsList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchResultsList.js","sourceRoot":"","sources":["../../src/internal/SearchResultsList.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAqBpD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACtG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IAEzE,OAAO,CACH,oBAAC,IAAI,IACD,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,WAAW,GAAG,aAAa,CAAC,MAAM,EAC1C,UAAU,EAAE,WAAW,EACvB,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;YACzC,OAAO,CACH,oBAAC,WAAW,IACR,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EACpC,OAAO,EAAE,GAAG,EAAE;oBACV,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACnB,CAAC,EACD,QAAQ,EAAE,QAAQ,KAAK,QAAQ,EAC/B,IAAI,EAAE,IAAI,KACN,KAAK,GACX,CACL,CAAC;QACN,CAAC,EACD,KAAK,EAAE,aAAa,GACtB,CACL,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
|
|
3
|
+
import { GenAISemanticSearchType, ISemanticSearchResultItem } from "@gooddata/sdk-model";
|
|
4
|
+
/**
|
|
5
|
+
* Props for the SemanticSearchOverlay component.
|
|
6
|
+
* @internal
|
|
7
|
+
*/
|
|
8
|
+
export type SemanticSearchOverlayProps = {
|
|
9
|
+
/**
|
|
10
|
+
* A function called when the user selects an item from the search results.
|
|
11
|
+
*/
|
|
12
|
+
onSelect: (item: ISemanticSearchResultItem) => void;
|
|
13
|
+
/**
|
|
14
|
+
* An analytical backend to use for the search. Can be omitted and taken from context.
|
|
15
|
+
*/
|
|
16
|
+
backend?: IAnalyticalBackend;
|
|
17
|
+
/**
|
|
18
|
+
* A workspace to search in. Can be omitted and taken from context.
|
|
19
|
+
*/
|
|
20
|
+
workspace?: string;
|
|
21
|
+
/**
|
|
22
|
+
* A list of object types to search for.
|
|
23
|
+
*/
|
|
24
|
+
objectTypes?: GenAISemanticSearchType[];
|
|
25
|
+
/**
|
|
26
|
+
* A flag to enable deep search, i.e. search dashboard by their contents.
|
|
27
|
+
*/
|
|
28
|
+
deepSearch?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* A limit of search results to return.
|
|
31
|
+
*/
|
|
32
|
+
limit?: number;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* A component that allows users to search for insights, metrics, attributes, and other objects using semantic search.
|
|
36
|
+
* The internal version is meant to be used in an overlay inside the Header.
|
|
37
|
+
* @internal
|
|
38
|
+
*/
|
|
39
|
+
export declare const SemanticSearchOverlay: React.FC<SemanticSearchOverlayProps>;
|
|
40
|
+
//# sourceMappingURL=SemanticSearchOverlay.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SemanticSearchOverlay.d.ts","sourceRoot":"","sources":["../../src/internal/SemanticSearchOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAazF;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG;IACrC;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA4EtE,CAAC"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
// (C) 2024 GoodData Corporation
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Input, LoadingMask, useDebouncedState } from "@gooddata/sdk-ui-kit";
|
|
4
|
+
import { useSemanticSearch } from "../hooks/index.js";
|
|
5
|
+
import { SearchResultsList } from "./SearchResultsList.js";
|
|
6
|
+
import { FormattedMessage } from "react-intl";
|
|
7
|
+
/**
|
|
8
|
+
* A time in milliseconds to wait before sending a search request after the user stops typing.
|
|
9
|
+
*/
|
|
10
|
+
const DEBOUNCE = 300;
|
|
11
|
+
/**
|
|
12
|
+
* A height of the loading mask.
|
|
13
|
+
*/
|
|
14
|
+
const LOADING_HEIGHT = 100;
|
|
15
|
+
/**
|
|
16
|
+
* A component that allows users to search for insights, metrics, attributes, and other objects using semantic search.
|
|
17
|
+
* The internal version is meant to be used in an overlay inside the Header.
|
|
18
|
+
* @internal
|
|
19
|
+
*/
|
|
20
|
+
export const SemanticSearchOverlay = ({ onSelect, backend, workspace, objectTypes, deepSearch, limit = 6, }) => {
|
|
21
|
+
// Input value handling
|
|
22
|
+
const [value, setValue, searchTerm] = useDebouncedState("", DEBOUNCE);
|
|
23
|
+
// Search results
|
|
24
|
+
const { searchStatus, searchResults, searchError } = useSemanticSearch({
|
|
25
|
+
backend,
|
|
26
|
+
workspace,
|
|
27
|
+
searchTerm,
|
|
28
|
+
objectTypes,
|
|
29
|
+
deepSearch,
|
|
30
|
+
limit,
|
|
31
|
+
});
|
|
32
|
+
React.useEffect(() => {
|
|
33
|
+
if (searchStatus === "error") {
|
|
34
|
+
// Report error to the console
|
|
35
|
+
// UI will display a generic error message
|
|
36
|
+
console.error(searchError);
|
|
37
|
+
}
|
|
38
|
+
}, [searchStatus, searchError]);
|
|
39
|
+
return (React.createElement("div", { className: "gd-semantic-search__overlay" },
|
|
40
|
+
React.createElement(Input, { className: "gd-semantic-search__overlay-input", autofocus: true, placeholder: "Search...", isSearch: true, clearOnEsc: true, value: value, onChange: (e) => setValue(String(e)) }),
|
|
41
|
+
(() => {
|
|
42
|
+
switch (searchStatus) {
|
|
43
|
+
case "loading":
|
|
44
|
+
return React.createElement(LoadingMask, { width: 440, height: LOADING_HEIGHT });
|
|
45
|
+
case "error":
|
|
46
|
+
return (React.createElement("div", { className: "gd-semantic-search__overlay-error" },
|
|
47
|
+
React.createElement(FormattedMessage, { id: "semantic-search.error" })));
|
|
48
|
+
case "success":
|
|
49
|
+
if (!searchResults.length) {
|
|
50
|
+
return (React.createElement("div", { className: "gd-semantic-search__overlay-no-results" },
|
|
51
|
+
React.createElement(FormattedMessage, { id: "semantic-search.no-results", values: { query: searchTerm } })));
|
|
52
|
+
}
|
|
53
|
+
return (React.createElement(SearchResultsList, { searchResults: searchResults, width: 440, onSelect: onSelect }));
|
|
54
|
+
case "idle":
|
|
55
|
+
default:
|
|
56
|
+
return null;
|
|
57
|
+
}
|
|
58
|
+
})()));
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=SemanticSearchOverlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SemanticSearchOverlay.js","sourceRoot":"","sources":["../../src/internal/SemanticSearchOverlay.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C;;GAEG;AACH,MAAM,QAAQ,GAAG,GAAG,CAAC;AACrB;;GAEG;AACH,MAAM,cAAc,GAAG,GAAG,CAAC;AAiC3B;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EACxE,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,EACV,KAAK,GAAG,CAAC,GACZ,EAAE,EAAE;IACD,uBAAuB;IACvB,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAG,iBAAiB,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;IAEtE,iBAAiB;IACjB,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,iBAAiB,CAAC;QACnE,OAAO;QACP,SAAS;QACT,UAAU;QACV,WAAW;QACX,UAAU;QACV,KAAK;KACR,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC;YAC3B,8BAA8B;YAC9B,0CAA0C;YAC1C,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC/B,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;IAEhC,OAAO,CACH,6BAAK,SAAS,EAAC,6BAA6B;QACxC,oBAAC,KAAK,IACF,SAAS,EAAC,mCAAmC,EAC7C,SAAS,QACT,WAAW,EAAC,WAAW,EACvB,QAAQ,QACR,UAAU,QACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GACtC;QACD,CAAC,GAAG,EAAE;YACH,QAAQ,YAAY,EAAE,CAAC;gBACnB,KAAK,SAAS;oBACV,OAAO,oBAAC,WAAW,IAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,cAAc,GAAI,CAAC;gBAC/D,KAAK,OAAO;oBACR,OAAO,CACH,6BAAK,SAAS,EAAC,mCAAmC;wBAC9C,oBAAC,gBAAgB,IAAC,EAAE,EAAC,uBAAuB,GAAG,CAC7C,CACT,CAAC;gBACN,KAAK,SAAS;oBACV,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;wBACxB,OAAO,CACH,6BAAK,SAAS,EAAC,wCAAwC;4BACnD,oBAAC,gBAAgB,IACb,EAAE,EAAC,4BAA4B,EAC/B,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAC/B,CACA,CACT,CAAC;oBACN,CAAC;oBAED,OAAO,CACH,oBAAC,iBAAiB,IACd,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;gBACN,KAAK,MAAM,CAAC;gBACZ;oBACI,OAAO,IAAI,CAAC;YACpB,CAAC;QACL,CAAC,CAAC,EAAE,CACF,CACT,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This package provides React hooks and components for semantic search integration with GoodData apps,
|
|
3
|
+
* like AD, KD, data modeler, home ui etc.
|
|
4
|
+
* @packageDocumentation
|
|
5
|
+
* @internal
|
|
6
|
+
*/
|
|
7
|
+
export * from "./internal/SemanticSearchOverlay.js";
|
|
8
|
+
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,cAAc,qCAAqC,CAAC"}
|
package/esm/internal.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// (C) 2024 GoodData Corporation
|
|
2
|
+
/**
|
|
3
|
+
* This package provides React hooks and components for semantic search integration with GoodData apps,
|
|
4
|
+
* like AD, KD, data modeler, home ui etc.
|
|
5
|
+
* @packageDocumentation
|
|
6
|
+
* @internal
|
|
7
|
+
*/
|
|
8
|
+
export * from "./internal/SemanticSearchOverlay.js";
|
|
9
|
+
//# sourceMappingURL=internal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC;;;;;GAKG;AAEH,cAAc,qCAAqC,CAAC"}
|
|
@@ -20,14 +20,42 @@ export declare const SemanticSearch: React_2.FC<SemanticSearchProps>;
|
|
|
20
20
|
* @alpha
|
|
21
21
|
*/
|
|
22
22
|
export declare type SemanticSearchCoreProps = {
|
|
23
|
+
/**
|
|
24
|
+
* An analytical backend to use for the search. Can be omitted and taken from context.
|
|
25
|
+
*/
|
|
23
26
|
backend?: IAnalyticalBackend;
|
|
27
|
+
/**
|
|
28
|
+
* A workspace to search in. Can be omitted and taken from context.
|
|
29
|
+
*/
|
|
24
30
|
workspace?: string;
|
|
31
|
+
/**
|
|
32
|
+
* A function called when the user selects an item from the search results.
|
|
33
|
+
*/
|
|
25
34
|
onSelect: (item: ISemanticSearchResultItem) => void;
|
|
35
|
+
/**
|
|
36
|
+
* A function called when an error occurs during the search.
|
|
37
|
+
*/
|
|
26
38
|
onError?: (errorMessage: string) => void;
|
|
39
|
+
/**
|
|
40
|
+
* Additional CSS class for the component.
|
|
41
|
+
*/
|
|
27
42
|
className?: string;
|
|
43
|
+
/**
|
|
44
|
+
* A list of object types to search for.
|
|
45
|
+
*/
|
|
28
46
|
objectTypes?: GenAISemanticSearchType[];
|
|
47
|
+
/**
|
|
48
|
+
* A flag to enable deep search, i.e. search dashboard by their contents.
|
|
49
|
+
*/
|
|
29
50
|
deepSearch?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* A limit of search results to return.
|
|
53
|
+
*/
|
|
30
54
|
limit?: number;
|
|
55
|
+
/**
|
|
56
|
+
* Placeholder text for the search input.
|
|
57
|
+
*/
|
|
58
|
+
placeholder?: string;
|
|
31
59
|
};
|
|
32
60
|
|
|
33
61
|
/**
|
|
@@ -71,8 +99,12 @@ export declare type SemanticSearchHookInput = {
|
|
|
71
99
|
export declare type SemanticSearchInputResult = {
|
|
72
100
|
/**
|
|
73
101
|
* Flag indicating whether the search is in progress.
|
|
102
|
+
* - idle - means we did not search yet
|
|
103
|
+
* - loading - means we are currently searching
|
|
104
|
+
* - error - means the search failed
|
|
105
|
+
* - success - means the search succeeded
|
|
74
106
|
*/
|
|
75
|
-
|
|
107
|
+
searchStatus: "idle" | "loading" | "error" | "success";
|
|
76
108
|
/**
|
|
77
109
|
* Error message if the search failed.
|
|
78
110
|
*/
|
|
@@ -91,6 +123,13 @@ export declare type SemanticSearchProps = SemanticSearchCoreProps & {
|
|
|
91
123
|
locale?: string;
|
|
92
124
|
};
|
|
93
125
|
|
|
126
|
+
/**
|
|
127
|
+
* This hook provides keyboard navigation for a list of items. It listens to ArrowUp, ArrowDown and Enter keys and
|
|
128
|
+
* calls the onSelect callback when Enter is pressed.
|
|
129
|
+
* @internal
|
|
130
|
+
*/
|
|
131
|
+
export declare const useListSelector: <T>(items: T[], onSelect: (item: T) => void) => [number, (index: number) => void];
|
|
132
|
+
|
|
94
133
|
/**
|
|
95
134
|
* Hook to perform semantic search.
|
|
96
135
|
* Makes the request to server and returns the search results.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gooddata/sdk-ui-semantic-search",
|
|
3
|
-
"version": "10.8.0-alpha.
|
|
3
|
+
"version": "10.8.0-alpha.2",
|
|
4
4
|
"description": "GoodData SDK TypeScript & React skeleton",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
"browser": "./esm/index.js",
|
|
14
14
|
"exports": {
|
|
15
15
|
".": "./esm/index.js",
|
|
16
|
-
"./styles/css/*": "./styles/css/*"
|
|
16
|
+
"./styles/css/*": "./styles/css/*",
|
|
17
|
+
"./internal": "./esm/internal.js"
|
|
17
18
|
},
|
|
18
19
|
"types": "./esm/index.d.ts",
|
|
19
20
|
"sideEffects": [
|
|
@@ -36,10 +37,10 @@
|
|
|
36
37
|
"react-intl": "^6.4.1",
|
|
37
38
|
"tslib": "^2.5.0",
|
|
38
39
|
"classnames": "^2.3.1",
|
|
39
|
-
"@gooddata/sdk-model": "10.8.0-alpha.
|
|
40
|
-
"@gooddata/sdk-ui
|
|
41
|
-
"@gooddata/sdk-ui": "10.8.0-alpha.
|
|
42
|
-
"@gooddata/sdk-backend-spi": "10.8.0-alpha.
|
|
40
|
+
"@gooddata/sdk-model": "10.8.0-alpha.2",
|
|
41
|
+
"@gooddata/sdk-ui": "10.8.0-alpha.2",
|
|
42
|
+
"@gooddata/sdk-ui-kit": "10.8.0-alpha.2",
|
|
43
|
+
"@gooddata/sdk-backend-spi": "10.8.0-alpha.2"
|
|
43
44
|
},
|
|
44
45
|
"peerDependencies": {
|
|
45
46
|
"react": "^16.10.0 || ^17.0.0 || ^18.0.0",
|
|
@@ -81,7 +82,7 @@
|
|
|
81
82
|
"stylelint": "^13.8.0",
|
|
82
83
|
"stylelint-checkstyle-formatter": "^0.1.2",
|
|
83
84
|
"stylelint-config-prettier": "^8.0.2",
|
|
84
|
-
"@gooddata/sdk-backend-mockingbird": "10.8.0-alpha.
|
|
85
|
+
"@gooddata/sdk-backend-mockingbird": "10.8.0-alpha.2"
|
|
85
86
|
},
|
|
86
87
|
"scripts": {
|
|
87
88
|
"clean": "rm -rf ci dist esm coverage *.log styles/css tsconfig.tsbuildinfo",
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
.gd-semantic-search__results-item {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: row;
|
|
4
|
+
align-items: center;
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
gap: 1em;
|
|
7
|
+
padding: 0 1em;
|
|
8
|
+
height: 45px;
|
|
9
|
+
}
|
|
10
|
+
.gd-semantic-search__results-item--selected {
|
|
11
|
+
color: var(--gd-palette-complementary-9, #000);
|
|
12
|
+
background: var(--gd-palette-complementary-2, #ebeff4);
|
|
13
|
+
}
|
|
14
|
+
.gd-semantic-search__results-item__icon {
|
|
15
|
+
width: 16px;
|
|
16
|
+
height: 16px;
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
}
|
|
20
|
+
.gd-semantic-search__results-item__icon > svg {
|
|
21
|
+
width: 16px;
|
|
22
|
+
height: 16px;
|
|
23
|
+
}
|
|
24
|
+
.gd-semantic-search__results-item__text {
|
|
25
|
+
flex-grow: 1;
|
|
26
|
+
min-width: 0;
|
|
27
|
+
}
|
|
28
|
+
.gd-semantic-search__results-item__text > p {
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
text-overflow: ellipsis;
|
|
31
|
+
white-space: nowrap;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.gd-semantic-search__overlay {
|
|
35
|
+
width: 440px;
|
|
36
|
+
background: white;
|
|
37
|
+
margin: 10px 0;
|
|
38
|
+
}
|
|
39
|
+
.gd-semantic-search__overlay-input {
|
|
40
|
+
margin: 0 10px;
|
|
41
|
+
}
|
|
42
|
+
.gd-semantic-search__overlay-error, .gd-semantic-search__overlay-no-results {
|
|
43
|
+
height: 100px;
|
|
44
|
+
display: flex;
|
|
45
|
+
justify-content: center;
|
|
46
|
+
align-items: center;
|
|
47
|
+
color: var(--gd-palette-complementary-6, #94a1ad);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/*# sourceMappingURL=internal.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss","../scss/internal.scss"],"names":[],"mappings":"AAOI;EAGI;EACA;EACA;EACA;EACA;EACA;EACA,QARc;;AAUd;EACI,OCiBI;EDhBJ,YCyFY;;ADtFhB;EAEI,OADY;EAEZ,QAFY;EAGZ;EACA;;AAEA;EAEI,OARQ;EASR,QATQ;;AAahB;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;AErCR;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA","file":"internal.css"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// (C) 2024 GoodData Corporation
|
|
2
|
+
|
|
3
|
+
@use "sass:color";
|
|
4
|
+
@use "sass:meta";
|
|
5
|
+
@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
|
|
6
|
+
@use "./main.scss";
|
|
7
|
+
|
|
8
|
+
.gd-semantic-search {
|
|
9
|
+
&__overlay {
|
|
10
|
+
width: 440px;
|
|
11
|
+
background: white;
|
|
12
|
+
margin: 10px 0;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&__overlay-input {
|
|
16
|
+
margin: 0 10px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&__overlay-error,
|
|
20
|
+
&__overlay-no-results {
|
|
21
|
+
height: 100px;
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
color: var(--gd-palette-complementary-6, #94a1ad);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../src/SearchResults.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAIhE;;;GAGG;AACH,KAAK,kBAAkB,GAAG;IACtB;;OAEG;IACH,aAAa,EAAE,yBAAyB,EAAE,CAAC;IAC3C;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6DtD,CAAC"}
|
package/esm/SearchResults.js
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
// (C) 2024 GoodData Corporation
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { DropdownList } from "@gooddata/sdk-ui-kit";
|
|
4
|
-
import { ResultsItem } from "./ResultsItem.js";
|
|
5
|
-
/**
|
|
6
|
-
* A dropdown list with the search results.
|
|
7
|
-
* @internal
|
|
8
|
-
*/
|
|
9
|
-
export const SearchResults = ({ searchResults, searchLoading, isMobile, width, onSelect, }) => {
|
|
10
|
-
const [selected, setSelected] = React.useState(0);
|
|
11
|
-
React.useEffect(() => {
|
|
12
|
-
setSelected(0);
|
|
13
|
-
}, [searchResults]);
|
|
14
|
-
React.useEffect(() => {
|
|
15
|
-
const listener = (event) => {
|
|
16
|
-
if (["ArrowDown", "ArrowUp", "Enter"].indexOf(event.key) === -1)
|
|
17
|
-
return;
|
|
18
|
-
event.preventDefault();
|
|
19
|
-
event.stopImmediatePropagation();
|
|
20
|
-
switch (event.key) {
|
|
21
|
-
case "ArrowDown":
|
|
22
|
-
setSelected(Math.min(selected + 1, searchResults.length - 1));
|
|
23
|
-
break;
|
|
24
|
-
case "ArrowUp":
|
|
25
|
-
setSelected(Math.max(selected - 1, 0));
|
|
26
|
-
break;
|
|
27
|
-
case "Enter":
|
|
28
|
-
onSelect(searchResults[selected]);
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
// Listen to keyboard events while the component is mounted
|
|
32
|
-
document.addEventListener("keydown", listener);
|
|
33
|
-
return () => {
|
|
34
|
-
document.removeEventListener("keydown", listener);
|
|
35
|
-
};
|
|
36
|
-
}, [searchResults, onSelect, selected]);
|
|
37
|
-
return (React.createElement(DropdownList, { width: width, isMobile: isMobile, isLoading: searchLoading, itemHeight: 45, renderItem: ({ rowIndex, item, ...props }) => {
|
|
38
|
-
return (React.createElement(ResultsItem, { onHover: () => setSelected(rowIndex), onClick: () => {
|
|
39
|
-
onSelect(item);
|
|
40
|
-
}, selected: rowIndex === selected, item: item, ...props }));
|
|
41
|
-
}, items: searchResults }));
|
|
42
|
-
};
|
|
43
|
-
//# sourceMappingURL=SearchResults.js.map
|
package/esm/SearchResults.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../src/SearchResults.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AA6B/C;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EACxD,aAAa,EACb,aAAa,EACb,QAAQ,EACR,KAAK,EACL,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,WAAW,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;YACtC,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBAAE,OAAO;YAExE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAChB,KAAK,WAAW;oBACZ,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;oBAC9D,MAAM;gBACV,KAAK,SAAS;oBACV,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;oBACvC,MAAM;gBACV,KAAK,OAAO;oBACR,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC1C,CAAC;QACL,CAAC,CAAC;QAEF,2DAA2D;QAC3D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAE/C,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACtD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExC,OAAO,CACH,oBAAC,YAAY,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,EAAE,EACd,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;YACzC,OAAO,CACH,oBAAC,WAAW,IACR,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EACpC,OAAO,EAAE,GAAG,EAAE;oBACV,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACnB,CAAC,EACD,QAAQ,EAAE,QAAQ,KAAK,QAAQ,EAC/B,IAAI,EAAE,IAAI,KACN,KAAK,GACX,CACL,CAAC;QACN,CAAC,EACD,KAAK,EAAE,aAAa,GACtB,CACL,CAAC;AACN,CAAC,CAAC"}
|