@gooddata/sdk-ui-semantic-search 11.14.0-alpha.0 → 11.14.0-alpha.1

package/styles/scss/internal.scss

@@ -6,19 +6,58 @@
 @use "@gooddata/sdk-ui-kit/styles/scss/mixins" as kit-mixins;
 @use "./main.scss" as main;
 
-// Context-dependent styles that cannot be expressed in CSS modules
-// These styles apply when semantic search is used within specific containers
+.gd-semantic-search {
+    &__overlay {
+        background: kit-variables.$gd-color-white;
+        margin: 10px 0;
 
-// Desktop header dropdown context
-.gd-header-search-dropdown {
-    .gd-semantic-search__overlay {
-        width: 440px;
+        // Desktop view
+        .gd-header-search-dropdown & {
+            width: 440px;
+        }
+
+        // Mobile view
+        .gd-header-menu-search & {
+            .gd-semantic-search__overlay-input {
+                margin-bottom: 10px;
+            }
+        }
+    }
+
+    &__overlay-input {
+        margin: 0 10px;
+
+        input:focus-visible {
+            outline: 1px auto kit-variables.$gd-input-text-border-outline;
+            outline-offset: 0;
+        }
+    }
+
+    &__ai_assistant_button {
+        button.gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--hasIconBefore {
+            padding-left: 7px;
+        }
+
+        button:focus-visible {
+            outline: 1px auto kit-variables.$gd-input-text-border-outline;
+            outline-offset: 0;
+        }
+    }
+
+    &__overlay-error,
+    &__overlay-no-results {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: kit-variables.$gd-color-state-blank;
+    }
+
+    &__overlay-error {
+        padding: 10px 10px 0;
     }
-}
 
-// Mobile header menu context
-.gd-header-menu-search {
-    .gd-semantic-search__overlay-input {
-        margin-bottom: 10px;
+    &__overlay-no-results {
+        height: 100px;
+        padding: 0 10px;
     }
 }

package/styles/scss/main.scss

@@ -4,11 +4,221 @@
 @use "@gooddata/sdk-ui-kit/src/@ui/defaultTheme.scss";
 @use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
 
-// All component styles have been migrated to CSS modules
-// This file is kept for backward compatibility
-// Legacy consumers still import styles/css/main.css which needs defaultTheme
+@mixin icon($icon_size) {
+    width: $icon_size;
+    height: $icon_size;
+
+    svg {
+        // dashboard icon needs explicit size
+        width: $icon_size;
+        height: $icon_size;
+    }
+}
+
+.gd-semantic-search {
+    &__results-item {
+        $root: &;
+        cursor: pointer;
+        user-select: none;
+        width: 100%;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        &[data-level="1"] {
+            $item-height: 50px;
+            height: $item-height;
+
+            #{$root}__content {
+                height: calc($item-height - 2px);
+            }
+            #{$root}__icon {
+                @include icon(26px);
+            }
+        }
+
+        &[data-level="2"] {
+            $item-height: 30px;
+            height: $item-height;
+            padding-left: 10px;
+
+            #{$root}__content {
+                height: calc($item-height - 2px);
+            }
+            #{$root}__icon {
+                @include icon(16px);
+            }
+        }
+
+        &--active {
+            color: kit-variables.$is-focused-color;
+            background: kit-variables.$is-focused-background;
+        }
+
+        &__content {
+            box-sizing: border-box;
+            width: 100%;
+            margin: 1px 0;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 1em;
+            padding: 5px 12px;
+            text-decoration: none;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:visited {
+                text-decoration: none;
+            }
+
+            &:focus-visible {
+                outline: revert;
+            }
+        }
+
+        &__text {
+            flex: 1;
+            min-width: 0; // A hack to make ellipsis work in flexbox
+            display: flex;
+            flex-direction: column;
+            font-weight: 400;
+            color: kit-variables.$gd-color-text;
+            font-size: 14px;
+            line-height: 20px;
+
+            &__row {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: 5px;
+            }
+
+            &__row:not(:first-child) {
+                color: kit-variables.$gd-color-state-blank;
+            }
+
+            &__ellipsis {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex-shrink: 1;
+            }
+        }
+
+        &__details-container {
+            display: grid;
+            justify-items: end;
+            height: 100%;
+            font-size: 14px;
+            color: kit-variables.$gd-color-state-blank;
+        }
+
+        &__details {
+            width: 16px;
+            height: 16px;
+            align-self: center;
+            align-items: center;
+
+            & .gd-ellipsis-text {
+                margin: 10px 0 0;
+            }
+        }
+
+        &__details__contents {
+            width: 190px;
+            padding: 5px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+
+            h3 {
+                font-size: 14px;
+                margin: 0;
+            }
+
+            .gd-ellipsis-text-content {
+                font-size: 12px;
+            }
+
+            h4 {
+                margin: 10px 0 0;
+                text-transform: uppercase;
+                font-size: 10px;
+                font-weight: 400;
+                color: kit-variables.$gd-color-state-blank;
+            }
+
+            hr {
+                margin: 10px 0;
+                border: 0;
+                border-top: 1px solid kit-variables.$gd-border-color;
+            }
+
+            &__match h4 {
+                text-transform: none;
+                font-size: 12px;
+            }
+        }
+
+        &__counter {
+            display: flex;
+            align-self: end;
+            align-items: center;
+            gap: 5px;
+            line-height: 16px;
+        }
+
+        &__counter__icon {
+            width: 16px;
+            height: 16px;
+            transition: rotate 0.2s;
+            transform-origin: center;
+            rotate: 0deg;
+
+            &--expanded {
+                rotate: 90deg;
+            }
+        }
+    }
+
+    &__bubble.bubble.bubble-light {
+        background: kit-variables.$gd-color-white;
+    }
+
+    &__bubble_trigger {
+        display: flex;
+    }
+
+    &__ai_assistant_button {
+        display: flex;
+        height: 50px;
+        align-items: center;
+        margin-bottom: -10px;
+        border: 1px solid kit-variables.$gd-color-white;
+        border-top-color: kit-variables.$gd-border-color;
+        background: kit-variables.$gd-color-white;
+        margin-top: 10px;
+
+        button {
+            height: 100%;
+            width: 100%;
+            justify-content: flex-start;
+        }
+    }
+
+    &__message {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: kit-variables.$gd-color-state-blank;
+        height: 100px;
+        padding: 0 10px;
+    }
+}
 
-// The only remaining style that hasn't been migrated, overrides a classname defined in sdk-ui-kit:
 .gd-ui-kit-treeview {
     margin: 10px 0;
 }

package/esm/FooterButtonAiAssistant.module.css

@@ -1,24 +0,0 @@
-.aiAssistantButton {
-  display: flex;
-  height: 50px;
-  align-items: center;
-  margin-bottom: -10px;
-  border: 1px solid var(--gd-palette-complementary-0, #fff);
-  border-top-color: var(--gd-palette-complementary-3, #dde4eb);
-  background: var(--gd-palette-complementary-0, #fff);
-  margin-top: 10px;
-}
-.aiAssistantButton button {
-  height: 100%;
-  width: 100%;
-  justify-content: flex-start;
-}
-.aiAssistantButton :global(button.gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--hasIconBefore) {
-  padding-left: 7px;
-}
-.aiAssistantButton button:focus-visible {
-  outline: 1px auto var(--gd-palette-primary-base, #14b2e2);
-  outline-offset: 0;
-}
-
-/*# sourceMappingURL=FooterButtonAiAssistant.module.css.map */

package/esm/FooterButtonAiAssistant.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/FooterButtonAiAssistant.module.scss","../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EACA;EACA;EACA,kBC4Bc;ED3Bd,YCKa;EDJb;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA","file":"FooterButtonAiAssistant.module.css"}

package/esm/GroupResultCounterStyles.module.css

@@ -1,21 +0,0 @@
-.counter {
-  display: flex;
-  align-self: end;
-  align-items: center;
-  gap: 5px;
-  line-height: 16px;
-}
-
-.counterIcon {
-  width: 16px;
-  height: 16px;
-  transition: rotate 0.2s;
-  transform-origin: center;
-  rotate: 0deg;
-}
-
-.counterIconExpanded {
-  rotate: 90deg;
-}
-
-/*# sourceMappingURL=GroupResultCounterStyles.module.css.map */

package/esm/GroupResultCounterStyles.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/GroupResultCounterStyles.module.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;;;AAIJ;EACI","file":"GroupResultCounterStyles.module.css"}

package/esm/SearchItem.module.css

@@ -1,81 +0,0 @@
-.resultsItem {
-  cursor: pointer;
-  user-select: none;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.resultsItem[data-level="1"] {
-  height: 50px;
-}
-.resultsItem[data-level="1"] .content {
-  height: 48px;
-}
-.resultsItem[data-level="1"] .icon {
-  width: 26px;
-  height: 26px;
-}
-.resultsItem[data-level="1"] .icon svg {
-  width: 26px;
-  height: 26px;
-}
-.resultsItem[data-level="2"] {
-  height: 30px;
-  padding-left: 10px;
-}
-.resultsItem[data-level="2"] .content {
-  height: 28px;
-}
-.resultsItem[data-level="2"] .icon {
-  width: 16px;
-  height: 16px;
-}
-.resultsItem[data-level="2"] .icon svg {
-  width: 16px;
-  height: 16px;
-}
-
-.resultsItemActive {
-  color: var(--gd-palette-complementary-9, #000);
-  background: var(--gd-palette-complementary-2, #ebeff4);
-}
-
-.content {
-  box-sizing: border-box;
-  width: 100%;
-  margin: 1px 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 1em;
-  padding: 5px 12px;
-  text-decoration: none;
-}
-.content:hover, .content:focus, .content:active, .content:visited {
-  text-decoration: none;
-}
-.content:focus-visible {
-  outline: revert;
-}
-
-.text {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  font-weight: 400;
-  color: var(--gd-palette-complementary-8, #464e56);
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.detailsContainer {
-  display: grid;
-  justify-items: end;
-  height: 100%;
-  font-size: 14px;
-  color: var(--gd-palette-complementary-6, #94a1ad);
-}
-
-/*# sourceMappingURL=SearchItem.module.css.map */

package/esm/SearchItem.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/SearchItem.module.scss","../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAgBA;EACI;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAEI,QADc;;AAGd;EACI;;AAGJ;EA5BJ,OA6BsB;EA5BtB,QA4BsB;;AA1BtB;EAEI,OAwBkB;EAvBlB,QAuBkB;;AAItB;EAEI,QADc;EAEd;;AAEA;EACI;;AAGJ;EA1CJ,OA2CsB;EA1CtB,QA0CsB;;AAxCtB;EAEI,OAsCkB;EArClB,QAqCkB;;;AAM1B;EACI,OCnBY;EDoBZ,YCwDoB;;;ADpDxB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAII;;AAGJ;EACI;;;AAUR;EACI;EACA;EACA;EACA;EACA;EACA,OCjEY;EDkEZ;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA,OCnFmB","file":"SearchItem.module.css"}

package/esm/SearchItemDetailsStyles.module.css

@@ -1,41 +0,0 @@
-.details {
-  width: 16px;
-  height: 16px;
-  align-self: center;
-  align-items: center;
-}
-
-.detailsContents {
-  width: 190px;
-  padding: 5px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-}
-.detailsContents h3 {
-  font-size: 14px;
-  margin: 0;
-}
-.detailsContents h4 {
-  margin: 10px 0 0;
-  text-transform: uppercase;
-  font-size: 10px;
-  font-weight: 400;
-  color: var(--gd-palette-complementary-6, #94a1ad);
-}
-.detailsContents hr {
-  margin: 10px 0;
-  border: 0;
-  border-top: 1px solid var(--gd-palette-complementary-3, #dde4eb);
-}
-
-.detailsMatch h4 {
-  text-transform: none;
-  font-size: 12px;
-}
-
-.bubbleTrigger {
-  display: flex;
-}
-
-/*# sourceMappingURL=SearchItemDetailsStyles.module.css.map */

package/esm/SearchItemDetailsStyles.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/SearchItemDetailsStyles.module.scss","../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAKJ;EACI;EACA;EACA;EACA;EACA,OCTe;;ADYnB;EACI;EACA;EACA;;;AAKR;EACI;EACA;;;AAOJ;EACI","file":"SearchItemDetailsStyles.module.css"}

package/esm/SearchItemText.module.css

@@ -1,18 +0,0 @@
-.textRow {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-}
-.textRow:not(:first-child) {
-  color: var(--gd-palette-complementary-6, #94a1ad);
-}
-
-.textEllipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 1;
-}
-
-/*# sourceMappingURL=SearchItemText.module.css.map */

package/esm/SearchItemText.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/SearchItemText.module.scss","../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAMA;EACI;EACA;EACA;EACA;;AAEA;EACI,OCUe;;;ADLvB;EACI;EACA;EACA;EACA","file":"SearchItemText.module.css"}

package/esm/SemanticSearch.module.css

@@ -1,18 +0,0 @@
-.semanticSearch {
-  display: block;
-}
-
-.input {
-  display: inline-block;
-}
-
-.message {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--gd-palette-complementary-6, #94a1ad);
-  height: 100px;
-  padding: 0 10px;
-}
-
-/*# sourceMappingURL=SemanticSearch.module.css.map */

package/esm/SemanticSearch.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/SemanticSearch.module.scss","../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAMA;EACI;;;AAKJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA,OCEmB;EDDnB;EACA","file":"SemanticSearch.module.css"}

package/esm/internal/SearchNoResults.module.css

@@ -1,10 +0,0 @@
-.overlayNoResults {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--gd-palette-complementary-6, #94a1ad);
-  height: 100px;
-  padding: 0 10px;
-}
-
-/*# sourceMappingURL=SearchNoResults.module.css.map */

package/esm/internal/SearchNoResults.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/internal/SearchNoResults.module.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EACA,OCcmB;EDbnB;EACA","file":"SearchNoResults.module.css"}

package/esm/internal/SearchOverlay.module.css

@@ -1,22 +0,0 @@
-.overlay {
-  background: var(--gd-palette-complementary-0, #fff);
-  margin: 10px 0;
-}
-
-.overlayInput {
-  margin: 0 10px;
-}
-.overlayInput input:focus-visible {
-  outline: 1px auto var(--gd-palette-primary-base, #14b2e2);
-  outline-offset: 0;
-}
-
-.overlayError {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--gd-palette-complementary-6, #94a1ad);
-  padding: 10px 10px 0;
-}
-
-/*# sourceMappingURL=SearchOverlay.module.css.map */

package/esm/internal/SearchOverlay.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/internal/SearchOverlay.module.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAKA;EACI,YCWa;EDVb;;;AAKJ;EACI;;AAEA;EACI;EACA;;;AAMR;EACI;EACA;EACA;EACA,OCJmB;EDKnB","file":"SearchOverlay.module.css"}