@entur/dropdown 5.0.8 → 5.0.9-beta.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/dist/styles.css CHANGED
@@ -91,6 +91,31 @@
91
91
  }
92
92
  /* DO NOT CHANGE!*/
93
93
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
94
+ .eds-dropdown__searchable-selected-item {
95
+ display: block;
96
+ font-size: 1rem;
97
+ line-height: 1rem;
98
+ margin-right: -1rem;
99
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
100
+ font-family: inherit;
101
+ overflow-x: hidden;
102
+ text-overflow: ellipsis;
103
+ white-space: nowrap;
104
+ }
105
+ .eds-dropdown__searchable-selected-item__wrapper {
106
+ max-width: 65%;
107
+ }
108
+
109
+ .eds-form-control.eds-dropdown__input::-moz-placeholder {
110
+ -moz-transition: none;
111
+ transition: none;
112
+ }
113
+
114
+ .eds-form-control.eds-dropdown__input::placeholder {
115
+ transition: none;
116
+ }
117
+ /* DO NOT CHANGE!*/
118
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
94
119
  .eds-dropdown-list {
95
120
  border-radius: 0.25rem;
96
121
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
@@ -153,31 +178,6 @@
153
178
  .eds-dropdown-list-icon {
154
179
  margin-left: 0.75rem;
155
180
  }
156
- /* DO NOT CHANGE!*/
157
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
158
- .eds-dropdown__searchable-selected-item {
159
- display: block;
160
- font-size: 1rem;
161
- line-height: 1rem;
162
- margin-right: -1rem;
163
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
164
- font-family: inherit;
165
- overflow-x: hidden;
166
- text-overflow: ellipsis;
167
- white-space: nowrap;
168
- }
169
- .eds-dropdown__searchable-selected-item__wrapper {
170
- max-width: 65%;
171
- }
172
-
173
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
174
- -moz-transition: none;
175
- transition: none;
176
- }
177
-
178
- .eds-form-control.eds-dropdown__input::placeholder {
179
- transition: none;
180
- }
181
181
  .eds-inline-spinner {
182
182
  align-items: center;
183
183
  display: flex;
@@ -359,7 +359,7 @@
359
359
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
360
360
  .eds-dropdown__selected-item-tag {
361
361
  height: 1.5rem;
362
- max-width: 50%;
362
+ max-width: 10rem;
363
363
  padding: 0;
364
364
  }
365
365
  .eds-dropdown__selected-item-tag > span {
@@ -405,9 +405,29 @@
405
405
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
406
406
  .eds-dropdown__wrapper {
407
407
  position: relative;
408
- width: 100%;
408
+ }
409
+ .eds-dropdown__input {
410
+ flex: 1;
411
+ min-height: 3rem;
409
412
  }
410
413
  .eds-dropdown__selected-item {
414
+ cursor: pointer;
415
+ flex: 1;
416
+ padding: 1.25rem 1rem 0.25rem;
417
+ min-height: 2.75rem;
418
+ overflow-x: hidden;
419
+ text-overflow: ellipsis;
420
+ }
421
+ .eds-dropdown__selected-item__placeholder {
422
+ color: #54568c;
423
+ }
424
+ .eds-contrast .eds-dropdown__selected-item__placeholder {
425
+ color: #656782;
426
+ }
427
+ .eds-contrast .eds-dropdown__selected-item__placeholder--readonly {
428
+ color: #aeb7e2;
429
+ }
430
+ .eds-dropdown--searchable__selected-item {
411
431
  display: block;
412
432
  font-size: 1rem;
413
433
  line-height: 1rem;
@@ -420,115 +440,69 @@
420
440
  text-overflow: ellipsis;
421
441
  white-space: nowrap;
422
442
  }
423
- .eds-dropdown__selected-item__wrapper {
424
- position: absolute;
425
- max-width: 65%;
426
- }
427
- .eds-dropdown__selected-items-and-input {
443
+ .eds-dropdown--multiselect__selected-items-and-input {
428
444
  display: flex;
429
445
  flex-wrap: wrap;
430
446
  flex: 1;
431
447
  gap: 0.5rem;
448
+ min-width: 0;
432
449
  }
433
- .eds-dropdown__selected-items-and-input--filled {
450
+ .eds-dropdown--multiselect__selected-items-and-input--filled {
434
451
  padding: 1.25rem 0rem 0.25rem 1rem;
435
452
  }
436
- .eds-dropdown__selected-items-and-input--filled .eds-dropdown__input {
453
+ .eds-dropdown--multiselect__selected-items-and-input--filled .eds-dropdown__input {
437
454
  padding: 0;
438
455
  padding: initial;
439
456
  min-height: 1.5rem;
440
457
  }
441
- .eds-dropdown__selected-items-and-input--filled .eds-tag-chip:focus {
458
+ .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip:focus {
442
459
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
443
460
  }
444
- .eds-dropdown__input {
445
- flex: 1;
446
- min-width: 10%;
447
- min-height: 3rem;
448
- }
449
- .eds-dropdown.eds-form-control-wrapper {
450
- align-items: start;
451
- }
452
- .eds-dropdown.eds-form-control-wrapper.eds-dropdown--not-filled .eds-input-group__label {
453
- font-size: 1rem;
454
- position: absolute;
455
- line-height: 1rem;
456
- height: 3rem;
457
- padding: 1rem;
458
- padding-left: 0;
459
- margin-left: 1rem;
460
- top: -0.125rem;
461
- transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
462
- }
463
- .eds-dropdown.eds-form-control-wrapper .eds-form-control__prepend {
464
- top: 1rem;
465
- }
466
- .eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
467
- top: 0.4rem;
468
- }
469
- .eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
470
- height: 2rem;
471
- }
472
- .eds-dropdown__selected-item-button {
473
- cursor: pointer;
474
- flex: 1;
475
- padding: 1.25rem 1rem 0.25rem;
476
- min-height: 2.75rem;
477
- }
478
- .eds-dropdown__selected-item-button__placeholder {
479
- color: #54568c;
480
- }
481
- .eds-contrast .eds-dropdown__selected-item-button__placeholder {
482
- color: #656782;
483
- }
484
- .eds-contrast .eds-dropdown__selected-item-button__placeholder--readonly {
485
- color: #aeb7e2;
486
- }
487
- .eds-dropdown-appendix {
461
+ .eds-dropdown__appendix {
488
462
  display: flex;
489
463
  align-items: center;
490
464
  }
491
- .eds-dropdown-appendix__clear-button {
465
+ .eds-dropdown__appendix__clear-button {
492
466
  padding: 0.5rem;
493
467
  margin-right: 0.25rem;
494
468
  }
495
- .eds-contrast .eds-dropdown-appendix__clear-button:hover {
469
+ .eds-contrast .eds-dropdown__appendix__clear-button:hover {
496
470
  background: #d1d3d3;
497
471
  }
498
- .eds-contrast .eds-dropdown-appendix__clear-button:active {
472
+ .eds-contrast .eds-dropdown__appendix__clear-button:active {
499
473
  background: #949494;
500
474
  }
501
- .eds-contrast .eds-dropdown-appendix__clear-button:focus {
475
+ .eds-contrast .eds-dropdown__appendix__clear-button:focus {
502
476
  border: 0.0625rem solid #181c56;
503
477
  outline: none;
504
478
  }
505
- .eds-dropdown-appendix__clear-button__tooltip {
479
+ .eds-dropdown__appendix__clear-button__tooltip {
506
480
  white-space: nowrap;
507
481
  }
508
- .eds-dropdown-appendix__divider {
482
+ .eds-dropdown__appendix__divider {
509
483
  content: "";
510
484
  display: block;
511
485
  background-color: #e9e9e9;
512
486
  height: 1.5rem;
513
487
  width: 1px;
514
488
  }
515
- .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown-appendix__divider {
489
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__appendix__divider {
516
490
  background-color: #8285a8;
517
491
  }
518
- .eds-contrast .eds-dropdown-appendix__divider {
492
+ .eds-contrast .eds-dropdown__appendix__divider {
519
493
  background-color: #d1d3d3;
520
494
  }
521
- .eds-dropdown-appendix__toggle-button {
495
+ .eds-dropdown__appendix__toggle-button {
522
496
  margin-right: -0.75rem;
523
497
  margin-left: 0.25rem;
524
498
  }
525
- .eds-dropdown-appendix__toggle-button--open svg {
499
+ .eds-dropdown__appendix__toggle-button--open svg {
526
500
  transform: rotate(180deg);
527
501
  }
528
- .eds-dropdown-appendix__toggle-button svg {
502
+ .eds-dropdown__appendix__toggle-button svg {
529
503
  transition: transform ease-in-out 0.1s;
530
504
  }
531
- .eds-dropdown-appendix__toggle-button--loading-dots {
505
+ .eds-dropdown__appendix__toggle-button--loading-dots {
532
506
  align-items: center;
533
507
  display: flex;
534
508
  justify-content: center;
@@ -536,16 +510,39 @@
536
510
  width: 100%;
537
511
  margin-right: 0;
538
512
  }
539
- .eds-contrast .eds-dropdown-appendix__toggle-button:hover {
513
+ .eds-contrast .eds-dropdown__appendix__toggle-button:hover {
540
514
  background: #d1d3d3;
541
515
  }
542
- .eds-contrast .eds-dropdown-appendix__toggle-button:active {
516
+ .eds-contrast .eds-dropdown__appendix__toggle-button:active {
543
517
  background: #949494;
544
518
  }
545
- .eds-contrast .eds-dropdown-appendix__toggle-button:focus {
519
+ .eds-contrast .eds-dropdown__appendix__toggle-button:focus {
546
520
  border: none;
547
521
  outline: none;
548
522
  }
523
+ .eds-dropdown.eds-form-control-wrapper {
524
+ align-items: start;
525
+ }
526
+ .eds-dropdown.eds-form-control-wrapper.eds-dropdown--not-filled .eds-input-group__label {
527
+ font-size: 1rem;
528
+ position: absolute;
529
+ line-height: 1rem;
530
+ height: 3rem;
531
+ padding: 1rem;
532
+ padding-left: 0;
533
+ margin-left: 1rem;
534
+ top: -0.125rem;
535
+ transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
536
+ }
537
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__prepend {
538
+ top: 1rem;
539
+ }
540
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
541
+ top: 0.4rem;
542
+ }
543
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
544
+ height: 2rem;
545
+ }
549
546
  .eds-dropdown--native + .eds-form-control__append {
550
547
  margin-left: -2em;
551
548
  pointer-events: none;
package/dist/utils.d.ts CHANGED
@@ -3,7 +3,9 @@ import { NormalizedDropdownItemType } from './useNormalizedItems';
3
3
  import React from 'react';
4
4
  export declare const EMPTY_INPUT = "";
5
5
  export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType, input: string | undefined): boolean;
6
+ export declare function noFilter(item: NormalizedDropdownItemType, input: string | undefined): boolean;
6
7
  export declare const itemToString: (item: NormalizedDropdownItemType | null) => string;
8
+ export declare const isFunctionWithQueryArgument: (object: any) => boolean;
7
9
  type useMultiselectUtilsType = {
8
10
  selectedItems: NormalizedDropdownItemType[];
9
11
  listItems: NormalizedDropdownItemType[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "5.0.8",
3
+ "version": "5.0.9-beta.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -29,8 +29,8 @@
29
29
  "dependencies": {
30
30
  "@entur/a11y": "^0.2.70",
31
31
  "@entur/button": "^3.1.2",
32
- "@entur/chip": "^0.6.45",
33
- "@entur/form": "^7.0.17",
32
+ "@entur/chip": "^0.6.46-beta.0",
33
+ "@entur/form": "^7.0.18-beta.0",
34
34
  "@entur/icons": "^6.5.0",
35
35
  "@entur/loader": "^0.4.39",
36
36
  "@entur/tokens": "^3.10.0",
@@ -39,5 +39,5 @@
39
39
  "classnames": "^2.3.1",
40
40
  "downshift": "^7.6.1"
41
41
  },
42
- "gitHead": "c2bedc452395ed78cce9a2dc38b1998750330779"
42
+ "gitHead": "faeadfa30668a407f4078806d12cdda42195b4b8"
43
43
  }