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

package/styles/css/internal.css.map

@@ -1 +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"}
+{"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;AC1JI;EAGI;EACA;EACA;EACA;EACA;EACA;EACA,QARc;EASd;;AAEA;EACI;;AAGJ;EACI,OCTI;EDUJ,YC+DY;;AD5DhB;EA1CJ,OA2CsB;EA1CtB,QA0CsB;EAzCtB;EACA;;AAEA;EAEI,OAoCkB;EAnClB,QAmCkB;;AAEd;EA7CR,OA8C0B;EA7C1B,QA6C0B;EA5C1B;EACA;;AAEA;EAEI,OAuCsB;EAtCtB,QAsCsB;;AAItB;EACI;EACA;EACA,OC9BI;ED+BJ;;AAEA;EA3CR;EACA,aA2C8B;EA1C9B;EACA;EACA;;AA2CQ;EACI;EACA;;AAGJ;EApDR;EACA,aAoD8B;EAnD9B;EACA;EACA;;AAoDQ;EAxDR;EACA,aAwD8B;EAvD9B;EACA;EACA;EAsDY,OCvDO;;AD2Df;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA,OCzFG;;AD+FX;EACI;;AAGJ;EACI;;;AAMhB;EACI,YCjHa;;;ACRb;EACI;EACA,YDMS;ECLT;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA,ODDe;;ACInB;EACI;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EHwEA;EACA;EACA,eAHwB;;AGnExB;EAEI;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aDkBS;ECjBT;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;;AAEA;EACI;;AAEA;EACI,aDVM;ECWN","file":"internal.css"}

package/styles/css/main.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .gd-semantic-search__results-item {
   display: flex;
   flex-direction: row;
@@ -5,7 +6,10 @@
   cursor: pointer;
   gap: 1em;
   padding: 0 1em;
-  height: 45px;
+  height: 50px;
+  text-decoration: none;
+}
+.gd-semantic-search__results-item:hover {
   text-decoration: none;
 }
 .gd-semantic-search__results-item--active {
@@ -13,32 +17,65 @@
   background: var(--gd-palette-complementary-2, #ebeff4);
 }
 .gd-semantic-search__results-item__icon {
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
 }
 .gd-semantic-search__results-item__icon > svg {
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
+}
+.gd-semantic-search__results-item__icon--history {
+  width: 17px;
+  height: 17px;
+  display: flex;
+  align-items: center;
+}
+.gd-semantic-search__results-item__icon--history > svg {
+  width: 17px;
+  height: 17px;
 }
 .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;
+}
+.gd-semantic-search__results-item__text--history {
+  min-width: 0;
+  line-height: 1.4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gd-semantic-search__results-item__text--result {
+  display: flex;
+  flex-direction: column;
+}
+.gd-semantic-search__results-item__text__1 {
+  min-width: 0;
+  line-height: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.gd-semantic-search__results-item__text__2 {
+  min-width: 0;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--gd-palette-complementary-6, #94a1ad);
+}
 .gd-semantic-search__results-item__details {
-  display: none;
   width: 16px;
   height: 16px;
   align-items: center;
 }
+.gd-semantic-search__results-item__details .gd-ellipsis-text {
+  margin: 10px 0 0;
+}
 .gd-semantic-search__results-item__details__contents {
   width: 190px;
   padding: 5px;
@@ -46,25 +83,25 @@
   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;
+  margin: 0;
 }
 .gd-semantic-search__results-item__details__contents .gd-ellipsis-text-content {
   font-size: 12px;
 }
 .gd-semantic-search__results-item__details__contents h4 {
-  margin: 0;
+  margin: 10px 0 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__results-item__annotation:after {
+  content: " • ";
+}
+.gd-semantic-search__results-item__annotation:last-child:after {
+  content: "";
 }
 
 .gd-semantic-search__bubble.bubble.bubble-light {

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;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"}
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":";AA4BI;EAGI;EACA;EACA;EACA;EACA;EACA;EACA,QARc;EASd;;AAEA;EACI;;AAGJ;EACI,OCTI;EDUJ,YC+DY;;AD5DhB;EA1CJ,OA2CsB;EA1CtB,QA0CsB;EAzCtB;EACA;;AAEA;EAEI,OAoCkB;EAnClB,QAmCkB;;AAEd;EA7CR,OA8C0B;EA7C1B,QA6C0B;EA5C1B;EACA;;AAEA;EAEI,OAuCsB;EAtCtB,QAsCsB;;AAItB;EACI;EACA;EACA,OC9BI;ED+BJ;;AAEA;EA3CR;EACA,aA2C8B;EA1C9B;EACA;EACA;;AA2CQ;EACI;EACA;;AAGJ;EApDR;EACA,aAoD8B;EAnD9B;EACA;EACA;;AAoDQ;EAxDR;EACA,aAwD8B;EAvD9B;EACA;EACA;EAsDY,OCvDO;;AD2Df;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA,OCzFG;;AD+FX;EACI;;AAGJ;EACI;;;AAMhB;EACI,YCjHa","file":"main.css"}

package/styles/scss/internal.scss

@@ -19,12 +19,19 @@
 
     &__overlay-error,
     &__overlay-no-results {
-        height: 100px;
         display: flex;
         justify-content: center;
         align-items: center;
         color: kit-variables.$gd-color-state-blank;
     }
+
+    &__overlay-error {
+        padding: 10px 10px 0;
+    }
+
+    &__overlay-no-results {
+        height: 100px;
+    }
 }
 
 .gd-header-search {

package/styles/scss/main.scss

@@ -4,9 +4,30 @@
 @use "sass:meta";
 @use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
 
+@mixin icon($icon_size) {
+    width: $icon_size;
+    height: $icon_size;
+    display: flex;
+    align-items: center;
+
+    > svg {
+        // dashboard icon needs explicit size
+        width: $icon_size;
+        height: $icon_size;
+    }
+}
+
+@mixin ellipsis($line-height) {
+    min-width: 0; // A hack to make ellipsis work in flexbox
+    line-height: $line-height;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .gd-semantic-search {
     &__results-item {
-        $line-height: 45px;
+        $line-height: 50px;
 
         display: flex;
         flex-direction: row;
@@ -17,43 +38,57 @@
         height: $line-height;
         text-decoration: none;
 
+        &:hover {
+            text-decoration: none;
+        }
+
         &--active {
             color: kit-variables.$is-focused-color;
             background: kit-variables.$is-focused-background;
         }
 
         &__icon {
-            $icon_size: 16px;
-            width: $icon_size;
-            height: $icon_size;
-            display: flex;
-            align-items: center;
+            @include icon(32px);
 
-            > svg {
-                // dashboard icon needs explicit size
-                width: $icon_size;
-                height: $icon_size;
+            &--history {
+                @include icon(17px);
             }
         }
 
         &__text {
             flex-grow: 1;
-            min-width: 0; // A hack to make ellipsis work in flexbox
             font-weight: 400;
-            line-height: 1.4rem;
             color: kit-variables.$gd-color-text;
             font-size: 14px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+
+            &--history {
+                @include ellipsis(1.4rem);
+            }
+
+            &--result {
+                display: flex;
+                flex-direction: column;
+            }
+
+            &__1 {
+                @include ellipsis(20px);
+            }
+
+            &__2 {
+                @include ellipsis(20px);
+                color: kit-variables.$gd-color-state-blank;
+            }
         }
 
         &__details {
-            display: none;
             width: 16px;
             height: 16px;
             align-items: center;
 
+            & .gd-ellipsis-text {
+                margin: 10px 0 0;
+            }
+
             &__contents {
                 width: 190px;
                 padding: 5px;
@@ -61,13 +96,9 @@
                 display: flex;
                 flex-direction: column;
 
-                & > * {
-                    margin-bottom: 15px;
-                }
-
                 h3 {
                     font-size: 14px;
-                    margin: 0 0 10px;
+                    margin: 0;
                 }
 
                 .gd-ellipsis-text-content {
@@ -75,7 +106,7 @@
                 }
 
                 h4 {
-                    margin: 0;
+                    margin: 10px 0 0;
                     text-transform: uppercase;
                     font-size: 10px;
                     font-weight: 400;
@@ -84,8 +115,14 @@
             }
         }
 
-        &--active &__details {
-            display: unset;
+        &__annotation {
+            &:after {
+                content: "\0000a0•\0000a0";
+            }
+
+            &:last-child:after {
+                content: "";
+            }
         }
     }
 }

package/esm/internal/SearchResultsList.d.ts

@@ -1,26 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,16 +0,0 @@
-// (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

@@ -1 +0,0 @@
-{"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"}