@gooddata/sdk-ui-semantic-search 10.8.0-alpha.0 → 10.8.0-alpha.10

package/esm/internal/SearchOverlay.js

@@ -0,0 +1,64 @@
+// (C) 2024 GoodData Corporation
+import * as React from "react";
+import { Input, LoadingMask, useDebouncedState } from "@gooddata/sdk-ui-kit";
+import { useSemanticSearch } from "../hooks/index.js";
+import { SearchResultsList } from "./SearchResultsList.js";
+import { FormattedMessage } from "react-intl";
+/**
+ * A time in milliseconds to wait before sending a search request after the user stops typing.
+ */
+const DEBOUNCE = 300;
+/**
+ * A height of the loading mask.
+ */
+const LOADING_HEIGHT = 100;
+/**
+ * A width of the search drop-down.
+ */
+const SEARCH_OVERLAY_WIDTH = 440;
+/**
+ * A component that allows users to search for insights, metrics, attributes, and other objects using semantic search.
+ * The internal version is meant to be used in an overlay inside the Header.
+ * @internal
+ */
+export const SearchOverlay = ({ onSelect, backend, workspace, objectTypes, deepSearch, limit = 6, intl, }) => {
+    // Input value handling
+    const [value, setValue, searchTerm] = useDebouncedState("", DEBOUNCE);
+    // Search results
+    const { searchStatus, searchResults, searchError } = useSemanticSearch({
+        backend,
+        workspace,
+        searchTerm,
+        objectTypes,
+        deepSearch,
+        limit,
+    });
+    React.useEffect(() => {
+        if (searchStatus === "error") {
+            // Report error to the console
+            // UI will display a generic error message
+            console.error(searchError);
+        }
+    }, [searchStatus, searchError]);
+    return (React.createElement("div", { className: "gd-semantic-search__overlay" },
+        React.createElement(Input, { className: "gd-semantic-search__overlay-input", autofocus: true, placeholder: intl.formatMessage({ id: "semantic-search.placeholder" }), isSearch: true, clearOnEsc: true, value: value, onChange: (e) => setValue(String(e)) }),
+        (() => {
+            switch (searchStatus) {
+                case "loading":
+                    return React.createElement(LoadingMask, { width: SEARCH_OVERLAY_WIDTH, height: LOADING_HEIGHT });
+                case "error":
+                    return (React.createElement("div", { className: "gd-semantic-search__overlay-error" },
+                        React.createElement(FormattedMessage, { id: "semantic-search.error" })));
+                case "success":
+                    if (!searchResults.length) {
+                        return (React.createElement("div", { className: "gd-semantic-search__overlay-no-results" },
+                            React.createElement(FormattedMessage, { id: "semantic-search.no-results", values: { query: searchTerm } })));
+                    }
+                    return (React.createElement(SearchResultsList, { searchResults: searchResults, width: SEARCH_OVERLAY_WIDTH, onSelect: onSelect }));
+                case "idle":
+                default:
+                    return null;
+            }
+        })()));
+};
+//# sourceMappingURL=SearchOverlay.js.map

package/esm/internal/SearchOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchOverlay.js","sourceRoot":"","sources":["../../src/internal/SearchOverlay.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,EAAyB,MAAM,YAAY,CAAC;AAErE;;GAEG;AACH,MAAM,QAAQ,GAAG,GAAG,CAAC;AACrB;;GAEG;AACH,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B;;GAEG;AACH,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAiCjC;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EACxD,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,EACV,KAAK,GAAG,CAAC,EACT,IAAI,GACP,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,EAAE,IAAI,CAAC,aAAa,CAAC,EAAE,EAAE,EAAE,6BAA6B,EAAE,CAAC,EACtE,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,oBAAoB,EAAE,MAAM,EAAE,cAAc,GAAI,CAAC;gBAChF,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,oBAAoB,EAC3B,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"}

package/esm/internal/SearchResultsList.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { ISemanticSearchResultItemWithUrl } from "@gooddata/sdk-model";
+/**
+ * Search results props.
+ * @internal
+ */
+export type SearchResultsListProps = {
+    /**
+     * Search result items.
+     */
+    searchResults: ISemanticSearchResultItemWithUrl[];
+    /**
+     * Width of the list.
+     */
+    width: number;
+    /**
+     * Callback for item selection.
+     */
+    onSelect: (item: ISemanticSearchResultItemWithUrl) => void;
+};
+/**
+ * A dropdown list with the search results.
+ * @internal
+ */
+export declare const SearchResultsList: React.FC<SearchResultsListProps>;
+//# sourceMappingURL=SearchResultsList.d.ts.map

package/esm/internal/SearchResultsList.d.ts.map

@@ -0,0 +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,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAKvE;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,gCAAgC,EAAE,CAAC;IAClD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,gCAAgC,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuB9D,CAAC"}

package/esm/internal/SearchResultsList.js

@@ -0,0 +1,16 @@
+// (C) 2024 GoodData Corporation
+import * as React from "react";
+import { List } from "@gooddata/sdk-ui-kit";
+import { ITEM_HEIGHT, ResultsItem } from "../ResultsItem.js";
+import { useListSelector } from "../hooks/index.js";
+/**
+ * A dropdown list with the search results.
+ * @internal
+ */
+export const SearchResultsList = ({ searchResults, width, onSelect }) => {
+    const [selected, setSelected] = useListSelector(searchResults, onSelect);
+    return (React.createElement(List, { width: width, height: ITEM_HEIGHT * searchResults.length, itemHeight: ITEM_HEIGHT, renderItem: ({ item, width, height }) => {
+            return (React.createElement(ResultsItem, { onHover: setSelected, onSelect: onSelect, active: item === selected, item: item, width: width, height: height }));
+        }, items: searchResults }));
+};
+//# sourceMappingURL=SearchResultsList.js.map

package/esm/internal/SearchResultsList.js.map

@@ -0,0 +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,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;YACpC,OAAO,CACH,oBAAC,WAAW,IACR,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,IAAI,KAAK,QAAQ,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GAChB,CACL,CAAC;QACN,CAAC,EACD,KAAK,EAAE,aAAa,GACtB,CACL,CAAC;AACN,CAAC,CAAC"}

package/esm/internal.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This package provides React hooks and components for semantic search integration with GoodData apps,
+ * like AD, KD, data modeler, home ui etc.
+ * @packageDocumentation
+ * @internal
+ */
+export * from "./internal/HeaderSearchButton.js";
+//# sourceMappingURL=internal.d.ts.map

package/esm/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,cAAc,kCAAkC,CAAC"}

package/esm/internal.js

@@ -0,0 +1,9 @@
+// (C) 2024 GoodData Corporation
+/**
+ * This package provides React hooks and components for semantic search integration with GoodData apps,
+ * like AD, KD, data modeler, home ui etc.
+ * @packageDocumentation
+ * @internal
+ */
+export * from "./internal/HeaderSearchButton.js";
+//# sourceMappingURL=internal.js.map

package/esm/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC;;;;;GAKG;AAEH,cAAc,kCAAkC,CAAC"}

package/esm/sdk-ui-semantic-search.d.ts

@@ -7,6 +7,7 @@
 import { GenAISemanticSearchType } from '@gooddata/sdk-model';
 import { IAnalyticalBackend } from '@gooddata/sdk-backend-spi';
 import { ISemanticSearchResultItem } from '@gooddata/sdk-model';
+import { ISemanticSearchResultItemWithUrl } from '@gooddata/sdk-model';
 import * as React_2 from 'react';
 
 /**
@@ -20,14 +21,42 @@ export declare const SemanticSearch: React_2.FC<SemanticSearchProps>;
  * @alpha
  */
 export declare type SemanticSearchCoreProps = {
+    /**
+     * An analytical backend to use for the search. Can be omitted and taken from context.
+     */
     backend?: IAnalyticalBackend;
+    /**
+     * A workspace to search in. Can be omitted and taken from context.
+     */
     workspace?: string;
+    /**
+     * A function called when the user selects an item from the search results.
+     */
     onSelect: (item: ISemanticSearchResultItem) => void;
+    /**
+     * A function called when an error occurs during the search.
+     */
     onError?: (errorMessage: string) => void;
+    /**
+     * Additional CSS class for the component.
+     */
     className?: string;
+    /**
+     * A list of object types to search for.
+     */
     objectTypes?: GenAISemanticSearchType[];
+    /**
+     * A flag to enable deep search, i.e. search dashboard by their contents.
+     */
     deepSearch?: boolean;
+    /**
+     * A limit of search results to return.
+     */
     limit?: number;
+    /**
+     * Placeholder text for the search input.
+     */
+    placeholder?: string;
 };
 
 /**
@@ -71,8 +100,12 @@ export declare type SemanticSearchHookInput = {
 export declare type SemanticSearchInputResult = {
     /**
      * Flag indicating whether the search is in progress.
+     * - idle - means we did not search yet
+     * - loading - means we are currently searching
+     * - error - means the search failed
+     * - success - means the search succeeded
      */
-    searchLoading: boolean;
+    searchStatus: "idle" | "loading" | "error" | "success";
     /**
      * Error message if the search failed.
      */
@@ -80,7 +113,7 @@ export declare type SemanticSearchInputResult = {
     /**
      * The search results.
      */
-    searchResults: ISemanticSearchResultItem[];
+    searchResults: ISemanticSearchResultItemWithUrl[];
 };
 
 /**
@@ -91,6 +124,13 @@ export declare type SemanticSearchProps = SemanticSearchCoreProps & {
     locale?: string;
 };
 
+/**
+ * This hook provides keyboard navigation for a list of items. It listens to ArrowUp, ArrowDown and Enter keys and
+ * calls the onSelect callback when Enter is pressed.
+ * @internal
+ */
+export declare const useListSelector: <T>(items: T[], onSelect: (item: T) => void) => [T, (item: T) => void];
+
 /**
  * Hook to perform semantic search.
  * Makes the request to server and returns the search results.

package/esm/utils/getUIPath.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Types of objects that we can navigate to in UI.
+ * @internal
+ */
+export type UIPathObjectTypes = "dashboard" | "visualization" | "metric" | "dataset" | "date" | "fact" | "attribute" | "label";
+/**
+ * Get the UI path for the given object type, object ID, and workspace ID.
+ * TODO - this logic should live in gdc-ui repo, would require refactoring of the sdk-ui-semantic-search
+ *  - ui components need URL right away to be able to render native anchor tags
+ *  - gdc-ui would need to inject the URL between the data is loaded and the render
+ * @internal
+ */
+export declare const getUIPath: (objectType: UIPathObjectTypes, objectId: string, workspaceId: string) => string;
+//# sourceMappingURL=getUIPath.d.ts.map

package/esm/utils/getUIPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getUIPath.d.ts","sourceRoot":"","sources":["../../src/utils/getUIPath.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GACvB,WAAW,GACX,eAAe,GACf,QAAQ,GACR,SAAS,GACT,MAAM,GACN,MAAM,GACN,WAAW,GACX,OAAO,CAAC;AAEd;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,eAAgB,iBAAiB,YAAY,MAAM,eAAe,MAAM,KAAG,MAqBhG,CAAC"}

package/esm/utils/getUIPath.js

@@ -0,0 +1,37 @@
+// (C) 2024 GoodData Corporation
+/**
+ * Get the UI path for the given object type, object ID, and workspace ID.
+ * TODO - this logic should live in gdc-ui repo, would require refactoring of the sdk-ui-semantic-search
+ *  - ui components need URL right away to be able to render native anchor tags
+ *  - gdc-ui would need to inject the URL between the data is loaded and the render
+ * @internal
+ */
+export const getUIPath = (objectType, objectId, workspaceId) => {
+    switch (objectType) {
+        case "dashboard":
+            return `/dashboards/#/workspace/${workspaceId}/dashboard/${objectId}`;
+        case "visualization":
+            return `/analyze/#/${workspaceId}/${objectId}/edit`;
+        case "metric":
+            return `/metrics/#/${workspaceId}/metric/${objectId}`;
+        case "dataset":
+            return `/modeler/#/${workspaceId}`; // TODO - deep links
+        case "attribute":
+            return `/modeler/#/${workspaceId}`; // TODO - deep links
+        case "label":
+            return `/modeler/#/${workspaceId}`; // TODO - deep links
+        case "fact":
+            return `/modeler/#/${workspaceId}`; // TODO - deep links
+        case "date":
+            return `/modeler/#/${workspaceId}`; // TODO - deep links
+        default:
+            return exhaustiveCheck(objectType);
+    }
+};
+/**
+ * Ensure exhaustive switch to prevent missing cases.
+ */
+const exhaustiveCheck = (x) => {
+    throw new Error(`Unknown item type ${x}`);
+};
+//# sourceMappingURL=getUIPath.js.map

package/esm/utils/getUIPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getUIPath.js","sourceRoot":"","sources":["../../src/utils/getUIPath.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAgBhC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,UAA6B,EAAE,QAAgB,EAAE,WAAmB,EAAU,EAAE;IACtG,QAAQ,UAAU,EAAE,CAAC;QACjB,KAAK,WAAW;YACZ,OAAO,2BAA2B,WAAW,cAAc,QAAQ,EAAE,CAAC;QAC1E,KAAK,eAAe;YAChB,OAAO,cAAc,WAAW,IAAI,QAAQ,OAAO,CAAC;QACxD,KAAK,QAAQ;YACT,OAAO,cAAc,WAAW,WAAW,QAAQ,EAAE,CAAC;QAC1D,KAAK,SAAS;YACV,OAAO,cAAc,WAAW,EAAE,CAAC,CAAC,oBAAoB;QAC5D,KAAK,WAAW;YACZ,OAAO,cAAc,WAAW,EAAE,CAAC,CAAC,oBAAoB;QAC5D,KAAK,OAAO;YACR,OAAO,cAAc,WAAW,EAAE,CAAC,CAAC,oBAAoB;QAC5D,KAAK,MAAM;YACP,OAAO,cAAc,WAAW,EAAE,CAAC,CAAC,oBAAoB;QAC5D,KAAK,MAAM;YACP,OAAO,cAAc,WAAW,EAAE,CAAC,CAAC,oBAAoB;QAC5D;YACI,OAAO,eAAe,CAAC,UAAU,CAAC,CAAC;IAC3C,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,eAAe,GAAG,CAAC,CAAQ,EAAS,EAAE;IACxC,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAC9C,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-semantic-search",
-  "version": "10.8.0-alpha.0",
+  "version": "10.8.0-alpha.10",
   "description": "GoodData SDK TypeScript & React skeleton",
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
   "browser": "./esm/index.js",
   "exports": {
     ".": "./esm/index.js",
-    "./styles/css/*": "./styles/css/*"
+    "./styles/css/*": "./styles/css/*",
+    "./internal": "./esm/internal.js"
   },
   "types": "./esm/index.d.ts",
   "sideEffects": [
@@ -36,10 +37,11 @@
     "react-intl": "^6.4.1",
     "tslib": "^2.5.0",
     "classnames": "^2.3.1",
-    "@gooddata/sdk-model": "10.8.0-alpha.0",
-    "@gooddata/sdk-ui": "10.8.0-alpha.0",
-    "@gooddata/sdk-ui-kit": "10.8.0-alpha.0",
-    "@gooddata/sdk-backend-spi": "10.8.0-alpha.0"
+    "@gooddata/sdk-ui-kit": "10.8.0-alpha.10",
+    "@gooddata/sdk-model": "10.8.0-alpha.10",
+    "@gooddata/sdk-ui-theme-provider": "10.8.0-alpha.10",
+    "@gooddata/sdk-ui": "10.8.0-alpha.10",
+    "@gooddata/sdk-backend-spi": "10.8.0-alpha.10"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -81,7 +83,7 @@
     "stylelint": "^13.8.0",
     "stylelint-checkstyle-formatter": "^0.1.2",
     "stylelint-config-prettier": "^8.0.2",
-    "@gooddata/sdk-backend-mockingbird": "10.8.0-alpha.0"
+    "@gooddata/sdk-backend-mockingbird": "10.8.0-alpha.10"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage *.log styles/css tsconfig.tsbuildinfo",

package/styles/css/internal.css

@@ -0,0 +1,158 @@
+/* allow vendor prefixes and disable max length */
+/* allow vendor prefixes and disable max length */
+.gd-semantic-search__results-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  gap: 1em;
+  padding: 0 1em;
+  height: 45px;
+  text-decoration: none;
+}
+.gd-semantic-search__results-item--active {
+  color: var(--gd-palette-complementary-9, #000);
+  background: var(--gd-palette-complementary-2, #ebeff4);
+}
+.gd-semantic-search__results-item__icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+}
+.gd-semantic-search__results-item__icon > svg {
+  width: 16px;
+  height: 16px;
+}
+.gd-semantic-search__results-item__text {
+  flex-grow: 1;
+  min-width: 0;
+  font-weight: 400;
+  line-height: 1.4rem;
+  color: var(--gd-palette-complementary-8, #464e56);
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gd-semantic-search__results-item__details {
+  display: none;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+}
+.gd-semantic-search__results-item__details__contents {
+  width: 190px;
+  padding: 5px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.gd-semantic-search__results-item__details__contents > * {
+  margin-bottom: 15px;
+}
+.gd-semantic-search__results-item__details__contents h3 {
+  font-size: 14px;
+  margin: 0 0 10px;
+}
+.gd-semantic-search__results-item__details__contents .gd-ellipsis-text-content {
+  font-size: 12px;
+}
+.gd-semantic-search__results-item__details__contents h4 {
+  margin: 0;
+  text-transform: uppercase;
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--gd-palette-complementary-6, #94a1ad);
+}
+.gd-semantic-search__results-item--active .gd-semantic-search__results-item__details {
+  display: unset;
+}
+
+.gd-semantic-search__bubble.bubble.bubble-light {
+  background: var(--gd-palette-complementary-0, #fff);
+}
+
+.gd-semantic-search__overlay {
+  width: 440px;
+  background: var(--gd-palette-complementary-0, #fff);
+  margin: 10px 0;
+}
+.gd-semantic-search__overlay-input {
+  margin: 0 10px;
+}
+.gd-semantic-search__overlay-error, .gd-semantic-search__overlay-no-results {
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--gd-palette-complementary-6, #94a1ad);
+}
+
+.gd-header-search {
+  height: 100%;
+  margin: 0;
+  line-height: 42px;
+  opacity: 0.8;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 0 13px 2px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.gd-header-search:hover, .gd-header-search.is-open {
+  opacity: 1;
+}
+.gd-header-search.is-open {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.gd-header-search {
+  position: relative;
+  box-sizing: border-box;
+  padding-right: 34px;
+}
+.gd-header-search:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+.gd-header-search::after {
+  content: "\e612";
+  position: absolute;
+  top: 0;
+  right: 11px;
+  margin-left: 11px;
+  width: 12px;
+  opacity: 0.5;
+  text-align: center;
+  font-family: "Indigo", sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+}
+.gd-header-search.is-open::after {
+  content: "\e613";
+}
+
+.gd-icon-header-search {
+  vertical-align: middle;
+  opacity: 0.8;
+  margin-right: 6px;
+}
+.gd-icon-header-search::before {
+  content: "\e62b";
+}
+
+.gd-header-search-dropdown {
+  overflow: hidden;
+}
+.gd-header-search-dropdown .gd-list {
+  min-width: 210px;
+}
+.gd-header-search-dropdown .gd-list .gd-list-item {
+  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-weight: 400;
+}
+
+/*# sourceMappingURL=internal.css.map */

package/styles/css/internal.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../scss/main.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss","../scss/internal.scss"],"names":[],"mappings":"AA0HA;AA4DA;AC/KI;EAGI;EACA;EACA;EACA;EACA;EACA;EACA,QARc;EASd;;AAEA;EACI,OCgBI;EDfJ,YCwFY;;ADrFhB;EAEI,OADY;EAEZ,QAFY;EAGZ;EACA;;AAEA;EAEI,OARQ;EASR,QATQ;;AAahB;EACI;EACA;EACA;EACA;EACA,OCbI;EDcJ;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA,OC1DG;;AD+Df;EACI;;;AAKZ;EACI,YC5Ea;;;ACRb;EACI;EACA,YDMS;ECLT;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA,ODFe;;;ACMvB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EH+EA;EACA;EACA,eAHwB;;AG1ExB;EAEI;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aDyBS;ECxBT;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;;AAEA;EACI;;AAEA;EACI,aDHM;ECIN","file":"internal.css"}

package/styles/css/main.css

@@ -6,8 +6,9 @@
   gap: 1em;
   padding: 0 1em;
   height: 45px;
+  text-decoration: none;
 }
-.gd-semantic-search__results-item--selected {
+.gd-semantic-search__results-item--active {
   color: var(--gd-palette-complementary-9, #000);
   background: var(--gd-palette-complementary-2, #ebeff4);
 }
@@ -24,11 +25,50 @@
 .gd-semantic-search__results-item__text {
   flex-grow: 1;
   min-width: 0;
-}
-.gd-semantic-search__results-item__text > p {
+  font-weight: 400;
+  line-height: 1.4rem;
+  color: var(--gd-palette-complementary-8, #464e56);
+  font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.gd-semantic-search__results-item__details {
+  display: none;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+}
+.gd-semantic-search__results-item__details__contents {
+  width: 190px;
+  padding: 5px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.gd-semantic-search__results-item__details__contents > * {
+  margin-bottom: 15px;
+}
+.gd-semantic-search__results-item__details__contents h3 {
+  font-size: 14px;
+  margin: 0 0 10px;
+}
+.gd-semantic-search__results-item__details__contents .gd-ellipsis-text-content {
+  font-size: 12px;
+}
+.gd-semantic-search__results-item__details__contents h4 {
+  margin: 0;
+  text-transform: uppercase;
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--gd-palette-complementary-6, #94a1ad);
+}
+.gd-semantic-search__results-item--active .gd-semantic-search__results-item__details {
+  display: unset;
+}
+
+.gd-semantic-search__bubble.bubble.bubble-light {
+  background: var(--gd-palette-complementary-0, #fff);
+}
 
 /*# sourceMappingURL=main.css.map */

package/styles/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.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","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAOI;EAGI;EACA;EACA;EACA;EACA;EACA;EACA,QARc;EASd;;AAEA;EACI,OCgBI;EDfJ,YCwFY;;ADrFhB;EAEI,OADY;EAEZ,QAFY;EAGZ;EACA;;AAEA;EAEI,OARQ;EASR,QATQ;;AAahB;EACI;EACA;EACA;EACA;EACA,OCbI;EDcJ;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA,OC1DG;;AD+Df;EACI;;;AAKZ;EACI,YC5Ea","file":"main.css"}

package/styles/scss/internal.scss

@@ -0,0 +1,102 @@
+// (C) 2024 GoodData Corporation
+
+@use "sass:color";
+@use "sass:meta";
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/mixins" as kit-mixins;
+@use "./main.scss";
+
+.gd-semantic-search {
+    &__overlay {
+        width: 440px;
+        background: kit-variables.$gd-color-white;
+        margin: 10px 0;
+    }
+
+    &__overlay-input {
+        margin: 0 10px;
+    }
+
+    &__overlay-error,
+    &__overlay-no-results {
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: kit-variables.$gd-color-state-blank;
+    }
+}
+
+.gd-header-search {
+    height: 100%;
+    margin: 0;
+    line-height: 42px;
+    opacity: 0.8;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 0 13px 2px;
+
+    @include kit-mixins.text-overflow;
+
+    &:hover,
+    &.is-open {
+        opacity: 1;
+    }
+
+    &.is-open {
+        background-color: rgba(255, 255, 255, 0.3);
+    }
+}
+
+.gd-header-search {
+    position: relative;
+    box-sizing: border-box;
+    padding-right: 34px;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
+
+    &::after {
+        content: "\e612";
+        position: absolute;
+        top: 0;
+        right: 11px;
+        margin-left: 11px;
+        width: 12px;
+        opacity: 0.5;
+        text-align: center;
+        font-family: kit-variables.$gd-font-indigo;
+        font-size: 18px;
+        font-weight: 700;
+    }
+
+    &.is-open::after {
+        content: "\e613";
+    }
+}
+
+.gd-icon-header-search {
+    vertical-align: middle;
+    opacity: 0.8;
+    margin-right: 6px;
+
+    &::before {
+        content: "\e62b";
+    }
+}
+
+.gd-header-search-dropdown {
+    overflow: hidden;
+
+    .gd-list {
+        min-width: 210px;
+
+        .gd-list-item {
+            font-family: kit-variables.$gd-font-primary;
+            font-weight: 400;
+        }
+    }
+}