@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.
- package/esm/ResultsItem.d.ts +2 -32
- package/esm/ResultsItem.d.ts.map +1 -1
- package/esm/ResultsItem.js +13 -44
- package/esm/ResultsItem.js.map +1 -1
- package/esm/SearchResultsDropdownList.d.ts +2 -1
- package/esm/SearchResultsDropdownList.d.ts.map +1 -1
- package/esm/SearchResultsDropdownList.js +6 -6
- package/esm/SearchResultsDropdownList.js.map +1 -1
- package/esm/SemanticSearch.d.ts.map +1 -1
- package/esm/SemanticSearch.js +32 -13
- package/esm/SemanticSearch.js.map +1 -1
- package/esm/hooks/useListSelector.d.ts +1 -1
- package/esm/hooks/useListSelector.d.ts.map +1 -1
- package/esm/hooks/useListSelector.js +11 -10
- package/esm/hooks/useListSelector.js.map +1 -1
- package/esm/hooks/useSemanticSearch.d.ts +2 -1
- package/esm/hooks/useSemanticSearch.d.ts.map +1 -1
- package/esm/hooks/useSemanticSearch.js +4 -2
- package/esm/hooks/useSemanticSearch.js.map +1 -1
- package/esm/internal/AnnotatedResultsItem.d.ts +5 -0
- package/esm/internal/AnnotatedResultsItem.d.ts.map +1 -0
- package/esm/internal/AnnotatedResultsItem.js +30 -0
- package/esm/internal/AnnotatedResultsItem.js.map +1 -0
- package/esm/internal/HeaderSearchButton.d.ts +17 -0
- package/esm/internal/HeaderSearchButton.d.ts.map +1 -0
- package/esm/internal/HeaderSearchButton.js +39 -0
- package/esm/internal/HeaderSearchButton.js.map +1 -0
- package/esm/internal/HistoryItem.d.ts +8 -0
- package/esm/internal/HistoryItem.d.ts.map +1 -0
- package/esm/internal/HistoryItem.js +21 -0
- package/esm/internal/HistoryItem.js.map +1 -0
- package/esm/internal/SearchList.d.ts +30 -0
- package/esm/internal/SearchList.d.ts.map +1 -0
- package/esm/internal/SearchList.js +16 -0
- package/esm/internal/SearchList.js.map +1 -0
- package/esm/internal/{SemanticSearchOverlay.d.ts → SearchOverlay.d.ts} +6 -5
- package/esm/internal/SearchOverlay.d.ts.map +1 -0
- package/esm/internal/SearchOverlay.js +124 -0
- package/esm/internal/SearchOverlay.js.map +1 -0
- package/esm/internal/UpdateDate.d.ts +10 -0
- package/esm/internal/UpdateDate.d.ts.map +1 -0
- package/esm/internal/UpdateDate.js +29 -0
- package/esm/internal/UpdateDate.js.map +1 -0
- package/esm/internal.d.ts +1 -1
- package/esm/internal.d.ts.map +1 -1
- package/esm/internal.js +1 -1
- package/esm/internal.js.map +1 -1
- package/esm/sdk-ui-semantic-search.d.ts +3 -1
- package/esm/types.d.ts +33 -0
- package/esm/types.d.ts.map +1 -0
- package/esm/types.js +3 -0
- package/esm/types.js.map +1 -0
- package/esm/utils/getUIPath.d.ts +14 -0
- package/esm/utils/getUIPath.d.ts.map +1 -0
- package/esm/utils/getUIPath.js +37 -0
- package/esm/utils/getUIPath.js.map +1 -0
- package/esm/utils/renderDetails.d.ts +8 -0
- package/esm/utils/renderDetails.d.ts.map +1 -0
- package/esm/utils/renderDetails.js +52 -0
- package/esm/utils/renderDetails.js.map +1 -0
- package/esm/utils/renderItemIcon.d.ts +9 -0
- package/esm/utils/renderItemIcon.d.ts.map +1 -0
- package/esm/utils/renderItemIcon.js +32 -0
- package/esm/utils/renderItemIcon.js.map +1 -0
- package/package.json +7 -6
- package/styles/css/internal.css +159 -9
- package/styles/css/internal.css.map +1 -1
- package/styles/css/main.css +84 -7
- package/styles/css/main.css.map +1 -1
- package/styles/scss/internal.scss +85 -3
- package/styles/scss/main.scss +99 -16
- package/esm/internal/SearchResultsList.d.ts +0 -26
- package/esm/internal/SearchResultsList.d.ts.map +0 -1
- package/esm/internal/SearchResultsList.js +0 -18
- package/esm/internal/SearchResultsList.js.map +0 -1
- package/esm/internal/SemanticSearchOverlay.d.ts.map +0 -1
- package/esm/internal/SemanticSearchOverlay.js +0 -60
- package/esm/internal/SemanticSearchOverlay.js.map +0 -1
package/styles/css/internal.css
CHANGED
|
@@ -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:
|
|
11
|
+
height: 50px;
|
|
12
|
+
text-decoration: none;
|
|
9
13
|
}
|
|
10
|
-
.gd-semantic-search__results-item
|
|
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:
|
|
16
|
-
height:
|
|
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:
|
|
22
|
-
height:
|
|
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-
|
|
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:
|
|
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":"
|
|
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"}
|
package/styles/css/main.css
CHANGED
|
@@ -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:
|
|
9
|
+
height: 50px;
|
|
10
|
+
text-decoration: none;
|
|
9
11
|
}
|
|
10
|
-
.gd-semantic-search__results-item
|
|
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:
|
|
16
|
-
height:
|
|
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:
|
|
22
|
-
height:
|
|
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
|
|
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 */
|
package/styles/css/main.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"
|
|
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:
|
|
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
|
}
|
package/styles/scss/main.scss
CHANGED
|
@@ -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:
|
|
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
|
-
&--
|
|
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
|
-
|
|
26
|
-
width: $icon_size;
|
|
27
|
-
height: $icon_size;
|
|
28
|
-
display: flex;
|
|
29
|
-
align-items: center;
|
|
51
|
+
@include icon(32px);
|
|
30
52
|
|
|
31
|
-
|
|
32
|
-
|
|
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
|
-
|
|
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
|
-
&
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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"}
|