@gooddata/sdk-ui-semantic-search 10.8.0-alpha.3 → 10.8.0-alpha.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/esm/ResultsItem.d.ts +2 -32
  2. package/esm/ResultsItem.d.ts.map +1 -1
  3. package/esm/ResultsItem.js +13 -44
  4. package/esm/ResultsItem.js.map +1 -1
  5. package/esm/SearchResultsDropdownList.d.ts +2 -1
  6. package/esm/SearchResultsDropdownList.d.ts.map +1 -1
  7. package/esm/SearchResultsDropdownList.js +6 -6
  8. package/esm/SearchResultsDropdownList.js.map +1 -1
  9. package/esm/SemanticSearch.d.ts.map +1 -1
  10. package/esm/SemanticSearch.js +32 -13
  11. package/esm/SemanticSearch.js.map +1 -1
  12. package/esm/hooks/useListSelector.d.ts +1 -1
  13. package/esm/hooks/useListSelector.d.ts.map +1 -1
  14. package/esm/hooks/useListSelector.js +11 -10
  15. package/esm/hooks/useListSelector.js.map +1 -1
  16. package/esm/hooks/useSemanticSearch.d.ts +2 -1
  17. package/esm/hooks/useSemanticSearch.d.ts.map +1 -1
  18. package/esm/hooks/useSemanticSearch.js +4 -2
  19. package/esm/hooks/useSemanticSearch.js.map +1 -1
  20. package/esm/internal/AnnotatedResultsItem.d.ts +5 -0
  21. package/esm/internal/AnnotatedResultsItem.d.ts.map +1 -0
  22. package/esm/internal/AnnotatedResultsItem.js +30 -0
  23. package/esm/internal/AnnotatedResultsItem.js.map +1 -0
  24. package/esm/internal/HeaderSearchButton.d.ts +17 -0
  25. package/esm/internal/HeaderSearchButton.d.ts.map +1 -0
  26. package/esm/internal/HeaderSearchButton.js +39 -0
  27. package/esm/internal/HeaderSearchButton.js.map +1 -0
  28. package/esm/internal/HistoryItem.d.ts +8 -0
  29. package/esm/internal/HistoryItem.d.ts.map +1 -0
  30. package/esm/internal/HistoryItem.js +21 -0
  31. package/esm/internal/HistoryItem.js.map +1 -0
  32. package/esm/internal/SearchList.d.ts +30 -0
  33. package/esm/internal/SearchList.d.ts.map +1 -0
  34. package/esm/internal/SearchList.js +16 -0
  35. package/esm/internal/SearchList.js.map +1 -0
  36. package/esm/internal/{SemanticSearchOverlay.d.ts → SearchOverlay.d.ts} +6 -5
  37. package/esm/internal/SearchOverlay.d.ts.map +1 -0
  38. package/esm/internal/SearchOverlay.js +124 -0
  39. package/esm/internal/SearchOverlay.js.map +1 -0
  40. package/esm/internal/UpdateDate.d.ts +10 -0
  41. package/esm/internal/UpdateDate.d.ts.map +1 -0
  42. package/esm/internal/UpdateDate.js +29 -0
  43. package/esm/internal/UpdateDate.js.map +1 -0
  44. package/esm/internal.d.ts +1 -1
  45. package/esm/internal.d.ts.map +1 -1
  46. package/esm/internal.js +1 -1
  47. package/esm/internal.js.map +1 -1
  48. package/esm/sdk-ui-semantic-search.d.ts +3 -1
  49. package/esm/types.d.ts +33 -0
  50. package/esm/types.d.ts.map +1 -0
  51. package/esm/types.js +3 -0
  52. package/esm/types.js.map +1 -0
  53. package/esm/utils/getUIPath.d.ts +14 -0
  54. package/esm/utils/getUIPath.d.ts.map +1 -0
  55. package/esm/utils/getUIPath.js +37 -0
  56. package/esm/utils/getUIPath.js.map +1 -0
  57. package/esm/utils/renderDetails.d.ts +8 -0
  58. package/esm/utils/renderDetails.d.ts.map +1 -0
  59. package/esm/utils/renderDetails.js +52 -0
  60. package/esm/utils/renderDetails.js.map +1 -0
  61. package/esm/utils/renderItemIcon.d.ts +9 -0
  62. package/esm/utils/renderItemIcon.d.ts.map +1 -0
  63. package/esm/utils/renderItemIcon.js +32 -0
  64. package/esm/utils/renderItemIcon.js.map +1 -0
  65. package/package.json +7 -6
  66. package/styles/css/internal.css +159 -9
  67. package/styles/css/internal.css.map +1 -1
  68. package/styles/css/main.css +84 -7
  69. package/styles/css/main.css.map +1 -1
  70. package/styles/scss/internal.scss +85 -3
  71. package/styles/scss/main.scss +99 -16
  72. package/esm/internal/SearchResultsList.d.ts +0 -26
  73. package/esm/internal/SearchResultsList.d.ts.map +0 -1
  74. package/esm/internal/SearchResultsList.js +0 -18
  75. package/esm/internal/SearchResultsList.js.map +0 -1
  76. package/esm/internal/SemanticSearchOverlay.d.ts.map +0 -1
  77. package/esm/internal/SemanticSearchOverlay.js +0 -60
  78. package/esm/internal/SemanticSearchOverlay.js.map +0 -1
@@ -1,3 +1,6 @@
1
+ @charset "UTF-8";
2
+ /* allow vendor prefixes and disable max length */
3
+ /* allow vendor prefixes and disable max length */
1
4
  .gd-semantic-search__results-item {
2
5
  display: flex;
3
6
  flex-direction: row;
@@ -5,46 +8,193 @@
5
8
  cursor: pointer;
6
9
  gap: 1em;
7
10
  padding: 0 1em;
8
- height: 45px;
11
+ height: 50px;
12
+ text-decoration: none;
9
13
  }
10
- .gd-semantic-search__results-item--selected {
14
+ .gd-semantic-search__results-item:hover {
15
+ text-decoration: none;
16
+ }
17
+ .gd-semantic-search__results-item--active {
11
18
  color: var(--gd-palette-complementary-9, #000);
12
19
  background: var(--gd-palette-complementary-2, #ebeff4);
13
20
  }
14
21
  .gd-semantic-search__results-item__icon {
15
- width: 16px;
16
- height: 16px;
22
+ width: 32px;
23
+ height: 32px;
17
24
  display: flex;
18
25
  align-items: center;
19
26
  }
20
27
  .gd-semantic-search__results-item__icon > svg {
21
- width: 16px;
22
- height: 16px;
28
+ width: 32px;
29
+ height: 32px;
30
+ }
31
+ .gd-semantic-search__results-item__icon--history {
32
+ width: 17px;
33
+ height: 17px;
34
+ display: flex;
35
+ align-items: center;
36
+ }
37
+ .gd-semantic-search__results-item__icon--history > svg {
38
+ width: 17px;
39
+ height: 17px;
23
40
  }
24
41
  .gd-semantic-search__results-item__text {
25
42
  flex-grow: 1;
43
+ font-weight: 400;
44
+ color: var(--gd-palette-complementary-8, #464e56);
45
+ font-size: 14px;
46
+ }
47
+ .gd-semantic-search__results-item__text--history {
26
48
  min-width: 0;
49
+ line-height: 1.4rem;
50
+ overflow: hidden;
51
+ text-overflow: ellipsis;
52
+ white-space: nowrap;
53
+ }
54
+ .gd-semantic-search__results-item__text--result {
55
+ display: flex;
56
+ flex-direction: column;
27
57
  }
28
- .gd-semantic-search__results-item__text > p {
58
+ .gd-semantic-search__results-item__text__1 {
59
+ min-width: 0;
60
+ line-height: 20px;
29
61
  overflow: hidden;
30
62
  text-overflow: ellipsis;
31
63
  white-space: nowrap;
32
64
  }
65
+ .gd-semantic-search__results-item__text__2 {
66
+ min-width: 0;
67
+ line-height: 20px;
68
+ overflow: hidden;
69
+ text-overflow: ellipsis;
70
+ white-space: nowrap;
71
+ color: var(--gd-palette-complementary-6, #94a1ad);
72
+ }
73
+ .gd-semantic-search__results-item__details {
74
+ width: 16px;
75
+ height: 16px;
76
+ align-items: center;
77
+ }
78
+ .gd-semantic-search__results-item__details .gd-ellipsis-text {
79
+ margin: 10px 0 0;
80
+ }
81
+ .gd-semantic-search__results-item__details__contents {
82
+ width: 190px;
83
+ padding: 5px;
84
+ box-sizing: border-box;
85
+ display: flex;
86
+ flex-direction: column;
87
+ }
88
+ .gd-semantic-search__results-item__details__contents h3 {
89
+ font-size: 14px;
90
+ margin: 0;
91
+ }
92
+ .gd-semantic-search__results-item__details__contents .gd-ellipsis-text-content {
93
+ font-size: 12px;
94
+ }
95
+ .gd-semantic-search__results-item__details__contents h4 {
96
+ margin: 10px 0 0;
97
+ text-transform: uppercase;
98
+ font-size: 10px;
99
+ font-weight: 400;
100
+ color: var(--gd-palette-complementary-6, #94a1ad);
101
+ }
102
+ .gd-semantic-search__results-item__annotation:after {
103
+ content: " • ";
104
+ }
105
+ .gd-semantic-search__results-item__annotation:last-child:after {
106
+ content: "";
107
+ }
108
+
109
+ .gd-semantic-search__bubble.bubble.bubble-light {
110
+ background: var(--gd-palette-complementary-0, #fff);
111
+ }
33
112
 
34
113
  .gd-semantic-search__overlay {
35
114
  width: 440px;
36
- background: white;
115
+ background: var(--gd-palette-complementary-0, #fff);
37
116
  margin: 10px 0;
38
117
  }
39
118
  .gd-semantic-search__overlay-input {
40
119
  margin: 0 10px;
41
120
  }
42
121
  .gd-semantic-search__overlay-error, .gd-semantic-search__overlay-no-results {
43
- height: 100px;
44
122
  display: flex;
45
123
  justify-content: center;
46
124
  align-items: center;
47
125
  color: var(--gd-palette-complementary-6, #94a1ad);
48
126
  }
127
+ .gd-semantic-search__overlay-error {
128
+ padding: 10px 10px 0;
129
+ }
130
+ .gd-semantic-search__overlay-no-results {
131
+ height: 100px;
132
+ }
133
+
134
+ .gd-header-search {
135
+ height: 100%;
136
+ margin: 0;
137
+ line-height: 42px;
138
+ opacity: 0.8;
139
+ cursor: pointer;
140
+ transition: all 0.2s;
141
+ font-size: 14px;
142
+ font-weight: 400;
143
+ padding: 0 13px 2px;
144
+ overflow: hidden;
145
+ white-space: nowrap;
146
+ text-overflow: ellipsis;
147
+ }
148
+ .gd-header-search:hover, .gd-header-search.is-open {
149
+ opacity: 1;
150
+ }
151
+ .gd-header-search.is-open {
152
+ background-color: rgba(255, 255, 255, 0.3);
153
+ }
154
+
155
+ .gd-header-search {
156
+ position: relative;
157
+ box-sizing: border-box;
158
+ padding-right: 34px;
159
+ }
160
+ .gd-header-search:hover {
161
+ background: rgba(255, 255, 255, 0.3);
162
+ }
163
+ .gd-header-search::after {
164
+ content: "\e612";
165
+ position: absolute;
166
+ top: 0;
167
+ right: 11px;
168
+ margin-left: 11px;
169
+ width: 12px;
170
+ opacity: 0.5;
171
+ text-align: center;
172
+ font-family: "Indigo", sans-serif;
173
+ font-size: 18px;
174
+ font-weight: 700;
175
+ }
176
+ .gd-header-search.is-open::after {
177
+ content: "\e613";
178
+ }
179
+
180
+ .gd-icon-header-search {
181
+ vertical-align: middle;
182
+ opacity: 0.8;
183
+ margin-right: 6px;
184
+ }
185
+ .gd-icon-header-search::before {
186
+ content: "\e62b";
187
+ }
188
+
189
+ .gd-header-search-dropdown {
190
+ overflow: hidden;
191
+ }
192
+ .gd-header-search-dropdown .gd-list {
193
+ min-width: 210px;
194
+ }
195
+ .gd-header-search-dropdown .gd-list .gd-list-item {
196
+ font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
197
+ font-weight: 400;
198
+ }
49
199
 
50
200
  /*# sourceMappingURL=internal.css.map */
@@ -1 +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"}
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;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"}
@@ -1,3 +1,4 @@
1
+ @charset "UTF-8";
1
2
  .gd-semantic-search__results-item {
2
3
  display: flex;
3
4
  flex-direction: row;
@@ -5,30 +6,106 @@
5
6
  cursor: pointer;
6
7
  gap: 1em;
7
8
  padding: 0 1em;
8
- height: 45px;
9
+ height: 50px;
10
+ text-decoration: none;
9
11
  }
10
- .gd-semantic-search__results-item--selected {
12
+ .gd-semantic-search__results-item:hover {
13
+ text-decoration: none;
14
+ }
15
+ .gd-semantic-search__results-item--active {
11
16
  color: var(--gd-palette-complementary-9, #000);
12
17
  background: var(--gd-palette-complementary-2, #ebeff4);
13
18
  }
14
19
  .gd-semantic-search__results-item__icon {
15
- width: 16px;
16
- height: 16px;
20
+ width: 32px;
21
+ height: 32px;
17
22
  display: flex;
18
23
  align-items: center;
19
24
  }
20
25
  .gd-semantic-search__results-item__icon > svg {
21
- width: 16px;
22
- height: 16px;
26
+ width: 32px;
27
+ height: 32px;
28
+ }
29
+ .gd-semantic-search__results-item__icon--history {
30
+ width: 17px;
31
+ height: 17px;
32
+ display: flex;
33
+ align-items: center;
34
+ }
35
+ .gd-semantic-search__results-item__icon--history > svg {
36
+ width: 17px;
37
+ height: 17px;
23
38
  }
24
39
  .gd-semantic-search__results-item__text {
25
40
  flex-grow: 1;
41
+ font-weight: 400;
42
+ color: var(--gd-palette-complementary-8, #464e56);
43
+ font-size: 14px;
44
+ }
45
+ .gd-semantic-search__results-item__text--history {
26
46
  min-width: 0;
47
+ line-height: 1.4rem;
48
+ overflow: hidden;
49
+ text-overflow: ellipsis;
50
+ white-space: nowrap;
27
51
  }
28
- .gd-semantic-search__results-item__text > p {
52
+ .gd-semantic-search__results-item__text--result {
53
+ display: flex;
54
+ flex-direction: column;
55
+ }
56
+ .gd-semantic-search__results-item__text__1 {
57
+ min-width: 0;
58
+ line-height: 20px;
29
59
  overflow: hidden;
30
60
  text-overflow: ellipsis;
31
61
  white-space: nowrap;
32
62
  }
63
+ .gd-semantic-search__results-item__text__2 {
64
+ min-width: 0;
65
+ line-height: 20px;
66
+ overflow: hidden;
67
+ text-overflow: ellipsis;
68
+ white-space: nowrap;
69
+ color: var(--gd-palette-complementary-6, #94a1ad);
70
+ }
71
+ .gd-semantic-search__results-item__details {
72
+ width: 16px;
73
+ height: 16px;
74
+ align-items: center;
75
+ }
76
+ .gd-semantic-search__results-item__details .gd-ellipsis-text {
77
+ margin: 10px 0 0;
78
+ }
79
+ .gd-semantic-search__results-item__details__contents {
80
+ width: 190px;
81
+ padding: 5px;
82
+ box-sizing: border-box;
83
+ display: flex;
84
+ flex-direction: column;
85
+ }
86
+ .gd-semantic-search__results-item__details__contents h3 {
87
+ font-size: 14px;
88
+ margin: 0;
89
+ }
90
+ .gd-semantic-search__results-item__details__contents .gd-ellipsis-text-content {
91
+ font-size: 12px;
92
+ }
93
+ .gd-semantic-search__results-item__details__contents h4 {
94
+ margin: 10px 0 0;
95
+ text-transform: uppercase;
96
+ font-size: 10px;
97
+ font-weight: 400;
98
+ color: var(--gd-palette-complementary-6, #94a1ad);
99
+ }
100
+ .gd-semantic-search__results-item__annotation:after {
101
+ content: " • ";
102
+ }
103
+ .gd-semantic-search__results-item__annotation:last-child:after {
104
+ content: "";
105
+ }
106
+
107
+ .gd-semantic-search__bubble.bubble.bubble-light {
108
+ background: var(--gd-palette-complementary-0, #fff);
109
+ }
33
110
 
34
111
  /*# sourceMappingURL=main.css.map */
@@ -1 +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"}
1
+ {"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"}
@@ -3,12 +3,13 @@
3
3
  @use "sass:color";
4
4
  @use "sass:meta";
5
5
  @use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
6
+ @use "@gooddata/sdk-ui-kit/styles/scss/mixins" as kit-mixins;
6
7
  @use "./main.scss";
7
8
 
8
9
  .gd-semantic-search {
9
10
  &__overlay {
10
11
  width: 440px;
11
- background: white;
12
+ background: kit-variables.$gd-color-white;
12
13
  margin: 10px 0;
13
14
  }
14
15
 
@@ -18,10 +19,91 @@
18
19
 
19
20
  &__overlay-error,
20
21
  &__overlay-no-results {
21
- height: 100px;
22
22
  display: flex;
23
23
  justify-content: center;
24
24
  align-items: center;
25
- color: var(--gd-palette-complementary-6, #94a1ad);
25
+ color: kit-variables.$gd-color-state-blank;
26
+ }
27
+
28
+ &__overlay-error {
29
+ padding: 10px 10px 0;
30
+ }
31
+
32
+ &__overlay-no-results {
33
+ height: 100px;
34
+ }
35
+ }
36
+
37
+ .gd-header-search {
38
+ height: 100%;
39
+ margin: 0;
40
+ line-height: 42px;
41
+ opacity: 0.8;
42
+ cursor: pointer;
43
+ transition: all 0.2s;
44
+ font-size: 14px;
45
+ font-weight: 400;
46
+ padding: 0 13px 2px;
47
+
48
+ @include kit-mixins.text-overflow;
49
+
50
+ &:hover,
51
+ &.is-open {
52
+ opacity: 1;
53
+ }
54
+
55
+ &.is-open {
56
+ background-color: rgba(255, 255, 255, 0.3);
57
+ }
58
+ }
59
+
60
+ .gd-header-search {
61
+ position: relative;
62
+ box-sizing: border-box;
63
+ padding-right: 34px;
64
+
65
+ &:hover {
66
+ background: rgba(255, 255, 255, 0.3);
67
+ }
68
+
69
+ &::after {
70
+ content: "\e612";
71
+ position: absolute;
72
+ top: 0;
73
+ right: 11px;
74
+ margin-left: 11px;
75
+ width: 12px;
76
+ opacity: 0.5;
77
+ text-align: center;
78
+ font-family: kit-variables.$gd-font-indigo;
79
+ font-size: 18px;
80
+ font-weight: 700;
81
+ }
82
+
83
+ &.is-open::after {
84
+ content: "\e613";
85
+ }
86
+ }
87
+
88
+ .gd-icon-header-search {
89
+ vertical-align: middle;
90
+ opacity: 0.8;
91
+ margin-right: 6px;
92
+
93
+ &::before {
94
+ content: "\e62b";
95
+ }
96
+ }
97
+
98
+ .gd-header-search-dropdown {
99
+ overflow: hidden;
100
+
101
+ .gd-list {
102
+ min-width: 210px;
103
+
104
+ .gd-list-item {
105
+ font-family: kit-variables.$gd-font-primary;
106
+ font-weight: 400;
107
+ }
26
108
  }
27
109
  }
@@ -4,9 +4,30 @@
4
4
  @use "sass:meta";
5
5
  @use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
6
6
 
7
+ @mixin icon($icon_size) {
8
+ width: $icon_size;
9
+ height: $icon_size;
10
+ display: flex;
11
+ align-items: center;
12
+
13
+ > svg {
14
+ // dashboard icon needs explicit size
15
+ width: $icon_size;
16
+ height: $icon_size;
17
+ }
18
+ }
19
+
20
+ @mixin ellipsis($line-height) {
21
+ min-width: 0; // A hack to make ellipsis work in flexbox
22
+ line-height: $line-height;
23
+ overflow: hidden;
24
+ text-overflow: ellipsis;
25
+ white-space: nowrap;
26
+ }
27
+
7
28
  .gd-semantic-search {
8
29
  &__results-item {
9
- $line-height: 45px;
30
+ $line-height: 50px;
10
31
 
11
32
  display: flex;
12
33
  flex-direction: row;
@@ -15,35 +36,97 @@
15
36
  gap: 1em;
16
37
  padding: 0 1em;
17
38
  height: $line-height;
39
+ text-decoration: none;
40
+
41
+ &:hover {
42
+ text-decoration: none;
43
+ }
18
44
 
19
- &--selected {
45
+ &--active {
20
46
  color: kit-variables.$is-focused-color;
21
47
  background: kit-variables.$is-focused-background;
22
48
  }
23
49
 
24
50
  &__icon {
25
- $icon_size: 16px;
26
- width: $icon_size;
27
- height: $icon_size;
28
- display: flex;
29
- align-items: center;
51
+ @include icon(32px);
30
52
 
31
- > svg {
32
- // dashboard icon needs explicit size
33
- width: $icon_size;
34
- height: $icon_size;
53
+ &--history {
54
+ @include icon(17px);
35
55
  }
36
56
  }
37
57
 
38
58
  &__text {
39
59
  flex-grow: 1;
40
- min-width: 0; // A hack to make ellipsis work in flexbox
60
+ font-weight: 400;
61
+ color: kit-variables.$gd-color-text;
62
+ font-size: 14px;
63
+
64
+ &--history {
65
+ @include ellipsis(1.4rem);
66
+ }
67
+
68
+ &--result {
69
+ display: flex;
70
+ flex-direction: column;
71
+ }
72
+
73
+ &__1 {
74
+ @include ellipsis(20px);
75
+ }
76
+
77
+ &__2 {
78
+ @include ellipsis(20px);
79
+ color: kit-variables.$gd-color-state-blank;
80
+ }
81
+ }
82
+
83
+ &__details {
84
+ width: 16px;
85
+ height: 16px;
86
+ align-items: center;
87
+
88
+ & .gd-ellipsis-text {
89
+ margin: 10px 0 0;
90
+ }
91
+
92
+ &__contents {
93
+ width: 190px;
94
+ padding: 5px;
95
+ box-sizing: border-box;
96
+ display: flex;
97
+ flex-direction: column;
98
+
99
+ h3 {
100
+ font-size: 14px;
101
+ margin: 0;
102
+ }
103
+
104
+ .gd-ellipsis-text-content {
105
+ font-size: 12px;
106
+ }
107
+
108
+ h4 {
109
+ margin: 10px 0 0;
110
+ text-transform: uppercase;
111
+ font-size: 10px;
112
+ font-weight: 400;
113
+ color: kit-variables.$gd-color-state-blank;
114
+ }
115
+ }
41
116
  }
42
117
 
43
- &__text > p {
44
- overflow: hidden;
45
- text-overflow: ellipsis;
46
- white-space: nowrap;
118
+ &__annotation {
119
+ &:after {
120
+ content: "\0000a0•\0000a0";
121
+ }
122
+
123
+ &:last-child:after {
124
+ content: "";
125
+ }
47
126
  }
48
127
  }
49
128
  }
129
+
130
+ .gd-semantic-search__bubble.bubble.bubble-light {
131
+ background: kit-variables.$gd-color-white;
132
+ }
@@ -1,26 +0,0 @@
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
@@ -1 +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,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"}
@@ -1,18 +0,0 @@
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
@@ -1 +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,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"}
@@ -1 +0,0 @@
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"}