@entur/dropdown 7.3.0 → 7.3.2-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/index.d.ts CHANGED
@@ -1,7 +1,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';
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
+ }
package/dist/styles.css CHANGED
@@ -1,4 +1,6 @@
1
- /* DO NOT CHANGE!*/
1
+ :root {
2
+ --eds-dropdown: 1;
3
+ }/* DO NOT CHANGE!*/
2
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
5
  .eds-dropdown__list {
4
6
  position: absolute;
@@ -74,8 +76,7 @@
74
76
  }
75
77
  .eds-dropdown__list__item--selected {
76
78
  background-color: var(--components-form-basemenu-fill-hover);
77
- }
78
- /* DO NOT CHANGE!*/
79
+ }/* DO NOT CHANGE!*/
79
80
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
80
81
  .eds-contrast .eds-dropdown__selected-item-tag {
81
82
  background: var(--components-chip-standard-default);
@@ -186,8 +187,7 @@
186
187
  }
187
188
  .eds-contrast .eds-dropdown__appendix__toggle-button:focus-visible {
188
189
  outline-color: var(--basecolors-stroke-focus-standard);
189
- }
190
- /* DO NOT CHANGE!*/
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,10 +234,6 @@
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
- }
241
237
  .eds-dropdown--searchable :not(.eds-dropdown--searchable__selected-item--hidden) + ::placeholder {
242
238
  transition: none;
243
239
  }
@@ -255,8 +251,7 @@
255
251
  padding: 1.25rem 0rem 0.25rem;
256
252
  }
257
253
  .eds-dropdown--multiselect__selected-items-and-input--filled .eds-dropdown__input {
258
- padding: 0;
259
- padding: initial;
254
+ padding: unset;
260
255
  min-height: 1.5rem;
261
256
  }
262
257
  .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip:focus {
@@ -276,7 +271,4 @@
276
271
  }
277
272
  .eds-contrast .eds-dropdown--native option {
278
273
  color: var(--components-form-basemenu-text);
279
- }
280
- :root {
281
- --eds-dropdown: 1;
282
- }
274
+ }
package/package.json CHANGED
@@ -1,10 +1,18 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "7.3.0",
3
+ "version": "7.3.2-beta.0",
4
4
  "license": "EUPL-1.2",
5
- "main": "dist/index.js",
5
+ "main": "dist/dropdown.cjs.js",
6
6
  "module": "dist/dropdown.esm.js",
7
- "typings": "dist/index.d.ts",
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
+ },
8
16
  "files": [
9
17
  "dist"
10
18
  ],
@@ -17,31 +25,41 @@
17
25
  "access": "public"
18
26
  },
19
27
  "scripts": {
20
- "start": "dts watch --noClean",
21
- "build": "dts build",
22
- "test": "dts test",
23
- "lint": "dts lint src"
28
+ "start": "vite build --watch",
29
+ "build": "vite build",
30
+ "test": "jest",
31
+ "lint": "eslint src"
24
32
  },
25
33
  "peerDependencies": {
26
34
  "react": ">=16.8.0",
27
35
  "react-dom": ">=16.8.0"
28
36
  },
29
37
  "dependencies": {
30
- "@entur/a11y": "^0.2.99",
31
- "@entur/button": "^3.3.12",
32
- "@entur/chip": "^0.9.0",
33
- "@entur/form": "^8.3.1",
34
- "@entur/icons": "^8.0.0",
35
- "@entur/loader": "^0.5.29",
36
- "@entur/tokens": "^3.19.1",
37
- "@entur/tooltip": "^5.2.12",
38
- "@entur/utils": "^0.12.3",
39
- "@floating-ui/react-dom": "^2.1.0",
40
- "classnames": "^2.3.1",
41
- "downshift": "^9.0.8"
38
+ "@entur/a11y": "^0.2.100-beta.0",
39
+ "@entur/button": "^3.3.13-beta.0",
40
+ "@entur/chip": "^0.9.1-beta.0",
41
+ "@entur/form": "^8.3.2-beta.0",
42
+ "@entur/icons": "^8.0.1-beta.0",
43
+ "@entur/loader": "^0.5.30-beta.0",
44
+ "@entur/tokens": "^3.19.2-beta.0",
45
+ "@entur/tooltip": "^5.2.13-beta.0",
46
+ "@entur/utils": "^0.12.4-beta.0",
47
+ "@floating-ui/react-dom": "^2.1.6",
48
+ "classnames": "^2.5.1",
49
+ "downshift": "^9.0.10"
42
50
  },
43
51
  "devDependencies": {
44
- "dts-cli": "2.0.5"
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"
45
63
  },
46
- "gitHead": "f332d7ab2cffcbf373183520965f838daf64e8c5"
64
+ "gitHead": "414181fa2084722438238256a9aa32e304896b9d"
47
65
  }
@@ -1,91 +0,0 @@
1
- import React, { Dispatch, SetStateAction } from 'react';
2
- import { VariantType } from '@entur/utils';
3
- import { NormalizedDropdownItemType, PotentiallyAsyncDropdownItemType } from './types';
4
- import './Dropdown.scss';
5
- /** @deprecated use variant="information" instead */
6
- declare const info = "info";
7
- /** @deprecated use variant="negative" instead */
8
- declare const error = "error";
9
- export type DropdownProps<ValueType> = {
10
- /** Tilgjengelige valg i dropdown-en */
11
- items: PotentiallyAsyncDropdownItemType<ValueType>;
12
- /** Valgt verdi. Bruk null for ingen verdi. */
13
- selectedItem: NormalizedDropdownItemType<ValueType> | null;
14
- /** Callback ved valg som skal oppdatere selectedItem */
15
- onChange?: (selectedItem: NormalizedDropdownItemType<ValueType> | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType<ValueType> | null>>;
16
- /** Beskrivende tekst som forklarer feltet */
17
- label: string;
18
- /** Placeholder-tekst når ingenting er satt */
19
- placeholder?: string;
20
- /** Om man skal ha mulighet for å nullstille Dropdown-en
21
- * @default false
22
- */
23
- clearable?: boolean;
24
- /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
25
- selectOnTab?: boolean;
26
- /**
27
- * @deprecated
28
- * Bruk selectOnTab i stedet
29
- *
30
- * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
31
- selectOnBlur?: boolean;
32
- /** Deaktiver dropdown-en */
33
- disabled?: boolean;
34
- /** Setter dropdown-en i read-only modus */
35
- readOnly?: boolean;
36
- /** Hvilken valideringsvariant som gjelder */
37
- variant?: VariantType | typeof error | typeof info;
38
- /** Valideringsmelding, brukes sammen med `variant` */
39
- feedback?: string;
40
- /** Tekst eller ikon som kommer først i dropdown-feltet */
41
- prepend?: React.ReactNode;
42
- /** */
43
- loading?: boolean;
44
- /** En tekst som beskriver hva som skjer når man venter på items
45
- * @default 'Laster inn …'
46
- */
47
- loadingText?: string;
48
- /** Tekst som kommer opp når det ikke er noe elementer å vise
49
- * @default "Ingen tilgjengelige valg …"
50
- */
51
- noMatchesText?: string;
52
- /** Om man skal ha mulighet for å nullstille Dropdown-en
53
- * @default "fjern valgt"
54
- */
55
- labelClearSelectedItem?: string;
56
- /** En tooltip som gir ekstra info om inputfeltet */
57
- labelTooltip?: React.ReactNode;
58
- /** Plasserer labelen statisk på toppen av inputfeltet
59
- * @default false
60
- */
61
- disableLabelAnimation?: boolean;
62
- /** Ekstra klassenavn */
63
- className?: string;
64
- /** Styling som sendes ned til Dropdown-lista */
65
- listStyle?: {
66
- [key: string]: any;
67
- };
68
- /** Styling for Dropdown-en */
69
- style?: {
70
- [key: string]: any;
71
- };
72
- /** Tekst for skjemleser for knapp som lukker listen med valg
73
- * @default "Lukk liste med valg"
74
- */
75
- ariaLabelCloseList?: string;
76
- /** Tekst for skjemleser for knapp som åpner listen med valg
77
- * @default "Åpne liste med valg"
78
- */
79
- ariaLabelOpenList?: string;
80
- /** Ord for at et element er valgt i entall
81
- * eks. 'Element 1, _valgt_'
82
- * @default 'valgt'
83
- */
84
- ariaLabelChosenSingular?: string;
85
- /** Tekst for skjermleser som beskriver statusen til et element som valgt
86
- * @default ', valgt element, trykk for å fjerne'
87
- */
88
- ariaLabelSelectedItem?: string;
89
- };
90
- export declare const Dropdown: <ValueType extends unknown>(props: DropdownProps<ValueType> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
91
- export {};
@@ -1,108 +0,0 @@
1
- import React, { Dispatch, SetStateAction } from 'react';
2
- import { DropdownProps } from './Dropdown';
3
- import { NormalizedDropdownItemType } from './types';
4
- import './Dropdown.scss';
5
- export type MultiSelectProps<ValueType> = Omit<DropdownProps<ValueType>, 'selectedItem' | 'onChange'> & {
6
- /** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
7
- */
8
- selectedItems: NormalizedDropdownItemType<ValueType>[];
9
- /** Callback med alle valgte verdier.
10
- * Bruk denne til å oppdatere selectedItems-listen */
11
- onChange?: (selectedItems: NormalizedDropdownItemType<ValueType>[]) => void | Dispatch<SetStateAction<NormalizedDropdownItemType<ValueType>[]>>;
12
- /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
13
- * @default Regex-test som sjekker om item.label inneholder input-teksten
14
- */
15
- itemFilter?: (item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean;
16
- /** Skjuler «Velg alle» fra listen med valg
17
- * @default false
18
- */
19
- hideSelectAll?: boolean;
20
- /** Antall millisekunder man venter før man kaller en potensiell items-funksjon
21
- * @default 250
22
- */
23
- debounceTimeout?: number;
24
- /** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
25
- * @default 10
26
- */
27
- maxChips?: number;
28
- /** Resetter input etter at et element er valgt i listen
29
- * @default false
30
- */
31
- clearInputOnSelect?: boolean;
32
- /** Teksten som vises for «Velg alle»-elementet i listen
33
- * @default "Velg alle"
34
- */
35
- labelSelectAll?: string;
36
- /** Teksten som vises for «Velg alle»-elementet i listen
37
- * @default "Alle valgt"
38
- */
39
- labelAllItemsSelected?: string;
40
- /** Skjermleser-tekst som for å fjerne alle valg
41
- * @default "Fjern valgte"
42
- */
43
- labelClearAllItems?: string;
44
- /** Tekst for skjemleser på knapper for å fjerne valgt element
45
- * @default "trykk for å fjerne valg"
46
- */
47
- ariaLabelRemoveSelected?: string;
48
- /** Tekst for skjemleser for å indikere at et element er valgt
49
- * @default "valgte"
50
- */
51
- ariaLabelChosenPlural?: string;
52
- /** Tekst for skjemleser for å hoppe til input-feltet
53
- * @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
54
- */
55
- ariaLabelJumpToInput?: string;
56
- };
57
- export declare const MultiSelect: <ValueType extends unknown>(props: Omit<DropdownProps<ValueType>, "selectedItem" | "onChange"> & {
58
- /** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
59
- */
60
- selectedItems: NormalizedDropdownItemType<ValueType>[];
61
- /** Callback med alle valgte verdier.
62
- * Bruk denne til å oppdatere selectedItems-listen */
63
- onChange?: ((selectedItems: NormalizedDropdownItemType<ValueType>[]) => void | React.Dispatch<React.SetStateAction<NormalizedDropdownItemType<ValueType>[]>>) | undefined;
64
- /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
65
- * @default Regex-test som sjekker om item.label inneholder input-teksten
66
- */
67
- itemFilter?: ((item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean) | undefined;
68
- /** Skjuler «Velg alle» fra listen med valg
69
- * @default false
70
- */
71
- hideSelectAll?: boolean;
72
- /** Antall millisekunder man venter før man kaller en potensiell items-funksjon
73
- * @default 250
74
- */
75
- debounceTimeout?: number;
76
- /** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
77
- * @default 10
78
- */
79
- maxChips?: number;
80
- /** Resetter input etter at et element er valgt i listen
81
- * @default false
82
- */
83
- clearInputOnSelect?: boolean;
84
- /** Teksten som vises for «Velg alle»-elementet i listen
85
- * @default "Velg alle"
86
- */
87
- labelSelectAll?: string;
88
- /** Teksten som vises for «Velg alle»-elementet i listen
89
- * @default "Alle valgt"
90
- */
91
- labelAllItemsSelected?: string;
92
- /** Skjermleser-tekst som for å fjerne alle valg
93
- * @default "Fjern valgte"
94
- */
95
- labelClearAllItems?: string;
96
- /** Tekst for skjemleser på knapper for å fjerne valgt element
97
- * @default "trykk for å fjerne valg"
98
- */
99
- ariaLabelRemoveSelected?: string;
100
- /** Tekst for skjemleser for å indikere at et element er valgt
101
- * @default "valgte"
102
- */
103
- ariaLabelChosenPlural?: string;
104
- /** Tekst for skjemleser for å hoppe til input-feltet
105
- * @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
106
- */
107
- ariaLabelJumpToInput?: string;
108
- } & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;