@entur/dropdown 5.0.6 → 5.0.8

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/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import './index.scss';
2
- export type { NormalizedDropdownItemType, DropdownItemType, } from './useNormalizedItems';
3
- export * from './deprecated';
4
- export * from './SearchableDropdown';
5
- export * from './MultiSelect';
6
- export * from './Dropdown';
7
- export * from './NativeDropdown';
1
+ import './index.scss';
2
+ export type { NormalizedDropdownItemType, DropdownItemType, } from './useNormalizedItems';
3
+ export * from './deprecated';
4
+ export * from './SearchableDropdown';
5
+ export * from './MultiSelect';
6
+ export * from './Dropdown';
7
+ export * from './NativeDropdown';
package/dist/styles.css CHANGED
@@ -1,162 +1,3 @@
1
- :root {
2
- --eds-dropdown: 1;
3
- }
4
- /* DO NOT CHANGE!*/
5
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-dropdown__wrapper {
7
- position: relative;
8
- width: 100%;
9
- }
10
- .eds-dropdown__selected-item {
11
- display: block;
12
- font-size: 1rem;
13
- line-height: 1rem;
14
- margin-right: -1rem;
15
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
16
- font-family: inherit;
17
- position: relative;
18
- top: 5px;
19
- overflow-x: hidden;
20
- text-overflow: ellipsis;
21
- white-space: nowrap;
22
- }
23
- .eds-dropdown__selected-item__wrapper {
24
- position: absolute;
25
- max-width: 65%;
26
- }
27
- .eds-dropdown__selected-items-and-input {
28
- display: flex;
29
- flex-wrap: wrap;
30
- flex: 1;
31
- gap: 0.5rem;
32
- }
33
- .eds-dropdown__selected-items-and-input--filled {
34
- padding: 1.25rem 0rem 0.25rem 1rem;
35
- }
36
- .eds-dropdown__selected-items-and-input--filled .eds-dropdown__input {
37
- padding: 0;
38
- padding: initial;
39
- min-height: 1.5rem;
40
- }
41
- .eds-dropdown__selected-items-and-input--filled .eds-tag-chip:focus {
42
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
43
- }
44
- .eds-dropdown__input {
45
- flex: 1;
46
- min-width: 10%;
47
- min-height: 3rem;
48
- }
49
- .eds-dropdown.eds-form-control-wrapper {
50
- align-items: start;
51
- }
52
- .eds-dropdown.eds-form-control-wrapper.eds-dropdown--not-filled .eds-input-group__label {
53
- font-size: 1rem;
54
- position: absolute;
55
- line-height: 1rem;
56
- height: 3rem;
57
- padding: 1rem;
58
- padding-left: 0;
59
- margin-left: 1rem;
60
- top: -0.125rem;
61
- 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;
62
- }
63
- .eds-dropdown.eds-form-control-wrapper .eds-form-control__prepend {
64
- top: 1rem;
65
- }
66
- .eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
67
- top: 0.4rem;
68
- }
69
- .eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
70
- height: 2rem;
71
- }
72
- .eds-dropdown__selected-item-button {
73
- cursor: pointer;
74
- flex: 1;
75
- padding: 1.25rem 1rem 0.25rem;
76
- min-height: 2.75rem;
77
- }
78
- .eds-dropdown__selected-item-button__placeholder {
79
- color: #54568c;
80
- }
81
- .eds-contrast .eds-dropdown__selected-item-button__placeholder {
82
- color: #656782;
83
- }
84
- .eds-contrast .eds-dropdown__selected-item-button__placeholder--readonly {
85
- color: #aeb7e2;
86
- }
87
- .eds-dropdown-appendix {
88
- display: flex;
89
- align-items: center;
90
- }
91
- .eds-dropdown-appendix__clear-button {
92
- padding: 0.5rem;
93
- margin-right: 0.25rem;
94
- }
95
- .eds-contrast .eds-dropdown-appendix__clear-button:hover {
96
- background: #d1d3d3;
97
- }
98
- .eds-contrast .eds-dropdown-appendix__clear-button:active {
99
- background: #949494;
100
- }
101
- .eds-contrast .eds-dropdown-appendix__clear-button:focus {
102
- border: 0.0625rem solid #181c56;
103
- outline: none;
104
- }
105
- .eds-dropdown-appendix__clear-button__tooltip {
106
- white-space: nowrap;
107
- }
108
- .eds-dropdown-appendix__divider {
109
- content: "";
110
- display: block;
111
- background-color: #e9e9e9;
112
- height: 1.5rem;
113
- width: 1px;
114
- }
115
- .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown-appendix__divider {
116
- background-color: #8285a8;
117
- }
118
- .eds-contrast .eds-dropdown-appendix__divider {
119
- background-color: #d1d3d3;
120
- }
121
- .eds-dropdown-appendix__toggle-button {
122
- margin-right: -0.75rem;
123
- margin-left: 0.25rem;
124
- }
125
- .eds-dropdown-appendix__toggle-button--open svg {
126
- transform: rotate(180deg);
127
- }
128
- .eds-dropdown-appendix__toggle-button svg {
129
- transition: transform ease-in-out 0.1s;
130
- }
131
- .eds-dropdown-appendix__toggle-button--loading-dots {
132
- align-items: center;
133
- display: flex;
134
- justify-content: center;
135
- height: 100%;
136
- width: 100%;
137
- margin-right: 0;
138
- }
139
- .eds-contrast .eds-dropdown-appendix__toggle-button:hover {
140
- background: #d1d3d3;
141
- }
142
- .eds-contrast .eds-dropdown-appendix__toggle-button:active {
143
- background: #949494;
144
- }
145
- .eds-contrast .eds-dropdown-appendix__toggle-button:focus {
146
- border: none;
147
- outline: none;
148
- }
149
- .eds-dropdown--native + .eds-form-control__append {
150
- margin-left: -2em;
151
- pointer-events: none;
152
- }
153
- .eds-dropdown--native option {
154
- color: #181c56;
155
- background-color: #ffffff;
156
- }
157
- .eds-contrast .eds-dropdown--native option {
158
- color: #181c56;
159
- }
160
1
  /* DO NOT CHANGE!*/
161
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
162
3
  .eds-multi-select {
@@ -314,6 +155,124 @@
314
155
  }
315
156
  /* DO NOT CHANGE!*/
316
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
+ .eds-inline-spinner {
182
+ align-items: center;
183
+ display: flex;
184
+ justify-content: center;
185
+ height: 100%;
186
+ width: 100%;
187
+ }
188
+ /* DO NOT CHANGE!*/
189
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
190
+ .eds-dropdown__toggle-button {
191
+ -webkit-appearance: none;
192
+ -moz-appearance: none;
193
+ appearance: none;
194
+ background: none;
195
+ border: none;
196
+ border-radius: 0;
197
+ color: inherit;
198
+ font-size: inherit;
199
+ font-family: inherit;
200
+ margin-right: -0.75rem;
201
+ padding: 0.5rem;
202
+ display: flex;
203
+ justify-content: center;
204
+ }
205
+ .eds-dropdown__toggle-button--open svg {
206
+ transform: rotate(180deg);
207
+ }
208
+ .eds-dropdown__toggle-button:focus {
209
+ outline-offset: 0.125rem;
210
+ outline: none;
211
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
212
+ }
213
+ .eds-contrast .eds-dropdown__toggle-button:focus {
214
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
215
+ }
216
+ /* DO NOT CHANGE!*/
217
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
218
+ .eds-dropdown-wrapper {
219
+ position: relative;
220
+ }
221
+ .eds-dropdown-wrapper .eds-form-control {
222
+ padding-right: 0;
223
+ }
224
+ .eds-dropdown-wrapper .eds-form-control__append {
225
+ display: flex;
226
+ align-items: center;
227
+ }
228
+
229
+ .eds-dropdown__input::-moz-placeholder {
230
+ color: #656782;
231
+ }
232
+
233
+ .eds-dropdown__input::placeholder {
234
+ color: #656782;
235
+ }
236
+
237
+ .eds-dropdown__selected-item {
238
+ overflow-x: hidden;
239
+ text-overflow: ellipsis;
240
+ white-space: nowrap;
241
+ }
242
+
243
+ .eds-dropdown__clear-button {
244
+ background: none;
245
+ border: none;
246
+ border-radius: 50%;
247
+ color: inherit;
248
+ cursor: pointer;
249
+ display: flex;
250
+ font: inherit;
251
+ font-size: 1rem;
252
+ line-height: 1rem;
253
+ padding: 0.5rem;
254
+ }
255
+ .eds-dropdown__clear-button:hover {
256
+ background: #f3f3f3;
257
+ }
258
+ .eds-dropdown__clear-button:focus {
259
+ outline-offset: 0.125rem;
260
+ outline: none;
261
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
262
+ }
263
+
264
+ .eds-dropdown__divider {
265
+ content: "";
266
+ display: block;
267
+ background-color: #e9e9e9;
268
+ height: 1.5rem;
269
+ width: 1px;
270
+ }
271
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
272
+ background-color: #8285a8;
273
+ }
274
+ /* DO NOT CHANGE!*/
275
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
317
276
  .eds-dropdown__list {
318
277
  position: absolute;
319
278
  list-style: none;
@@ -444,121 +403,160 @@
444
403
  }
445
404
  /* DO NOT CHANGE!*/
446
405
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
447
- .eds-dropdown__searchable-selected-item {
406
+ .eds-dropdown__wrapper {
407
+ position: relative;
408
+ width: 100%;
409
+ }
410
+ .eds-dropdown__selected-item {
448
411
  display: block;
449
412
  font-size: 1rem;
450
413
  line-height: 1rem;
451
414
  margin-right: -1rem;
452
415
  padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
453
416
  font-family: inherit;
417
+ position: relative;
418
+ top: 5px;
454
419
  overflow-x: hidden;
455
420
  text-overflow: ellipsis;
456
421
  white-space: nowrap;
457
422
  }
458
- .eds-dropdown__searchable-selected-item__wrapper {
423
+ .eds-dropdown__selected-item__wrapper {
424
+ position: absolute;
459
425
  max-width: 65%;
460
426
  }
461
-
462
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
463
- -moz-transition: none;
464
- transition: none;
427
+ .eds-dropdown__selected-items-and-input {
428
+ display: flex;
429
+ flex-wrap: wrap;
430
+ flex: 1;
431
+ gap: 0.5rem;
465
432
  }
466
-
467
- .eds-form-control.eds-dropdown__input::placeholder {
468
- transition: none;
433
+ .eds-dropdown__selected-items-and-input--filled {
434
+ padding: 1.25rem 0rem 0.25rem 1rem;
469
435
  }
470
- /* DO NOT CHANGE!*/
471
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
472
- .eds-inline-spinner {
473
- align-items: center;
474
- display: flex;
475
- justify-content: center;
476
- height: 100%;
477
- width: 100%;
436
+ .eds-dropdown__selected-items-and-input--filled .eds-dropdown__input {
437
+ padding: 0;
438
+ padding: initial;
439
+ min-height: 1.5rem;
478
440
  }
479
- /* DO NOT CHANGE!*/
480
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
481
- .eds-dropdown-wrapper {
482
- position: relative;
441
+ .eds-dropdown__selected-items-and-input--filled .eds-tag-chip:focus {
442
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
483
443
  }
484
- .eds-dropdown-wrapper .eds-form-control {
485
- padding-right: 0;
444
+ .eds-dropdown__input {
445
+ flex: 1;
446
+ min-width: 10%;
447
+ min-height: 3rem;
486
448
  }
487
- .eds-dropdown-wrapper .eds-form-control__append {
488
- display: flex;
489
- align-items: center;
449
+ .eds-dropdown.eds-form-control-wrapper {
450
+ align-items: start;
490
451
  }
491
-
492
- .eds-dropdown__input::-moz-placeholder {
493
- color: #656782;
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;
494
462
  }
495
-
496
- .eds-dropdown__input::placeholder {
497
- color: #656782;
463
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__prepend {
464
+ top: 1rem;
498
465
  }
499
-
500
- .eds-dropdown__selected-item {
501
- overflow-x: hidden;
502
- text-overflow: ellipsis;
503
- white-space: nowrap;
466
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
467
+ top: 0.4rem;
504
468
  }
505
-
506
- .eds-dropdown__clear-button {
507
- background: none;
508
- border: none;
509
- border-radius: 50%;
510
- color: inherit;
469
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
470
+ height: 2rem;
471
+ }
472
+ .eds-dropdown__selected-item-button {
511
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 {
512
488
  display: flex;
513
- font: inherit;
514
- font-size: 1rem;
515
- line-height: 1rem;
489
+ align-items: center;
490
+ }
491
+ .eds-dropdown-appendix__clear-button {
516
492
  padding: 0.5rem;
493
+ margin-right: 0.25rem;
517
494
  }
518
- .eds-dropdown__clear-button:hover {
519
- background: #f3f3f3;
495
+ .eds-contrast .eds-dropdown-appendix__clear-button:hover {
496
+ background: #d1d3d3;
520
497
  }
521
- .eds-dropdown__clear-button:focus {
522
- outline-offset: 0.125rem;
498
+ .eds-contrast .eds-dropdown-appendix__clear-button:active {
499
+ background: #949494;
500
+ }
501
+ .eds-contrast .eds-dropdown-appendix__clear-button:focus {
502
+ border: 0.0625rem solid #181c56;
523
503
  outline: none;
524
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
525
504
  }
526
-
527
- .eds-dropdown__divider {
505
+ .eds-dropdown-appendix__clear-button__tooltip {
506
+ white-space: nowrap;
507
+ }
508
+ .eds-dropdown-appendix__divider {
528
509
  content: "";
529
510
  display: block;
530
511
  background-color: #e9e9e9;
531
512
  height: 1.5rem;
532
513
  width: 1px;
533
514
  }
534
- .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
515
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown-appendix__divider {
535
516
  background-color: #8285a8;
536
517
  }
537
- /* DO NOT CHANGE!*/
538
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
539
- .eds-dropdown__toggle-button {
540
- -webkit-appearance: none;
541
- -moz-appearance: none;
542
- appearance: none;
543
- background: none;
544
- border: none;
545
- border-radius: 0;
546
- color: inherit;
547
- font-size: inherit;
548
- font-family: inherit;
518
+ .eds-contrast .eds-dropdown-appendix__divider {
519
+ background-color: #d1d3d3;
520
+ }
521
+ .eds-dropdown-appendix__toggle-button {
549
522
  margin-right: -0.75rem;
550
- padding: 0.5rem;
523
+ margin-left: 0.25rem;
524
+ }
525
+ .eds-dropdown-appendix__toggle-button--open svg {
526
+ transform: rotate(180deg);
527
+ }
528
+ .eds-dropdown-appendix__toggle-button svg {
529
+ transition: transform ease-in-out 0.1s;
530
+ }
531
+ .eds-dropdown-appendix__toggle-button--loading-dots {
532
+ align-items: center;
551
533
  display: flex;
552
534
  justify-content: center;
535
+ height: 100%;
536
+ width: 100%;
537
+ margin-right: 0;
553
538
  }
554
- .eds-dropdown__toggle-button--open svg {
555
- transform: rotate(180deg);
539
+ .eds-contrast .eds-dropdown-appendix__toggle-button:hover {
540
+ background: #d1d3d3;
556
541
  }
557
- .eds-dropdown__toggle-button:focus {
558
- outline-offset: 0.125rem;
542
+ .eds-contrast .eds-dropdown-appendix__toggle-button:active {
543
+ background: #949494;
544
+ }
545
+ .eds-contrast .eds-dropdown-appendix__toggle-button:focus {
546
+ border: none;
559
547
  outline: none;
560
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
561
548
  }
562
- .eds-contrast .eds-dropdown__toggle-button:focus {
563
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
549
+ .eds-dropdown--native + .eds-form-control__append {
550
+ margin-left: -2em;
551
+ pointer-events: none;
552
+ }
553
+ .eds-dropdown--native option {
554
+ color: #181c56;
555
+ background-color: #ffffff;
556
+ }
557
+ .eds-contrast .eds-dropdown--native option {
558
+ color: #181c56;
559
+ }
560
+ :root {
561
+ --eds-dropdown: 1;
564
562
  }
@@ -1,12 +1,12 @@
1
- import React from 'react';
2
- export type DropdownItemType = {
3
- value?: string;
4
- label: string;
5
- icons?: React.ComponentType<any>[];
6
- } | string;
7
- export type NormalizedDropdownItemType = {
8
- value: string;
9
- label: string;
10
- icons?: React.ComponentType<any>[];
11
- };
12
- export declare const useNormalizedItems: (items: DropdownItemType[]) => NormalizedDropdownItemType[];
1
+ import React from 'react';
2
+ export type DropdownItemType = {
3
+ value?: string;
4
+ label: string;
5
+ icons?: React.ComponentType<any>[];
6
+ } | string;
7
+ export type NormalizedDropdownItemType = {
8
+ value: string;
9
+ label: string;
10
+ icons?: React.ComponentType<any>[];
11
+ };
12
+ export declare const useNormalizedItems: (items: DropdownItemType[]) => NormalizedDropdownItemType[];
@@ -1,10 +1,10 @@
1
- import { DropdownItemType, NormalizedDropdownItemType } from './useNormalizedItems';
2
- type AsyncDropdownItemType = (inputType: string) => Promise<DropdownItemType[]>;
3
- type SyncDropdownItemType = (inputType: string) => DropdownItemType[];
4
- export type PotentiallyAsyncDropdownItemType = DropdownItemType[] | SyncDropdownItemType | AsyncDropdownItemType;
5
- export declare const useResolvedItems: (itemsOrItemsResolver: PotentiallyAsyncDropdownItemType, debounceTimeout?: number) => {
6
- fetchItems: (arg: string) => void;
7
- loading: boolean;
8
- items: NormalizedDropdownItemType[];
9
- };
10
- export {};
1
+ import { DropdownItemType, NormalizedDropdownItemType } from './useNormalizedItems';
2
+ type AsyncDropdownItemType = (inputType: string) => Promise<DropdownItemType[]>;
3
+ type SyncDropdownItemType = (inputType: string) => DropdownItemType[];
4
+ export type PotentiallyAsyncDropdownItemType = DropdownItemType[] | SyncDropdownItemType | AsyncDropdownItemType;
5
+ export declare const useResolvedItems: (itemsOrItemsResolver: PotentiallyAsyncDropdownItemType, debounceTimeout?: number) => {
6
+ fetchItems: (arg: string) => void;
7
+ loading: boolean;
8
+ items: NormalizedDropdownItemType[];
9
+ };
10
+ export {};
package/dist/utils.d.ts CHANGED
@@ -1,48 +1,48 @@
1
- import { A11yRemovalMessage, A11yStatusMessageOptions } from 'downshift';
2
- import { NormalizedDropdownItemType } from './useNormalizedItems';
3
- import React from 'react';
4
- export declare const EMPTY_INPUT = "";
5
- export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType, input: string | undefined): boolean;
6
- export declare const itemToString: (item: NormalizedDropdownItemType | null) => string;
7
- type useMultiselectUtilsType = {
8
- selectedItems: NormalizedDropdownItemType[];
9
- listItems: NormalizedDropdownItemType[];
10
- selectAll: NormalizedDropdownItemType;
11
- };
12
- export declare const useMultiselectUtils: ({ listItems, selectedItems, selectAll, }: useMultiselectUtilsType) => {
13
- addClickedItemToSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
14
- allListItemsAreSelected: boolean;
15
- clickedItemIsInSelectedItems: (clickedItem: NormalizedDropdownItemType) => boolean;
16
- clickedItemIsSelectAll: (clickedItem: NormalizedDropdownItemType) => boolean;
17
- handleListItemClicked: ({ clickedItem, onChange, setLastRemovedItem, }: {
18
- clickedItem: NormalizedDropdownItemType;
19
- onChange: (value: NormalizedDropdownItemType[]) => void;
20
- setLastRemovedItem: any;
21
- }) => void;
22
- hasSelectedItems: boolean;
23
- listItemsWithoutSelectAll: NormalizedDropdownItemType[];
24
- removeClickedItemFromSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
25
- selectAllCheckboxState: () => boolean | "indeterminate";
26
- selectAllUnselectedItemsInListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
27
- someListItemsAreSelected: boolean;
28
- unselectAllListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
29
- };
30
- type getA11yStatusMessageType<Item> = A11yStatusMessageOptions<Item> & {
31
- selectAllItemIncluded?: boolean;
32
- ariaLabelNoResults?: string;
33
- };
34
- export declare function getA11yStatusMessage<Item>(options: getA11yStatusMessageType<Item>): string;
35
- type getA11ySelectionMessageType<Item> = A11yStatusMessageOptions<Item> & {
36
- selectAllItem?: NormalizedDropdownItemType;
37
- };
38
- export declare function getA11ySelectionMessage(options: getA11ySelectionMessageType<NormalizedDropdownItemType>): string;
39
- type getA11yRemovalMessageType<Item> = A11yRemovalMessage<Item> & {
40
- selectAllItem?: NormalizedDropdownItemType;
41
- removedItem?: NormalizedDropdownItemType;
42
- };
43
- export declare function getA11yRemovalMessage(options: getA11yRemovalMessageType<NormalizedDropdownItemType>): string;
44
- /**A VoiceOver click is always preformed in the center of the clicked element.
45
- This functions expolits that to check if the performed click likely is
46
- made by VoiceOver. */
47
- export declare const isVoiceOverClick: (clickEvent: React.MouseEvent) => boolean;
48
- export {};
1
+ import { A11yRemovalMessage, A11yStatusMessageOptions } from 'downshift';
2
+ import { NormalizedDropdownItemType } from './useNormalizedItems';
3
+ import React from 'react';
4
+ export declare const EMPTY_INPUT = "";
5
+ export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType, input: string | undefined): boolean;
6
+ export declare const itemToString: (item: NormalizedDropdownItemType | null) => string;
7
+ type useMultiselectUtilsType = {
8
+ selectedItems: NormalizedDropdownItemType[];
9
+ listItems: NormalizedDropdownItemType[];
10
+ selectAll: NormalizedDropdownItemType;
11
+ };
12
+ export declare const useMultiselectUtils: ({ listItems, selectedItems, selectAll, }: useMultiselectUtilsType) => {
13
+ addClickedItemToSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
14
+ allListItemsAreSelected: boolean;
15
+ clickedItemIsInSelectedItems: (clickedItem: NormalizedDropdownItemType) => boolean;
16
+ clickedItemIsSelectAll: (clickedItem: NormalizedDropdownItemType) => boolean;
17
+ handleListItemClicked: ({ clickedItem, onChange, setLastRemovedItem, }: {
18
+ clickedItem: NormalizedDropdownItemType;
19
+ onChange: (value: NormalizedDropdownItemType[]) => void;
20
+ setLastRemovedItem: any;
21
+ }) => void;
22
+ hasSelectedItems: boolean;
23
+ listItemsWithoutSelectAll: NormalizedDropdownItemType[];
24
+ removeClickedItemFromSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
25
+ selectAllCheckboxState: () => boolean | "indeterminate";
26
+ selectAllUnselectedItemsInListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
27
+ someListItemsAreSelected: boolean;
28
+ unselectAllListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
29
+ };
30
+ type getA11yStatusMessageType<Item> = A11yStatusMessageOptions<Item> & {
31
+ selectAllItemIncluded?: boolean;
32
+ ariaLabelNoResults?: string;
33
+ };
34
+ export declare function getA11yStatusMessage<Item>(options: getA11yStatusMessageType<Item>): string;
35
+ type getA11ySelectionMessageType<Item> = A11yStatusMessageOptions<Item> & {
36
+ selectAllItem?: NormalizedDropdownItemType;
37
+ };
38
+ export declare function getA11ySelectionMessage(options: getA11ySelectionMessageType<NormalizedDropdownItemType>): string;
39
+ type getA11yRemovalMessageType<Item> = A11yRemovalMessage<Item> & {
40
+ selectAllItem?: NormalizedDropdownItemType;
41
+ removedItem?: NormalizedDropdownItemType;
42
+ };
43
+ export declare function getA11yRemovalMessage(options: getA11yRemovalMessageType<NormalizedDropdownItemType>): string;
44
+ /**A VoiceOver click is always preformed in the center of the clicked element.
45
+ This functions expolits that to check if the performed click likely is
46
+ made by VoiceOver. */
47
+ export declare const isVoiceOverClick: (clickEvent: React.MouseEvent) => boolean;
48
+ export {};