@entur/dropdown 6.0.3-RC.1 → 6.0.3-RC.2

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 (9) hide show
  1. package/dist/components/DropdownList.d.ts +2 -2
  2. package/dist/dropdown.cjs.development.js +6 -6
  3. package/dist/dropdown.cjs.development.js.map +1 -1
  4. package/dist/dropdown.cjs.production.min.js +1 -1
  5. package/dist/dropdown.cjs.production.min.js.map +1 -1
  6. package/dist/dropdown.esm.js +6 -6
  7. package/dist/dropdown.esm.js.map +1 -1
  8. package/dist/styles.css +157 -157
  9. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -1,92 +1,93 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-dropdown__searchable-selected-item {
4
- display: block;
5
- font-size: 1rem;
6
- line-height: 1rem;
7
- margin-right: -1rem;
8
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
9
- font-family: inherit;
10
- overflow-x: hidden;
11
- text-overflow: ellipsis;
12
- white-space: nowrap;
3
+ .eds-multi-select {
4
+ position: relative;
13
5
  }
14
- .eds-dropdown__searchable-selected-item__wrapper {
15
- max-width: 65%;
6
+ .eds-multi-select__selected-items {
7
+ display: flex;
8
+ align-items: center;
9
+ flex-wrap: wrap;
10
+ position: relative;
11
+ flex: 1 1 0%;
12
+ padding: 0.25rem;
16
13
  }
17
-
18
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
19
- -moz-transition: none;
20
- transition: none;
14
+ .eds-multi-select__selected-items-tag.eds-tag-chip {
15
+ margin-left: 0.25rem;
16
+ white-space: nowrap;
21
17
  }
22
-
23
- .eds-form-control.eds-dropdown__input::placeholder {
24
- transition: none;
18
+ .eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip svg {
19
+ color: #181c56;
25
20
  }
26
- .eds-inline-spinner {
27
- align-items: center;
28
- display: flex;
29
- justify-content: center;
30
- height: 100%;
31
- width: 100%;
21
+ .eds-multi-select__selected-items-tag.eds-tag-chip:focus {
22
+ outline-offset: 0.125rem;
32
23
  }
33
- /* DO NOT CHANGE!*/
34
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
35
- .eds-dropdown-wrapper {
36
- position: relative;
24
+ .eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip {
25
+ color: #181c56;
26
+ background: #ebebf1;
27
+ border: 0.0625rem solid #d1d4e3;
37
28
  }
38
- .eds-dropdown-wrapper .eds-form-control {
39
- padding-right: 0;
29
+ .eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip .eds-tag-chip__close-button:hover {
30
+ background: #babbcf;
40
31
  }
41
- .eds-dropdown-wrapper .eds-form-control__append {
32
+ .eds-multi-select__input {
33
+ flex: 1 1;
34
+ min-height: 44px;
42
35
  display: flex;
43
36
  align-items: center;
44
37
  }
45
-
46
- .eds-dropdown__input::-moz-placeholder {
47
- color: var(--components-form-baseform-standard-text-label);
38
+ .eds-multi-select__placeholder {
39
+ padding-left: 1.5rem;
40
+ line-height: 1.375rem;
41
+ font-size: 1rem;
48
42
  }
49
-
50
- .eds-dropdown__input::placeholder {
51
- color: var(--components-form-baseform-standard-text-label);
43
+ .eds-checkbox-icon {
44
+ height: 1rem;
45
+ width: 1rem;
46
+ visibility: hidden;
47
+ }
48
+ .eds-checkbox-icon__path {
49
+ transform-origin: 50% 50%;
50
+ stroke-dasharray: 48;
51
+ stroke-dashoffset: 48;
52
+ stroke-width: 0.375rem;
52
53
  }
53
54
 
54
- .eds-dropdown__selected-item {
55
- overflow-x: hidden;
55
+ .eds-multiselect {
56
+ position: relative;
57
+ }
58
+ .eds-multiselect__button {
56
59
  text-overflow: ellipsis;
57
- white-space: nowrap;
58
60
  }
59
61
 
60
- .eds-dropdown__clear-button {
61
- background: none;
62
- border: none;
63
- border-radius: 50%;
64
- color: inherit;
65
- cursor: pointer;
66
- display: flex;
67
- font: inherit;
68
- font-size: 1rem;
69
- line-height: 1rem;
70
- padding: 0.5rem;
62
+ .eds-multiselect-checkbox {
63
+ display: inline-flex;
64
+ justify-content: center;
65
+ align-items: center;
66
+ position: relative;
67
+ margin-right: 0.75rem;
68
+ height: 1.25rem;
69
+ width: 1.25rem;
70
+ border: 0.125rem solid #181c56;
71
+ border-radius: 0.0625rem;
72
+ background-color: transparent;
73
+ color: #ffffff;
71
74
  }
72
- .eds-dropdown__clear-button:hover {
73
- background: #f3f3f3;
75
+
76
+ .eds-multiselect-checkbox--checked {
77
+ background-color: #181c56;
74
78
  }
75
- .eds-dropdown__clear-button:focus {
76
- outline-offset: 0.125rem;
77
- outline: none;
78
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
79
+ .eds-multiselect-checkbox--checked .eds-checkbox-icon {
80
+ visibility: visible;
79
81
  }
80
-
81
- .eds-dropdown__divider {
82
- content: "";
83
- display: block;
84
- background-color: #e9e9e9;
85
- height: 1.5rem;
86
- width: 1px;
82
+ .eds-multiselect-checkbox--checked .eds-checkbox-icon__path {
83
+ stroke: #ffffff;
84
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
87
85
  }
88
- .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
89
- background-color: #8285a8;
86
+
87
+ @keyframes stroke {
88
+ 100% {
89
+ stroke-dashoffset: 0;
90
+ }
90
91
  }
91
92
  /* DO NOT CHANGE!*/
92
93
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -152,124 +153,123 @@
152
153
  .eds-dropdown-list-icon {
153
154
  margin-left: 0.75rem;
154
155
  }
155
- /* DO NOT CHANGE!*/
156
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
157
- .eds-dropdown__toggle-button {
158
- -webkit-appearance: none;
159
- -moz-appearance: none;
160
- appearance: none;
161
- background: none;
162
- border: none;
163
- border-radius: 0;
164
- color: inherit;
165
- font-size: inherit;
166
- font-family: inherit;
167
- margin-right: -0.75rem;
168
- padding: 0.5rem;
156
+ .eds-inline-spinner {
157
+ align-items: center;
169
158
  display: flex;
170
159
  justify-content: center;
171
- }
172
- .eds-dropdown__toggle-button--open svg {
173
- transform: rotate(180deg);
174
- }
175
- .eds-dropdown__toggle-button:focus {
176
- outline-offset: 0.125rem;
177
- outline: none;
178
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
179
- }
180
- .eds-contrast .eds-dropdown__toggle-button:focus {
181
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
160
+ height: 100%;
161
+ width: 100%;
182
162
  }
183
163
  /* DO NOT CHANGE!*/
184
164
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
185
- .eds-multi-select {
165
+ .eds-dropdown-wrapper {
186
166
  position: relative;
187
167
  }
188
- .eds-multi-select__selected-items {
168
+ .eds-dropdown-wrapper .eds-form-control {
169
+ padding-right: 0;
170
+ }
171
+ .eds-dropdown-wrapper .eds-form-control__append {
189
172
  display: flex;
190
173
  align-items: center;
191
- flex-wrap: wrap;
192
- position: relative;
193
- flex: 1 1 0%;
194
- padding: 0.25rem;
195
- }
196
- .eds-multi-select__selected-items-tag.eds-tag-chip {
197
- margin-left: 0.25rem;
198
- white-space: nowrap;
199
- }
200
- .eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip svg {
201
- color: #181c56;
202
174
  }
203
- .eds-multi-select__selected-items-tag.eds-tag-chip:focus {
204
- outline-offset: 0.125rem;
175
+
176
+ .eds-dropdown__input::-moz-placeholder {
177
+ color: var(--components-form-baseform-standard-text-label);
205
178
  }
206
- .eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip {
207
- color: #181c56;
208
- background: #ebebf1;
209
- border: 0.0625rem solid #d1d4e3;
179
+
180
+ .eds-dropdown__input::placeholder {
181
+ color: var(--components-form-baseform-standard-text-label);
210
182
  }
211
- .eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip .eds-tag-chip__close-button:hover {
212
- background: #babbcf;
183
+
184
+ .eds-dropdown__selected-item {
185
+ overflow-x: hidden;
186
+ text-overflow: ellipsis;
187
+ white-space: nowrap;
213
188
  }
214
- .eds-multi-select__input {
215
- flex: 1 1;
216
- min-height: 44px;
189
+
190
+ .eds-dropdown__clear-button {
191
+ background: none;
192
+ border: none;
193
+ border-radius: 50%;
194
+ color: inherit;
195
+ cursor: pointer;
217
196
  display: flex;
218
- align-items: center;
219
- }
220
- .eds-multi-select__placeholder {
221
- padding-left: 1.5rem;
222
- line-height: 1.375rem;
197
+ font: inherit;
223
198
  font-size: 1rem;
199
+ line-height: 1rem;
200
+ padding: 0.5rem;
224
201
  }
225
- .eds-checkbox-icon {
226
- height: 1rem;
227
- width: 1rem;
228
- visibility: hidden;
202
+ .eds-dropdown__clear-button:hover {
203
+ background: #f3f3f3;
229
204
  }
230
- .eds-checkbox-icon__path {
231
- transform-origin: 50% 50%;
232
- stroke-dasharray: 48;
233
- stroke-dashoffset: 48;
234
- stroke-width: 0.375rem;
205
+ .eds-dropdown__clear-button:focus {
206
+ outline-offset: 0.125rem;
207
+ outline: none;
208
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
235
209
  }
236
210
 
237
- .eds-multiselect {
238
- position: relative;
211
+ .eds-dropdown__divider {
212
+ content: "";
213
+ display: block;
214
+ background-color: #e9e9e9;
215
+ height: 1.5rem;
216
+ width: 1px;
239
217
  }
240
- .eds-multiselect__button {
218
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
219
+ background-color: #8285a8;
220
+ }
221
+ /* DO NOT CHANGE!*/
222
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
223
+ .eds-dropdown__searchable-selected-item {
224
+ display: block;
225
+ font-size: 1rem;
226
+ line-height: 1rem;
227
+ margin-right: -1rem;
228
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
229
+ font-family: inherit;
230
+ overflow-x: hidden;
241
231
  text-overflow: ellipsis;
232
+ white-space: nowrap;
233
+ }
234
+ .eds-dropdown__searchable-selected-item__wrapper {
235
+ max-width: 65%;
242
236
  }
243
237
 
244
- .eds-multiselect-checkbox {
245
- display: inline-flex;
246
- justify-content: center;
247
- align-items: center;
248
- position: relative;
249
- margin-right: 0.75rem;
250
- height: 1.25rem;
251
- width: 1.25rem;
252
- border: 0.125rem solid #181c56;
253
- border-radius: 0.0625rem;
254
- background-color: transparent;
255
- color: #ffffff;
238
+ .eds-form-control.eds-dropdown__input::-moz-placeholder {
239
+ -moz-transition: none;
240
+ transition: none;
256
241
  }
257
242
 
258
- .eds-multiselect-checkbox--checked {
259
- background-color: #181c56;
243
+ .eds-form-control.eds-dropdown__input::placeholder {
244
+ transition: none;
260
245
  }
261
- .eds-multiselect-checkbox--checked .eds-checkbox-icon {
262
- visibility: visible;
246
+ /* DO NOT CHANGE!*/
247
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
248
+ .eds-dropdown__toggle-button {
249
+ -webkit-appearance: none;
250
+ -moz-appearance: none;
251
+ appearance: none;
252
+ background: none;
253
+ border: none;
254
+ border-radius: 0;
255
+ color: inherit;
256
+ font-size: inherit;
257
+ font-family: inherit;
258
+ margin-right: -0.75rem;
259
+ padding: 0.5rem;
260
+ display: flex;
261
+ justify-content: center;
263
262
  }
264
- .eds-multiselect-checkbox--checked .eds-checkbox-icon__path {
265
- stroke: #ffffff;
266
- animation: stroke ease-in-out 0.2s 0.1s forwards;
263
+ .eds-dropdown__toggle-button--open svg {
264
+ transform: rotate(180deg);
267
265
  }
268
-
269
- @keyframes stroke {
270
- 100% {
271
- stroke-dashoffset: 0;
272
- }
266
+ .eds-dropdown__toggle-button:focus {
267
+ outline-offset: 0.125rem;
268
+ outline: none;
269
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
270
+ }
271
+ .eds-contrast .eds-dropdown__toggle-button:focus {
272
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
273
273
  }
274
274
  /* DO NOT CHANGE!*/
275
275
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "6.0.3-RC.1",
3
+ "version": "6.0.3-RC.2",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -40,5 +40,5 @@
40
40
  "classnames": "^2.3.1",
41
41
  "downshift": "^9.0.8"
42
42
  },
43
- "gitHead": "d7b4d04bcbef5d3861b802b0a6af3f36a91a4118"
43
+ "gitHead": "cae8c3d33759ad14480e6c3f42f864d7969edf3a"
44
44
  }