@entur/dropdown 7.3.2-beta.1 → 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/index.d.ts CHANGED
@@ -1,313 +1,7 @@
1
- import { default as default_2 } from 'react';
2
- import { Dispatch } from 'react';
3
- import { SetStateAction } from 'react';
4
-
5
- export declare type AsyncDropdownItemType<ValueType = string> = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => Promise<DropdownItemType<ValueType>[]>;
6
-
7
- export declare const Dropdown: <ValueType extends unknown>(props: DropdownProps<ValueType> & default_2.RefAttributes<HTMLDivElement>) => default_2.ReactElement | null;
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
@@ -0,0 +1,8 @@
1
+
2
+ 'use strict'
3
+
4
+ if (process.env.NODE_ENV === 'production') {
5
+ module.exports = require('./dropdown.cjs.production.min.js')
6
+ } else {
7
+ module.exports = require('./dropdown.cjs.development.js')
8
+ }
package/dist/styles.css CHANGED
@@ -1,82 +1,4 @@
1
- :root {
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
- }/* DO NOT CHANGE!*/
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: unset;
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
+ }
@@ -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,2 @@
1
+ import { DropdownItemType, NormalizedDropdownItemType } from './types';
2
+ export declare const useNormalizedItems: <ValueType = string>(items: DropdownItemType<ValueType>[]) => NormalizedDropdownItemType<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
+ };
@@ -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.1",
3
+ "version": "7.3.2-beta.10",
4
4
  "license": "EUPL-1.2",
5
- "main": "dist/dropdown.cjs.js",
5
+ "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
7
- "types": "dist/index.d.ts",
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": "vite build --watch",
29
- "build": "vite build",
30
- "test": "jest",
31
- "lint": "eslint src"
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.100-beta.1",
39
- "@entur/button": "^3.3.13-beta.1",
40
- "@entur/chip": "^0.9.1-beta.1",
41
- "@entur/form": "^8.3.2-beta.1",
42
- "@entur/icons": "^8.0.1-beta.1",
43
- "@entur/loader": "^0.5.30-beta.1",
44
- "@entur/tokens": "^3.19.2-beta.1",
45
- "@entur/tooltip": "^5.2.13-beta.1",
46
- "@entur/utils": "^0.12.4-beta.1",
47
- "@floating-ui/react-dom": "^2.1.6",
48
- "classnames": "^2.5.1",
49
- "downshift": "^9.0.10"
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
- "@testing-library/jest-dom": "^5.17.0",
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": "1654c868b8fe67eb6b1eac6087a67fc41134ddb0"
46
+ "gitHead": "180506f42d45f01bf4129fa538e414379735a4b4"
65
47
  }