@entur/dropdown 7.3.2-beta.0 → 7.3.2-beta.10
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/Dropdown.d.ts +91 -0
- package/dist/MultiSelect.d.ts +108 -0
- package/dist/NativeDropdown.d.ts +56 -0
- package/dist/SearchableDropdown.d.ts +32 -0
- package/dist/components/DropdownList.d.ts +27 -0
- package/dist/components/FieldComponents.d.ts +33 -0
- package/dist/dropdown.cjs.development.js +1825 -0
- package/dist/dropdown.cjs.development.js.map +1 -0
- package/dist/dropdown.cjs.production.min.js +2 -0
- package/dist/dropdown.cjs.production.min.js.map +1 -0
- package/dist/dropdown.esm.js +1678 -7365
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/index.d.ts +7 -313
- package/dist/index.js +8 -0
- package/dist/styles.css +90 -82
- package/dist/types.d.ts +15 -0
- package/dist/useNormalizedItems.d.ts +2 -0
- package/dist/useResolvedItems.d.ts +6 -0
- package/dist/utils.d.ts +39 -0
- package/package.json +21 -39
- package/dist/dropdown.cjs.js +0 -7522
- package/dist/dropdown.cjs.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,313 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
export
|
|
8
|
-
|
|
9
|
-
export declare type DropdownItemType<ValueType = string> = {
|
|
10
|
-
value?: ValueType;
|
|
11
|
-
label: string;
|
|
12
|
-
icons?: React.ComponentType<any>[];
|
|
13
|
-
itemKey?: string;
|
|
14
|
-
} | string;
|
|
15
|
-
|
|
16
|
-
export declare type DropdownProps<ValueType> = {
|
|
17
|
-
/** Tilgjengelige valg i dropdown-en */
|
|
18
|
-
items: PotentiallyAsyncDropdownItemType<ValueType>;
|
|
19
|
-
/** Valgt verdi. Bruk null for ingen verdi. */
|
|
20
|
-
selectedItem: NormalizedDropdownItemType<ValueType> | null;
|
|
21
|
-
/** Callback ved valg som skal oppdatere selectedItem */
|
|
22
|
-
onChange?: (selectedItem: NormalizedDropdownItemType<ValueType> | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType<ValueType> | null>>;
|
|
23
|
-
/** Beskrivende tekst som forklarer feltet */
|
|
24
|
-
label: string;
|
|
25
|
-
/** Placeholder-tekst når ingenting er satt */
|
|
26
|
-
placeholder?: string;
|
|
27
|
-
/** Om man skal ha mulighet for å nullstille Dropdown-en
|
|
28
|
-
* @default false
|
|
29
|
-
*/
|
|
30
|
-
clearable?: boolean;
|
|
31
|
-
/** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
|
|
32
|
-
selectOnTab?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* @deprecated
|
|
35
|
-
* Bruk selectOnTab i stedet
|
|
36
|
-
*
|
|
37
|
-
* Lar brukeren velge ved å "tab-e" seg ut av komponenten */
|
|
38
|
-
selectOnBlur?: boolean;
|
|
39
|
-
/** Deaktiver dropdown-en */
|
|
40
|
-
disabled?: boolean;
|
|
41
|
-
/** Setter dropdown-en i read-only modus */
|
|
42
|
-
readOnly?: boolean;
|
|
43
|
-
/** Hvilken valideringsvariant som gjelder */
|
|
44
|
-
variant?: VariantType | typeof error | typeof info;
|
|
45
|
-
/** Valideringsmelding, brukes sammen med `variant` */
|
|
46
|
-
feedback?: string;
|
|
47
|
-
/** Tekst eller ikon som kommer først i dropdown-feltet */
|
|
48
|
-
prepend?: default_2.ReactNode;
|
|
49
|
-
/** */
|
|
50
|
-
loading?: boolean;
|
|
51
|
-
/** En tekst som beskriver hva som skjer når man venter på items
|
|
52
|
-
* @default 'Laster inn …'
|
|
53
|
-
*/
|
|
54
|
-
loadingText?: string;
|
|
55
|
-
/** Tekst som kommer opp når det ikke er noe elementer å vise
|
|
56
|
-
* @default "Ingen tilgjengelige valg …"
|
|
57
|
-
*/
|
|
58
|
-
noMatchesText?: string;
|
|
59
|
-
/** Om man skal ha mulighet for å nullstille Dropdown-en
|
|
60
|
-
* @default "fjern valgt"
|
|
61
|
-
*/
|
|
62
|
-
labelClearSelectedItem?: string;
|
|
63
|
-
/** En tooltip som gir ekstra info om inputfeltet */
|
|
64
|
-
labelTooltip?: default_2.ReactNode;
|
|
65
|
-
/** Plasserer labelen statisk på toppen av inputfeltet
|
|
66
|
-
* @default false
|
|
67
|
-
*/
|
|
68
|
-
disableLabelAnimation?: boolean;
|
|
69
|
-
/** Ekstra klassenavn */
|
|
70
|
-
className?: string;
|
|
71
|
-
/** Styling som sendes ned til Dropdown-lista */
|
|
72
|
-
listStyle?: {
|
|
73
|
-
[key: string]: any;
|
|
74
|
-
};
|
|
75
|
-
/** Styling for Dropdown-en */
|
|
76
|
-
style?: {
|
|
77
|
-
[key: string]: any;
|
|
78
|
-
};
|
|
79
|
-
/** Tekst for skjemleser for knapp som lukker listen med valg
|
|
80
|
-
* @default "Lukk liste med valg"
|
|
81
|
-
*/
|
|
82
|
-
ariaLabelCloseList?: string;
|
|
83
|
-
/** Tekst for skjemleser for knapp som åpner listen med valg
|
|
84
|
-
* @default "Åpne liste med valg"
|
|
85
|
-
*/
|
|
86
|
-
ariaLabelOpenList?: string;
|
|
87
|
-
/** Ord for at et element er valgt i entall
|
|
88
|
-
* eks. 'Element 1, _valgt_'
|
|
89
|
-
* @default 'valgt'
|
|
90
|
-
*/
|
|
91
|
-
ariaLabelChosenSingular?: string;
|
|
92
|
-
/** Tekst for skjermleser som beskriver statusen til et element som valgt
|
|
93
|
-
* @default ', valgt element, trykk for å fjerne'
|
|
94
|
-
*/
|
|
95
|
-
ariaLabelSelectedItem?: string;
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
/** @deprecated use variant="negative" instead */
|
|
99
|
-
declare const error = "error";
|
|
100
|
-
|
|
101
|
-
/** @deprecated use variant="negative" instead */
|
|
102
|
-
declare const error_2 = "error";
|
|
103
|
-
|
|
104
|
-
/** @deprecated use variant="information" instead */
|
|
105
|
-
declare const info = "info";
|
|
106
|
-
|
|
107
|
-
/** @deprecated use variant="information" instead */
|
|
108
|
-
declare const info_2 = "info";
|
|
109
|
-
|
|
110
|
-
export declare const MultiSelect: <ValueType extends unknown>(props: Omit<DropdownProps<ValueType>, "onChange" | "selectedItem"> & {
|
|
111
|
-
/** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
|
|
112
|
-
*/
|
|
113
|
-
selectedItems: NormalizedDropdownItemType<ValueType>[];
|
|
114
|
-
/** Callback med alle valgte verdier.
|
|
115
|
-
* Bruk denne til å oppdatere selectedItems-listen */
|
|
116
|
-
onChange?: ((selectedItems: NormalizedDropdownItemType<ValueType>[]) => void | default_2.Dispatch<default_2.SetStateAction<NormalizedDropdownItemType<ValueType>[]>>) | undefined;
|
|
117
|
-
/** Filtreringen som brukes når man skriver inn tekst i inputfeltet
|
|
118
|
-
* @default Regex-test som sjekker om item.label inneholder input-teksten
|
|
119
|
-
*/
|
|
120
|
-
itemFilter?: ((item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean) | undefined;
|
|
121
|
-
/** Skjuler «Velg alle» fra listen med valg
|
|
122
|
-
* @default false
|
|
123
|
-
*/
|
|
124
|
-
hideSelectAll?: boolean;
|
|
125
|
-
/** Antall millisekunder man venter før man kaller en potensiell items-funksjon
|
|
126
|
-
* @default 250
|
|
127
|
-
*/
|
|
128
|
-
debounceTimeout?: number;
|
|
129
|
-
/** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
|
|
130
|
-
* @default 10
|
|
131
|
-
*/
|
|
132
|
-
maxChips?: number;
|
|
133
|
-
/** Resetter input etter at et element er valgt i listen
|
|
134
|
-
* @default false
|
|
135
|
-
*/
|
|
136
|
-
clearInputOnSelect?: boolean;
|
|
137
|
-
/** Teksten som vises for «Velg alle»-elementet i listen
|
|
138
|
-
* @default "Velg alle"
|
|
139
|
-
*/
|
|
140
|
-
labelSelectAll?: string;
|
|
141
|
-
/** Teksten som vises for «Velg alle»-elementet i listen
|
|
142
|
-
* @default "Alle valgt"
|
|
143
|
-
*/
|
|
144
|
-
labelAllItemsSelected?: string;
|
|
145
|
-
/** Skjermleser-tekst som for å fjerne alle valg
|
|
146
|
-
* @default "Fjern valgte"
|
|
147
|
-
*/
|
|
148
|
-
labelClearAllItems?: string;
|
|
149
|
-
/** Tekst for skjemleser på knapper for å fjerne valgt element
|
|
150
|
-
* @default "trykk for å fjerne valg"
|
|
151
|
-
*/
|
|
152
|
-
ariaLabelRemoveSelected?: string;
|
|
153
|
-
/** Tekst for skjemleser for å indikere at et element er valgt
|
|
154
|
-
* @default "valgte"
|
|
155
|
-
*/
|
|
156
|
-
ariaLabelChosenPlural?: string;
|
|
157
|
-
/** Tekst for skjemleser for å hoppe til input-feltet
|
|
158
|
-
* @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
|
|
159
|
-
*/
|
|
160
|
-
ariaLabelJumpToInput?: string;
|
|
161
|
-
} & default_2.RefAttributes<HTMLInputElement>) => default_2.ReactElement | null;
|
|
162
|
-
|
|
163
|
-
export declare type MultiSelectProps<ValueType> = Omit<DropdownProps<ValueType>, 'selectedItem' | 'onChange'> & {
|
|
164
|
-
/** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
|
|
165
|
-
*/
|
|
166
|
-
selectedItems: NormalizedDropdownItemType<ValueType>[];
|
|
167
|
-
/** Callback med alle valgte verdier.
|
|
168
|
-
* Bruk denne til å oppdatere selectedItems-listen */
|
|
169
|
-
onChange?: (selectedItems: NormalizedDropdownItemType<ValueType>[]) => void | Dispatch<SetStateAction<NormalizedDropdownItemType<ValueType>[]>>;
|
|
170
|
-
/** Filtreringen som brukes når man skriver inn tekst i inputfeltet
|
|
171
|
-
* @default Regex-test som sjekker om item.label inneholder input-teksten
|
|
172
|
-
*/
|
|
173
|
-
itemFilter?: (item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean;
|
|
174
|
-
/** Skjuler «Velg alle» fra listen med valg
|
|
175
|
-
* @default false
|
|
176
|
-
*/
|
|
177
|
-
hideSelectAll?: boolean;
|
|
178
|
-
/** Antall millisekunder man venter før man kaller en potensiell items-funksjon
|
|
179
|
-
* @default 250
|
|
180
|
-
*/
|
|
181
|
-
debounceTimeout?: number;
|
|
182
|
-
/** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
|
|
183
|
-
* @default 10
|
|
184
|
-
*/
|
|
185
|
-
maxChips?: number;
|
|
186
|
-
/** Resetter input etter at et element er valgt i listen
|
|
187
|
-
* @default false
|
|
188
|
-
*/
|
|
189
|
-
clearInputOnSelect?: boolean;
|
|
190
|
-
/** Teksten som vises for «Velg alle»-elementet i listen
|
|
191
|
-
* @default "Velg alle"
|
|
192
|
-
*/
|
|
193
|
-
labelSelectAll?: string;
|
|
194
|
-
/** Teksten som vises for «Velg alle»-elementet i listen
|
|
195
|
-
* @default "Alle valgt"
|
|
196
|
-
*/
|
|
197
|
-
labelAllItemsSelected?: string;
|
|
198
|
-
/** Skjermleser-tekst som for å fjerne alle valg
|
|
199
|
-
* @default "Fjern valgte"
|
|
200
|
-
*/
|
|
201
|
-
labelClearAllItems?: string;
|
|
202
|
-
/** Tekst for skjemleser på knapper for å fjerne valgt element
|
|
203
|
-
* @default "trykk for å fjerne valg"
|
|
204
|
-
*/
|
|
205
|
-
ariaLabelRemoveSelected?: string;
|
|
206
|
-
/** Tekst for skjemleser for å indikere at et element er valgt
|
|
207
|
-
* @default "valgte"
|
|
208
|
-
*/
|
|
209
|
-
ariaLabelChosenPlural?: string;
|
|
210
|
-
/** Tekst for skjemleser for å hoppe til input-feltet
|
|
211
|
-
* @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
|
|
212
|
-
*/
|
|
213
|
-
ariaLabelJumpToInput?: string;
|
|
214
|
-
};
|
|
215
|
-
|
|
216
|
-
export declare const NativeDropdown: <ValueType extends string | number>(props: NativeDropdownProps<ValueType> & default_2.RefAttributes<HTMLSelectElement>) => default_2.ReactElement | null;
|
|
217
|
-
|
|
218
|
-
export declare type NativeDropdownProps<ValueType> = {
|
|
219
|
-
/** Ekstra klassenavn */
|
|
220
|
-
className?: string;
|
|
221
|
-
/**
|
|
222
|
-
* For å deaktivere dropdow-nen
|
|
223
|
-
* @default false
|
|
224
|
-
**/
|
|
225
|
-
disabled?: boolean;
|
|
226
|
-
/** Valideringsmelding, brukes sammen med `variant` */
|
|
227
|
-
feedback?: string;
|
|
228
|
-
/** Alle valg for dropdown-en å ha */
|
|
229
|
-
items: PotentiallyAsyncDropdownItemType<ValueType>;
|
|
230
|
-
/** Beskrivende tekst som forklarer feltet */
|
|
231
|
-
label: string;
|
|
232
|
-
/** En callback for endringer av value
|
|
233
|
-
* Obs: merk at parameter her denne ikke er samme som i en HTML select.
|
|
234
|
-
* Bruk { target } hvis du trenger info om select-elementet som ble trykket på
|
|
235
|
-
*/
|
|
236
|
-
onChange?: ({ value, selectedItem, target, }: {
|
|
237
|
-
value: string;
|
|
238
|
-
selectedItem: NormalizedDropdownItemType<ValueType> | null;
|
|
239
|
-
target: EventTarget & HTMLSelectElement;
|
|
240
|
-
}) => void;
|
|
241
|
-
/** Tekst eller ikon som kommer før dropdown-en */
|
|
242
|
-
prepend?: default_2.ReactNode;
|
|
243
|
-
/**
|
|
244
|
-
* Setter dropdown-en i read-only modus
|
|
245
|
-
* @default false
|
|
246
|
-
**/
|
|
247
|
-
readOnly?: boolean;
|
|
248
|
-
/** Den valgte verdien som NormalizedDropdownItemType
|
|
249
|
-
* (Brukes når komponenten er 'controlled')
|
|
250
|
-
*/
|
|
251
|
-
selectedItem?: NormalizedDropdownItemType<ValueType> | null;
|
|
252
|
-
/** Den valgte verdien som sting
|
|
253
|
-
* (Brukes når komponenten er 'controlled)
|
|
254
|
-
*/
|
|
255
|
-
value?: string;
|
|
256
|
-
/** Hvilken valideringsvariant som gjelder*/
|
|
257
|
-
variant?: VariantType | typeof error_2 | typeof info_2;
|
|
258
|
-
/** Plasserer labelen statisk på toppen av inputfeltet
|
|
259
|
-
* @default false
|
|
260
|
-
*/
|
|
261
|
-
disableLabelAnimation?: boolean;
|
|
262
|
-
[key: string]: any;
|
|
263
|
-
};
|
|
264
|
-
|
|
265
|
-
export declare type NormalizedDropdownItemType<ValueType = string> = {
|
|
266
|
-
value: ValueType;
|
|
267
|
-
label: string;
|
|
268
|
-
icons?: React.ComponentType<any>[];
|
|
269
|
-
itemKey?: string;
|
|
270
|
-
};
|
|
271
|
-
|
|
272
|
-
export declare type PotentiallyAsyncDropdownItemType<ValueType = string> = DropdownItemType<ValueType>[] | SyncDropdownItemType<ValueType> | AsyncDropdownItemType<ValueType>;
|
|
273
|
-
|
|
274
|
-
export declare const SearchableDropdown: <ValueType extends unknown>(props: DropdownProps<ValueType> & {
|
|
275
|
-
/** Filtreringen som brukes når man skriver inn tekst i inputfeltet
|
|
276
|
-
* @default Regex-test som sjekker om item.label inneholder input-teksten
|
|
277
|
-
*/
|
|
278
|
-
itemFilter?: ((item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean) | undefined;
|
|
279
|
-
/** Antall millisekunder man venter etter tekstinput før det gjøres kall for å oppdatere items
|
|
280
|
-
* Denne er kun relevant hvis du sender inn en funksjon som items.
|
|
281
|
-
*/
|
|
282
|
-
debounceTimeout?: number;
|
|
283
|
-
/** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
|
|
284
|
-
* @default "Ingen treff for søket"
|
|
285
|
-
*/
|
|
286
|
-
noMatchesText?: string;
|
|
287
|
-
} & default_2.RefAttributes<HTMLInputElement>) => default_2.ReactElement | null;
|
|
288
|
-
|
|
289
|
-
export declare type SearchableDropdownProps<ValueType> = DropdownProps<ValueType> & {
|
|
290
|
-
/** Filtreringen som brukes når man skriver inn tekst i inputfeltet
|
|
291
|
-
* @default Regex-test som sjekker om item.label inneholder input-teksten
|
|
292
|
-
*/
|
|
293
|
-
itemFilter?: (item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean;
|
|
294
|
-
/** Antall millisekunder man venter etter tekstinput før det gjøres kall for å oppdatere items
|
|
295
|
-
* Denne er kun relevant hvis du sender inn en funksjon som items.
|
|
296
|
-
*/
|
|
297
|
-
debounceTimeout?: number;
|
|
298
|
-
/** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
|
|
299
|
-
* @default "Ingen treff for søket"
|
|
300
|
-
*/
|
|
301
|
-
noMatchesText?: string;
|
|
302
|
-
};
|
|
303
|
-
|
|
304
|
-
export declare type SyncDropdownItemType<ValueType = string> = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => DropdownItemType<ValueType>[];
|
|
305
|
-
|
|
306
|
-
declare type VariantType = 'success' | 'negative' | 'warning' | 'information';
|
|
307
|
-
|
|
308
|
-
export { }
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
declare module 'react' {
|
|
312
|
-
function forwardRef<T, P = object>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
|
|
313
|
-
}
|
|
1
|
+
import './index.scss';
|
|
2
|
+
export type { NormalizedDropdownItemType, DropdownItemType } from './types';
|
|
3
|
+
export * from './SearchableDropdown';
|
|
4
|
+
export * from './MultiSelect';
|
|
5
|
+
export * from './Dropdown';
|
|
6
|
+
export * from './NativeDropdown';
|
|
7
|
+
export * from './types';
|
package/dist/index.js
ADDED
package/dist/styles.css
CHANGED
|
@@ -1,82 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
--eds-dropdown: 1;
|
|
3
|
-
}/* DO NOT CHANGE!*/
|
|
4
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
|
-
.eds-dropdown__list {
|
|
6
|
-
position: absolute;
|
|
7
|
-
box-sizing: border-box;
|
|
8
|
-
max-height: 20rem;
|
|
9
|
-
overflow-y: auto;
|
|
10
|
-
padding: 0;
|
|
11
|
-
margin: 0;
|
|
12
|
-
list-style: none;
|
|
13
|
-
border: 0.125rem solid var(--components-form-basemenu-border);
|
|
14
|
-
border-radius: 0.25rem;
|
|
15
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
16
|
-
cursor: default;
|
|
17
|
-
z-index: 20;
|
|
18
|
-
}
|
|
19
|
-
.eds-dropdown__list:focus {
|
|
20
|
-
outline: none;
|
|
21
|
-
}
|
|
22
|
-
.eds-dropdown__list__item {
|
|
23
|
-
display: flex;
|
|
24
|
-
align-items: center;
|
|
25
|
-
justify-content: flex-start;
|
|
26
|
-
padding: 0.75rem 1rem;
|
|
27
|
-
font-family: inherit;
|
|
28
|
-
font-size: 1rem;
|
|
29
|
-
word-break: break-word;
|
|
30
|
-
line-height: 1.25rem;
|
|
31
|
-
overflow-x: hidden;
|
|
32
|
-
color: var(--components-form-basemenu-text);
|
|
33
|
-
background-color: var(--components-form-basemenu-fill-default);
|
|
34
|
-
}
|
|
35
|
-
.eds-dropdown__list__item:last-child {
|
|
36
|
-
border-bottom: none;
|
|
37
|
-
}
|
|
38
|
-
.eds-dropdown__list__item__text {
|
|
39
|
-
flex: 1;
|
|
40
|
-
cursor: default;
|
|
41
|
-
}
|
|
42
|
-
.eds-dropdown__list__item__icon {
|
|
43
|
-
margin-left: 0.75rem;
|
|
44
|
-
}
|
|
45
|
-
.eds-dropdown__list__item__checkbox {
|
|
46
|
-
pointer-events: none;
|
|
47
|
-
}
|
|
48
|
-
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
|
|
49
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
50
|
-
}
|
|
51
|
-
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
|
|
52
|
-
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
|
|
53
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
54
|
-
}
|
|
55
|
-
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
|
|
56
|
-
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
|
|
57
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
58
|
-
}
|
|
59
|
-
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
|
|
60
|
-
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
|
|
61
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
62
|
-
}
|
|
63
|
-
.eds-dropdown__list__item--highlighted {
|
|
64
|
-
background-color: var(--components-form-basemenu-fill-hover);
|
|
65
|
-
}
|
|
66
|
-
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
|
|
67
|
-
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
|
|
68
|
-
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
|
|
69
|
-
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
|
|
70
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
71
|
-
border-color: transparent;
|
|
72
|
-
}
|
|
73
|
-
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
|
|
74
|
-
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
|
|
75
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
76
|
-
}
|
|
77
|
-
.eds-dropdown__list__item--selected {
|
|
78
|
-
background-color: var(--components-form-basemenu-fill-hover);
|
|
79
|
-
}/* DO NOT CHANGE!*/
|
|
1
|
+
/* DO NOT CHANGE!*/
|
|
80
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
81
3
|
.eds-contrast .eds-dropdown__selected-item-tag {
|
|
82
4
|
background: var(--components-chip-standard-default);
|
|
@@ -187,7 +109,85 @@
|
|
|
187
109
|
}
|
|
188
110
|
.eds-contrast .eds-dropdown__appendix__toggle-button:focus-visible {
|
|
189
111
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
190
|
-
}
|
|
112
|
+
}
|
|
113
|
+
/* DO NOT CHANGE!*/
|
|
114
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
115
|
+
.eds-dropdown__list {
|
|
116
|
+
position: absolute;
|
|
117
|
+
box-sizing: border-box;
|
|
118
|
+
max-height: 20rem;
|
|
119
|
+
overflow-y: auto;
|
|
120
|
+
padding: 0;
|
|
121
|
+
margin: 0;
|
|
122
|
+
list-style: none;
|
|
123
|
+
border: 0.125rem solid var(--components-form-basemenu-border);
|
|
124
|
+
border-radius: 0.25rem;
|
|
125
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
126
|
+
cursor: default;
|
|
127
|
+
z-index: 20;
|
|
128
|
+
}
|
|
129
|
+
.eds-dropdown__list:focus {
|
|
130
|
+
outline: none;
|
|
131
|
+
}
|
|
132
|
+
.eds-dropdown__list__item {
|
|
133
|
+
display: flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
justify-content: flex-start;
|
|
136
|
+
padding: 0.75rem 1rem;
|
|
137
|
+
font-family: inherit;
|
|
138
|
+
font-size: 1rem;
|
|
139
|
+
word-break: break-word;
|
|
140
|
+
line-height: 1.25rem;
|
|
141
|
+
overflow-x: hidden;
|
|
142
|
+
color: var(--components-form-basemenu-text);
|
|
143
|
+
background-color: var(--components-form-basemenu-fill-default);
|
|
144
|
+
}
|
|
145
|
+
.eds-dropdown__list__item:last-child {
|
|
146
|
+
border-bottom: none;
|
|
147
|
+
}
|
|
148
|
+
.eds-dropdown__list__item__text {
|
|
149
|
+
flex: 1;
|
|
150
|
+
cursor: default;
|
|
151
|
+
}
|
|
152
|
+
.eds-dropdown__list__item__icon {
|
|
153
|
+
margin-left: 0.75rem;
|
|
154
|
+
}
|
|
155
|
+
.eds-dropdown__list__item__checkbox {
|
|
156
|
+
pointer-events: none;
|
|
157
|
+
}
|
|
158
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
|
|
159
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
160
|
+
}
|
|
161
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
|
|
162
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
|
|
163
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
164
|
+
}
|
|
165
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
|
|
166
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
|
|
167
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
168
|
+
}
|
|
169
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
|
|
170
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
|
|
171
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
172
|
+
}
|
|
173
|
+
.eds-dropdown__list__item--highlighted {
|
|
174
|
+
background-color: var(--components-form-basemenu-fill-hover);
|
|
175
|
+
}
|
|
176
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
|
|
177
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
|
|
178
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
|
|
179
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
|
|
180
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
181
|
+
border-color: transparent;
|
|
182
|
+
}
|
|
183
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
|
|
184
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
|
|
185
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
186
|
+
}
|
|
187
|
+
.eds-dropdown__list__item--selected {
|
|
188
|
+
background-color: var(--components-form-basemenu-fill-hover);
|
|
189
|
+
}
|
|
190
|
+
/* DO NOT CHANGE!*/
|
|
191
191
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
192
192
|
.eds-dropdown {
|
|
193
193
|
cursor: pointer;
|
|
@@ -234,6 +234,10 @@
|
|
|
234
234
|
.eds-dropdown--searchable__selected-item--hidden {
|
|
235
235
|
flex: 0;
|
|
236
236
|
}
|
|
237
|
+
.eds-dropdown--searchable :not(.eds-dropdown--searchable__selected-item--hidden) + ::-moz-placeholder {
|
|
238
|
+
-moz-transition: none;
|
|
239
|
+
transition: none;
|
|
240
|
+
}
|
|
237
241
|
.eds-dropdown--searchable :not(.eds-dropdown--searchable__selected-item--hidden) + ::placeholder {
|
|
238
242
|
transition: none;
|
|
239
243
|
}
|
|
@@ -251,7 +255,8 @@
|
|
|
251
255
|
padding: 1.25rem 0rem 0.25rem;
|
|
252
256
|
}
|
|
253
257
|
.eds-dropdown--multiselect__selected-items-and-input--filled .eds-dropdown__input {
|
|
254
|
-
padding:
|
|
258
|
+
padding: 0;
|
|
259
|
+
padding: initial;
|
|
255
260
|
min-height: 1.5rem;
|
|
256
261
|
}
|
|
257
262
|
.eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip:focus {
|
|
@@ -271,4 +276,7 @@
|
|
|
271
276
|
}
|
|
272
277
|
.eds-contrast .eds-dropdown--native option {
|
|
273
278
|
color: var(--components-form-basemenu-text);
|
|
274
|
-
}
|
|
279
|
+
}
|
|
280
|
+
:root {
|
|
281
|
+
--eds-dropdown: 1;
|
|
282
|
+
}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type DropdownItemType<ValueType = string> = {
|
|
2
|
+
value?: ValueType;
|
|
3
|
+
label: string;
|
|
4
|
+
icons?: React.ComponentType<any>[];
|
|
5
|
+
itemKey?: string;
|
|
6
|
+
} | string;
|
|
7
|
+
export type NormalizedDropdownItemType<ValueType = string> = {
|
|
8
|
+
value: ValueType;
|
|
9
|
+
label: string;
|
|
10
|
+
icons?: React.ComponentType<any>[];
|
|
11
|
+
itemKey?: string;
|
|
12
|
+
};
|
|
13
|
+
export type AsyncDropdownItemType<ValueType = string> = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => Promise<DropdownItemType<ValueType>[]>;
|
|
14
|
+
export type SyncDropdownItemType<ValueType = string> = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => DropdownItemType<ValueType>[];
|
|
15
|
+
export type PotentiallyAsyncDropdownItemType<ValueType = string> = DropdownItemType<ValueType>[] | SyncDropdownItemType<ValueType> | AsyncDropdownItemType<ValueType>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { PotentiallyAsyncDropdownItemType, NormalizedDropdownItemType } from './types';
|
|
2
|
+
export declare const useResolvedItems: <ValueType extends unknown>(itemsOrItemsResolver: PotentiallyAsyncDropdownItemType<ValueType>, debounceTimeout?: number) => {
|
|
3
|
+
fetchItems: (query?: string) => void;
|
|
4
|
+
loading: boolean;
|
|
5
|
+
items: NormalizedDropdownItemType<ValueType>[];
|
|
6
|
+
};
|
package/dist/utils.d.ts
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { UseComboboxState } from 'downshift';
|
|
2
|
+
import { NormalizedDropdownItemType } from './types';
|
|
3
|
+
declare module 'react' {
|
|
4
|
+
function forwardRef<T, P = object>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
|
|
5
|
+
}
|
|
6
|
+
export declare const EMPTY_INPUT = "";
|
|
7
|
+
export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType<any>, input: string | undefined): boolean;
|
|
8
|
+
export declare function noFilter<ValueType>(item: NormalizedDropdownItemType<ValueType>, input: string | undefined): boolean;
|
|
9
|
+
export declare const itemToString: (item: NormalizedDropdownItemType<any> | null) => string;
|
|
10
|
+
export declare const itemToKey: (item: NormalizedDropdownItemType<any> | null) => any;
|
|
11
|
+
export declare const isFunctionWithQueryArgument: (object: any) => boolean;
|
|
12
|
+
export declare const clamp: (val: number, min?: number, max?: number) => number;
|
|
13
|
+
type useMultiselectUtilsType<ValueType> = {
|
|
14
|
+
selectedItems: NormalizedDropdownItemType<ValueType>[];
|
|
15
|
+
listItems: NormalizedDropdownItemType<ValueType | string>[];
|
|
16
|
+
selectAll: NormalizedDropdownItemType<string>;
|
|
17
|
+
};
|
|
18
|
+
export declare const useMultiselectUtils: <ValueType>({ listItems, selectedItems, selectAll, }: useMultiselectUtilsType<ValueType>) => {
|
|
19
|
+
addClickedItemToSelectedItems: (clickedItem: NormalizedDropdownItemType<ValueType>, onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void) => void;
|
|
20
|
+
allListItemsAreSelected: boolean;
|
|
21
|
+
clickedItemIsInSelectedItems: (clickedItem: NormalizedDropdownItemType<ValueType>) => boolean;
|
|
22
|
+
clickedItemIsSelectAll: (clickedItem: NormalizedDropdownItemType<string | ValueType>) => clickedItem is NormalizedDropdownItemType<string>;
|
|
23
|
+
handleListItemClicked: ({ clickedItem, onChange, }: {
|
|
24
|
+
clickedItem: NormalizedDropdownItemType<any>;
|
|
25
|
+
onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void;
|
|
26
|
+
}) => void;
|
|
27
|
+
hasSelectedItems: boolean;
|
|
28
|
+
listItemsWithoutSelectAll: NormalizedDropdownItemType<ValueType>[];
|
|
29
|
+
removeClickedItemFromSelectedItems: (clickedItem: NormalizedDropdownItemType<ValueType>, onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void) => void;
|
|
30
|
+
selectAllCheckboxState: () => boolean | "indeterminate";
|
|
31
|
+
selectAllUnselectedItemsInListItems: (onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void) => void;
|
|
32
|
+
someListItemsAreSelected: boolean;
|
|
33
|
+
unselectAllListItems: (onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void) => void;
|
|
34
|
+
};
|
|
35
|
+
export declare function getA11yStatusMessage<ValueType>(options: UseComboboxState<NormalizedDropdownItemType<ValueType>> & {
|
|
36
|
+
selectAllItemIncluded?: boolean;
|
|
37
|
+
resultCount: number;
|
|
38
|
+
}): string;
|
|
39
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/dropdown",
|
|
3
|
-
"version": "7.3.2-beta.
|
|
3
|
+
"version": "7.3.2-beta.10",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"main": "dist/
|
|
5
|
+
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/dropdown.esm.js",
|
|
7
|
-
"
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"types": "./dist/index.d.ts",
|
|
11
|
-
"import": "./dist/dropdown.esm.js",
|
|
12
|
-
"require": "./dist/dropdown.cjs.js"
|
|
13
|
-
},
|
|
14
|
-
"./dist/*": "./dist/*"
|
|
15
|
-
},
|
|
7
|
+
"typings": "dist/index.d.ts",
|
|
16
8
|
"files": [
|
|
17
9
|
"dist"
|
|
18
10
|
],
|
|
@@ -25,41 +17,31 @@
|
|
|
25
17
|
"access": "public"
|
|
26
18
|
},
|
|
27
19
|
"scripts": {
|
|
28
|
-
"start": "
|
|
29
|
-
"build": "
|
|
30
|
-
"test": "
|
|
31
|
-
"lint": "
|
|
20
|
+
"start": "dts watch --noClean",
|
|
21
|
+
"build": "dts build",
|
|
22
|
+
"test": "dts test",
|
|
23
|
+
"lint": "dts lint src"
|
|
32
24
|
},
|
|
33
25
|
"peerDependencies": {
|
|
34
26
|
"react": ">=16.8.0",
|
|
35
27
|
"react-dom": ">=16.8.0"
|
|
36
28
|
},
|
|
37
29
|
"dependencies": {
|
|
38
|
-
"@entur/a11y": "^0.2.
|
|
39
|
-
"@entur/button": "^3.3.13-beta.
|
|
40
|
-
"@entur/chip": "^0.9.1-beta.
|
|
41
|
-
"@entur/form": "^8.3.2-beta.
|
|
42
|
-
"@entur/icons": "^8.0.
|
|
43
|
-
"@entur/loader": "^0.5.30-beta.
|
|
44
|
-
"@entur/tokens": "^3.19.
|
|
45
|
-
"@entur/tooltip": "^5.2.13-beta.
|
|
46
|
-
"@entur/utils": "^0.12.
|
|
47
|
-
"@floating-ui/react-dom": "^2.1.
|
|
48
|
-
"classnames": "^2.
|
|
49
|
-
"downshift": "^9.0.
|
|
30
|
+
"@entur/a11y": "^0.2.99",
|
|
31
|
+
"@entur/button": "^3.3.13-beta.10",
|
|
32
|
+
"@entur/chip": "^0.9.1-beta.10",
|
|
33
|
+
"@entur/form": "^8.3.2-beta.10",
|
|
34
|
+
"@entur/icons": "^8.0.0",
|
|
35
|
+
"@entur/loader": "^0.5.30-beta.10",
|
|
36
|
+
"@entur/tokens": "^3.19.1",
|
|
37
|
+
"@entur/tooltip": "^5.2.13-beta.10",
|
|
38
|
+
"@entur/utils": "^0.12.3",
|
|
39
|
+
"@floating-ui/react-dom": "^2.1.0",
|
|
40
|
+
"classnames": "^2.3.1",
|
|
41
|
+
"downshift": "^9.0.8"
|
|
50
42
|
},
|
|
51
43
|
"devDependencies": {
|
|
52
|
-
"
|
|
53
|
-
"@testing-library/react": "^10.4.9",
|
|
54
|
-
"@testing-library/user-event": "14.6.1",
|
|
55
|
-
"@vitejs/plugin-react": "^5.0.1",
|
|
56
|
-
"eslint": "^7.32.0",
|
|
57
|
-
"jest": "^29.0.0",
|
|
58
|
-
"jest-environment-jsdom": "^29.0.0",
|
|
59
|
-
"ts-jest": "^29.0.0",
|
|
60
|
-
"typescript": "^5.9.2",
|
|
61
|
-
"vite": "^7.1.3",
|
|
62
|
-
"vite-plugin-dts": "^4.5.4"
|
|
44
|
+
"dts-cli": "2.0.5"
|
|
63
45
|
},
|
|
64
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "180506f42d45f01bf4129fa538e414379735a4b4"
|
|
65
47
|
}
|