@sb1/ffe-searchable-dropdown-react 100.6.0 → 100.7.0
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/css/searchable-dropdown.css +25 -44
- package/package.json +8 -8
|
@@ -6,20 +6,19 @@
|
|
|
6
6
|
--selected-icon-color: var(--ffe-color-fill-primary-selected-default);
|
|
7
7
|
--text-color: var(--ffe-color-foreground-default);
|
|
8
8
|
min-height: 2.8125rem;
|
|
9
|
-
min-width: -webkit-fit-content;
|
|
10
|
-
min-width: -moz-fit-content;
|
|
11
9
|
min-width: fit-content;
|
|
10
|
+
display: -ms-grid;
|
|
12
11
|
display: grid;
|
|
13
|
-
grid-
|
|
14
|
-
|
|
12
|
+
-ms-grid-columns: 1fr var(--button-width);
|
|
13
|
+
grid-template-columns: 1fr var(--button-width);
|
|
14
|
+
-ms-grid-rows: auto 0;
|
|
15
|
+
grid-template-rows: auto 0;
|
|
15
16
|
background-color: var(--ffe-color-surface-primary-default);
|
|
16
17
|
border-radius: var(--ffe-g-border-radius);
|
|
17
18
|
color: var(--text-color);
|
|
18
19
|
border: var(--border-width) solid var(--border-color);
|
|
19
20
|
outline: var(--ffe-g-outline-width) solid transparent;
|
|
20
21
|
outline-offset: var(--ffe-g-outline-offset);
|
|
21
|
-
-webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
|
|
22
|
-
-o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
|
|
23
22
|
transition: all var(--ffe-transition-duration) var(--ffe-ease);
|
|
24
23
|
}
|
|
25
24
|
.ffe-searchable-dropdown :where(.ffe-searchable-dropdown__button) {
|
|
@@ -28,20 +27,19 @@
|
|
|
28
27
|
@media (hover: hover) and (pointer: fine) {
|
|
29
28
|
.ffe-searchable-dropdown:hover {
|
|
30
29
|
--border-color: var(--ffe-color-border-primary-default-hover);
|
|
31
|
-
|
|
32
|
-
box-shadow: 0 0 0 1px var(--ffe-color-border-primary-default-hover);
|
|
30
|
+
box-shadow: 0 0 0 1px var(--ffe-color-border-primary-default-hover);
|
|
33
31
|
}
|
|
34
32
|
}
|
|
35
33
|
.ffe-searchable-dropdown:active,
|
|
36
34
|
.ffe-searchable-dropdown:focus-within {
|
|
37
35
|
border-color: var(--ffe-color-component-form-input-border-active);
|
|
38
|
-
|
|
39
|
-
box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-component-form-input-border-active);
|
|
36
|
+
box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-component-form-input-border-active);
|
|
40
37
|
}
|
|
41
38
|
.ffe-searchable-dropdown:focus-within {
|
|
42
39
|
outline-color: var(--ffe-color-border-interactive-focus);
|
|
43
40
|
}
|
|
44
41
|
.ffe-searchable-dropdown__input {
|
|
42
|
+
display: -ms-grid;
|
|
45
43
|
display: grid;
|
|
46
44
|
border-radius: var(--ffe-g-border-radius) 0 0 var(--ffe-g-border-radius);
|
|
47
45
|
padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm);
|
|
@@ -54,6 +52,7 @@
|
|
|
54
52
|
}
|
|
55
53
|
.ffe-searchable-dropdown__button {
|
|
56
54
|
cursor: pointer;
|
|
55
|
+
display: -ms-grid;
|
|
57
56
|
display: grid;
|
|
58
57
|
place-items: center;
|
|
59
58
|
border-left: none;
|
|
@@ -64,15 +63,10 @@
|
|
|
64
63
|
display: block;
|
|
65
64
|
}
|
|
66
65
|
.ffe-searchable-dropdown__button-icon {
|
|
67
|
-
-webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
|
|
68
|
-
transition: color var(--ffe-transition-duration) var(--ffe-ease), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
|
|
69
|
-
-o-transition: color var(--ffe-transition-duration) var(--ffe-ease), transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
|
|
70
66
|
transition: color var(--ffe-transition-duration) var(--ffe-ease), transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
|
|
71
|
-
transition: color var(--ffe-transition-duration) var(--ffe-ease), transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
|
|
72
67
|
}
|
|
73
68
|
.ffe-searchable-dropdown__button--flip .ffe-searchable-dropdown__button-icon {
|
|
74
|
-
|
|
75
|
-
transform: rotateZ(180deg);
|
|
69
|
+
transform: rotateZ(180deg);
|
|
76
70
|
}
|
|
77
71
|
.ffe-searchable-dropdown input {
|
|
78
72
|
all: unset;
|
|
@@ -81,13 +75,7 @@
|
|
|
81
75
|
color: var(--ffe-color-foreground-default);
|
|
82
76
|
font-size: var(--ffe-fontsize-form-input);
|
|
83
77
|
}
|
|
84
|
-
.ffe-searchable-dropdown input
|
|
85
|
-
color: var(--ffe-color-foreground-subtle);
|
|
86
|
-
}
|
|
87
|
-
.ffe-searchable-dropdown input::-moz-placeholder {
|
|
88
|
-
color: var(--ffe-color-foreground-subtle);
|
|
89
|
-
}
|
|
90
|
-
.ffe-searchable-dropdown input::-ms-input-placeholder {
|
|
78
|
+
.ffe-searchable-dropdown input:-ms-input-placeholder {
|
|
91
79
|
color: var(--ffe-color-foreground-subtle);
|
|
92
80
|
}
|
|
93
81
|
.ffe-searchable-dropdown input::placeholder {
|
|
@@ -152,12 +140,10 @@
|
|
|
152
140
|
background: var(--ffe-color-surface-primary-default-hover);
|
|
153
141
|
}
|
|
154
142
|
.ffe-searchable-dropdown__list-item-body-details {
|
|
155
|
-
display: -webkit-box;
|
|
156
143
|
display: -ms-flexbox;
|
|
157
144
|
display: flex;
|
|
158
|
-
-
|
|
159
|
-
-
|
|
160
|
-
justify-content: space-between;
|
|
145
|
+
-ms-flex-pack: justify;
|
|
146
|
+
justify-content: space-between;
|
|
161
147
|
}
|
|
162
148
|
.ffe-searchable-dropdown__selected-icon {
|
|
163
149
|
color: var(--selected-icon-color);
|
|
@@ -166,44 +152,40 @@
|
|
|
166
152
|
.ffe-searchable-dropdown:has(input[aria-invalid='true']) {
|
|
167
153
|
color: var(--ffe-color-foreground-feedback-critical);
|
|
168
154
|
border: var(--ffe-g-border-width) solid var(--ffe-color-border-feedback-critical);
|
|
169
|
-
|
|
170
|
-
box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
|
|
155
|
+
box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
|
|
171
156
|
background-color: var(--ffe-color-surface-feedback-critical);
|
|
172
157
|
}
|
|
173
158
|
@media (hover: hover) and (pointer: fine) {
|
|
174
159
|
.ffe-searchable-dropdown:has(input[aria-invalid='true']):hover,
|
|
175
160
|
.ffe-searchable-dropdown:has(input[aria-invalid='true']):focus {
|
|
176
161
|
border: var(--ffe-g-border-width) solid var(--ffe-color-border-feedback-critical);
|
|
177
|
-
|
|
178
|
-
box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
|
|
162
|
+
box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
|
|
179
163
|
background-color: var(--ffe-color-surface-primary-default);
|
|
180
164
|
}
|
|
181
165
|
}
|
|
182
166
|
.ffe-searchable-dropdown--multi .ffe-searchable-dropdown__input {
|
|
183
|
-
display: -webkit-box;
|
|
184
167
|
display: -ms-flexbox;
|
|
185
168
|
display: flex;
|
|
186
169
|
-ms-flex-wrap: wrap;
|
|
187
170
|
flex-wrap: wrap;
|
|
188
|
-
-
|
|
189
|
-
-
|
|
190
|
-
align-items: center;
|
|
171
|
+
-ms-flex-align: center;
|
|
172
|
+
align-items: center;
|
|
191
173
|
gap: var(--ffe-spacing-xs);
|
|
192
174
|
}
|
|
193
175
|
.ffe-searchable-dropdown--multi .ffe-searchable-dropdown__input input {
|
|
194
176
|
width: 100%;
|
|
195
|
-
-
|
|
196
|
-
|
|
197
|
-
flex: 1;
|
|
177
|
+
-ms-flex: 1;
|
|
178
|
+
flex: 1;
|
|
198
179
|
min-width: 7ch;
|
|
199
180
|
}
|
|
200
181
|
.ffe-searchable-dropdown--multi .ffe-searchable-dropdown__list-item-body {
|
|
182
|
+
display: -ms-grid;
|
|
201
183
|
display: grid;
|
|
202
|
-
grid-
|
|
184
|
+
-ms-grid-columns: 1fr auto;
|
|
185
|
+
grid-template-columns: 1fr auto;
|
|
203
186
|
gap: var(--ffe-spacing-xs);
|
|
204
|
-
-
|
|
205
|
-
-
|
|
206
|
-
align-items: center;
|
|
187
|
+
-ms-flex-align: center;
|
|
188
|
+
align-items: center;
|
|
207
189
|
padding: var(--ffe-spacing-sm);
|
|
208
190
|
}
|
|
209
191
|
.ffe-searchable-dropdown--multi .ffe-searchable-dropdown__list-item-body--condensed {
|
|
@@ -220,8 +202,7 @@
|
|
|
220
202
|
max-width: 14ch;
|
|
221
203
|
overflow: hidden;
|
|
222
204
|
white-space: nowrap;
|
|
223
|
-
|
|
224
|
-
text-overflow: ellipsis;
|
|
205
|
+
text-overflow: ellipsis;
|
|
225
206
|
}
|
|
226
207
|
.ffe-searchable-dropdown--multi .ffe-chip--multiple-selected {
|
|
227
208
|
pointer-events: none;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-searchable-dropdown-react",
|
|
3
|
-
"version": "100.
|
|
3
|
+
"version": "100.7.0",
|
|
4
4
|
"description": "Dropdown with search option",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "SpareBank 1",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
"test:watch": "ffe-buildtool jest --watch"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@sb1/ffe-chips-react": "^100.
|
|
31
|
-
"@sb1/ffe-core-react": "^100.
|
|
32
|
-
"@sb1/ffe-form": "^100.
|
|
33
|
-
"@sb1/ffe-icons-react": "^100.
|
|
34
|
-
"@sb1/ffe-spinner-react": "^100.
|
|
30
|
+
"@sb1/ffe-chips-react": "^100.7.0",
|
|
31
|
+
"@sb1/ffe-core-react": "^100.7.0",
|
|
32
|
+
"@sb1/ffe-form": "^100.7.0",
|
|
33
|
+
"@sb1/ffe-icons-react": "^100.7.0",
|
|
34
|
+
"@sb1/ffe-spinner-react": "^100.7.0",
|
|
35
35
|
"@types/lodash.isequal": "^4.5.8",
|
|
36
36
|
"classnames": "^2.3.1",
|
|
37
37
|
"compute-scroll-into-view": "^3.1.0",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"react-custom-scrollbars-4": "^4.5.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@sb1/ffe-buildtool": "^100.
|
|
43
|
+
"@sb1/ffe-buildtool": "^100.7.0",
|
|
44
44
|
"eslint": "^9.22.0",
|
|
45
45
|
"react": "^18.2.0",
|
|
46
46
|
"react-dom": "^18.2.0"
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"publishConfig": {
|
|
52
52
|
"access": "public"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "206ebc01a87406a446cd81ee712e2e192ab3f193"
|
|
55
55
|
}
|