@entur/dropdown 5.0.3 → 5.0.5

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 (2) hide show
  1. package/dist/styles.css +138 -138
  2. package/package.json +9 -9
package/dist/styles.css CHANGED
@@ -158,133 +158,67 @@
158
158
  }
159
159
  /* DO NOT CHANGE!*/
160
160
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
161
- .eds-dropdown__list {
162
- position: absolute;
163
- list-style: none;
161
+ .eds-dropdown-list {
164
162
  border-radius: 0.25rem;
165
- border: 0.125rem solid #7C7F9F;
166
163
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
167
- padding: 0;
164
+ display: none;
165
+ list-style: none;
168
166
  margin: 0;
169
- margin-top: 0.5rem;
170
167
  max-height: 50vh;
168
+ padding: 0;
169
+ position: relative;
171
170
  overflow-y: auto;
172
171
  width: 100%;
173
172
  z-index: 20;
174
173
  }
175
- .eds-dropdown__list:focus {
174
+ .eds-contrast .eds-dropdown-list {
175
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
176
+ }
177
+ .eds-dropdown-list--open {
178
+ display: inline-block;
179
+ }
180
+ .eds-dropdown-list:focus {
176
181
  outline: none;
177
182
  }
178
- .eds-dropdown__list__item {
183
+ @media all and (min-width: 50rem) {
184
+ .eds-dropdown-list {
185
+ max-height: 30vh;
186
+ }
187
+ }
188
+ .eds-dropdown-list__item {
189
+ align-items: center;
179
190
  background-color: #f8f8f8;
191
+ border-bottom: 0.125rem solid #e9e9e9;
192
+ border-left: 0.125rem solid #e9e9e9;
193
+ border-right: 0.125rem solid #e9e9e9;
180
194
  color: #181c56;
181
195
  display: flex;
182
- align-items: center;
183
- justify-content: flex-start;
196
+ justify-content: space-between;
184
197
  font-family: inherit;
185
198
  font-size: 1rem;
186
199
  line-height: 1.25rem;
187
200
  padding: 0.75rem 1rem;
188
201
  width: 100%;
189
- overflow-x: hidden;
190
- word-break: break-word;
191
- }
192
- .eds-dropdown__list__item:last-child {
193
- border-bottom: none;
194
- }
195
- .eds-dropdown__list__item__text {
196
- flex: 1;
197
- cursor: default;
198
- }
199
- .eds-dropdown__list__item__icon {
200
- margin-left: 0.75rem;
201
- }
202
- .eds-dropdown__list__item__checkbox {
203
- pointer-events: none;
204
- }
205
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
206
- border-color: #181c56;
207
- }
208
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
209
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
210
- background-color: #181c56;
211
- }
212
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
213
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
214
- stroke: #ffffff;
215
- }
216
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
217
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
218
- fill: #ffffff;
219
- }
220
- .eds-dropdown__list__item--highlighted {
221
- background-color: #d1d4e3;
222
- }
223
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
224
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
225
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
226
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
227
- background-color: #54568c;
228
- border-color: transparent;
229
- }
230
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
231
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
232
- border-color: #54568c;
233
- }
234
- .eds-dropdown__list__item--selected {
235
- background-color: #54568c;
236
- color: #ffffff;
237
202
  }
238
- @media all and (min-width: 50rem) {
239
- .eds-dropdown__list {
240
- max-height: 30vh;
241
- }
242
- }
243
- /* DO NOT CHANGE!*/
244
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
245
- .eds-dropdown__selected-item-tag {
246
- height: 1.5rem;
247
- max-width: 50%;
248
- padding: 0;
249
- }
250
- .eds-dropdown__selected-item-tag > span {
251
- overflow: hidden;
252
- text-overflow: ellipsis;
253
- white-space: nowrap;
254
- margin-left: 0.5rem;
255
- }
256
- .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
257
- margin-right: 0.125rem;
258
- }
259
- .eds-dropdown__selected-item-tag .eds-tag-chip__close-button > svg {
260
- font-size: 0.6rem;
203
+ .eds-dropdown-list__item:first-child {
204
+ border-top: 0.125rem solid #e9e9e9;
261
205
  }
262
- .eds-contrast .eds-dropdown__selected-item-tag {
263
- background: #ebebf1;
264
- border: 0.0625rem solid #d1d4e3;
265
- color: #181c56;
206
+ .eds-dropdown-list__item:last-child {
207
+ border-bottom: none;
266
208
  }
267
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
209
+ .eds-contrast .eds-dropdown-list__item {
268
210
  color: #181c56;
211
+ border-color: #54568c;
212
+ background-color: #ffffff;
269
213
  }
270
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
271
- background-color: #babbcf;
272
- }
273
- .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
274
- padding-right: 0.5rem;
275
- }
276
- .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
277
- display: none;
214
+ .eds-dropdown-list__item--highlighted {
215
+ background-color: #d1d4e3;
278
216
  }
279
- .eds-contrast .eds-dropdown__selected-item-tag--readonly {
280
- background-color: #8285a8;
281
- border-color: transparent;
282
- color: #ffffff;
217
+ .eds-contrast .eds-dropdown-list__item--highlighted {
218
+ background-color: #d1d4e3;
283
219
  }
284
- .eds-contrast .eds-dropdown__selected-item-tag--disabled {
285
- background-color: #54568c;
286
- border-color: transparent;
287
- color: #8285a8;
220
+ .eds-dropdown-list-icon {
221
+ margin-left: 0.75rem;
288
222
  }
289
223
  /* DO NOT CHANGE!*/
290
224
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -379,67 +313,133 @@
379
313
  }
380
314
  /* DO NOT CHANGE!*/
381
315
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
382
- .eds-dropdown-list {
316
+ .eds-dropdown__list {
317
+ position: absolute;
318
+ list-style: none;
383
319
  border-radius: 0.25rem;
320
+ border: 0.125rem solid #7C7F9F;
384
321
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
385
- display: none;
386
- list-style: none;
322
+ padding: 0;
387
323
  margin: 0;
324
+ margin-top: 0.5rem;
388
325
  max-height: 50vh;
389
- padding: 0;
390
- position: relative;
391
326
  overflow-y: auto;
392
327
  width: 100%;
393
328
  z-index: 20;
394
329
  }
395
- .eds-contrast .eds-dropdown-list {
396
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
397
- }
398
- .eds-dropdown-list--open {
399
- display: inline-block;
400
- }
401
- .eds-dropdown-list:focus {
330
+ .eds-dropdown__list:focus {
402
331
  outline: none;
403
332
  }
404
- @media all and (min-width: 50rem) {
405
- .eds-dropdown-list {
406
- max-height: 30vh;
407
- }
408
- }
409
- .eds-dropdown-list__item {
410
- align-items: center;
333
+ .eds-dropdown__list__item {
411
334
  background-color: #f8f8f8;
412
- border-bottom: 0.125rem solid #e9e9e9;
413
- border-left: 0.125rem solid #e9e9e9;
414
- border-right: 0.125rem solid #e9e9e9;
415
335
  color: #181c56;
416
336
  display: flex;
417
- justify-content: space-between;
337
+ align-items: center;
338
+ justify-content: flex-start;
418
339
  font-family: inherit;
419
340
  font-size: 1rem;
420
341
  line-height: 1.25rem;
421
342
  padding: 0.75rem 1rem;
422
343
  width: 100%;
344
+ overflow-x: hidden;
345
+ word-break: break-word;
423
346
  }
424
- .eds-dropdown-list__item:first-child {
425
- border-top: 0.125rem solid #e9e9e9;
426
- }
427
- .eds-dropdown-list__item:last-child {
347
+ .eds-dropdown__list__item:last-child {
428
348
  border-bottom: none;
429
349
  }
430
- .eds-contrast .eds-dropdown-list__item {
431
- color: #181c56;
432
- border-color: #54568c;
433
- background-color: #ffffff;
350
+ .eds-dropdown__list__item__text {
351
+ flex: 1;
352
+ cursor: default;
434
353
  }
435
- .eds-dropdown-list__item--highlighted {
436
- background-color: #d1d4e3;
354
+ .eds-dropdown__list__item__icon {
355
+ margin-left: 0.75rem;
437
356
  }
438
- .eds-contrast .eds-dropdown-list__item--highlighted {
357
+ .eds-dropdown__list__item__checkbox {
358
+ pointer-events: none;
359
+ }
360
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
361
+ border-color: #181c56;
362
+ }
363
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
364
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
365
+ background-color: #181c56;
366
+ }
367
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
368
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
369
+ stroke: #ffffff;
370
+ }
371
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
372
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
373
+ fill: #ffffff;
374
+ }
375
+ .eds-dropdown__list__item--highlighted {
439
376
  background-color: #d1d4e3;
440
377
  }
441
- .eds-dropdown-list-icon {
442
- margin-left: 0.75rem;
378
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
379
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
380
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
381
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
382
+ background-color: #54568c;
383
+ border-color: transparent;
384
+ }
385
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
386
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
387
+ border-color: #54568c;
388
+ }
389
+ .eds-dropdown__list__item--selected {
390
+ background-color: #54568c;
391
+ color: #ffffff;
392
+ }
393
+ @media all and (min-width: 50rem) {
394
+ .eds-dropdown__list {
395
+ max-height: 30vh;
396
+ }
397
+ }
398
+ /* DO NOT CHANGE!*/
399
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
400
+ .eds-dropdown__selected-item-tag {
401
+ height: 1.5rem;
402
+ max-width: 50%;
403
+ padding: 0;
404
+ }
405
+ .eds-dropdown__selected-item-tag > span {
406
+ overflow: hidden;
407
+ text-overflow: ellipsis;
408
+ white-space: nowrap;
409
+ margin-left: 0.5rem;
410
+ }
411
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
412
+ margin-right: 0.125rem;
413
+ }
414
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button > svg {
415
+ font-size: 0.6rem;
416
+ }
417
+ .eds-contrast .eds-dropdown__selected-item-tag {
418
+ background: #ebebf1;
419
+ border: 0.0625rem solid #d1d4e3;
420
+ color: #181c56;
421
+ }
422
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
423
+ color: #181c56;
424
+ }
425
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
426
+ background-color: #babbcf;
427
+ }
428
+ .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
429
+ padding-right: 0.5rem;
430
+ }
431
+ .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
432
+ display: none;
433
+ }
434
+ .eds-contrast .eds-dropdown__selected-item-tag--readonly {
435
+ background-color: #8285a8;
436
+ border-color: transparent;
437
+ color: #ffffff;
438
+ }
439
+ .eds-contrast .eds-dropdown__selected-item-tag--disabled {
440
+ background-color: #54568c;
441
+ border-color: transparent;
442
+ color: #8285a8;
443
443
  }
444
444
  /* DO NOT CHANGE!*/
445
445
  /* 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": "5.0.3",
3
+ "version": "5.0.5",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -27,17 +27,17 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.68",
31
- "@entur/button": "^3.1.0",
32
- "@entur/chip": "^0.6.42",
33
- "@entur/form": "^7.0.15",
30
+ "@entur/a11y": "^0.2.69",
31
+ "@entur/button": "^3.1.1",
32
+ "@entur/chip": "^0.6.44",
33
+ "@entur/form": "^7.0.16",
34
34
  "@entur/icons": "^6.4.2",
35
- "@entur/loader": "^0.4.37",
35
+ "@entur/loader": "^0.4.38",
36
36
  "@entur/tokens": "^3.10.0",
37
- "@entur/tooltip": "^2.6.25",
38
- "@entur/utils": "^0.9.3",
37
+ "@entur/tooltip": "^2.6.26",
38
+ "@entur/utils": "^0.9.4",
39
39
  "classnames": "^2.3.1",
40
40
  "downshift": "^7.6.1"
41
41
  },
42
- "gitHead": "9c28f1f272a35412bde734710ef24ff53ac7ec0e"
42
+ "gitHead": "0da1a9e2532f60cc1a456a79ad3aa689514ca2c7"
43
43
  }