@entur/dropdown 5.0.6 → 5.0.7
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 +62 -62
- package/dist/MultiSelect.d.ts +111 -111
- package/dist/NativeDropdown.d.ts +52 -52
- package/dist/SearchableDropdown.d.ts +70 -70
- package/dist/components/DropdownList.d.ts +25 -25
- package/dist/components/FieldComponents.d.ts +29 -29
- package/dist/deprecated/BaseDropdown.d.ts +22 -22
- package/dist/deprecated/DownshiftProvider.d.ts +16 -16
- package/dist/deprecated/Dropdown.d.ts +72 -72
- package/dist/deprecated/DropdownInputGroup.d.ts +11 -11
- package/dist/deprecated/DropdownList.d.ts +8 -8
- package/dist/deprecated/DropdownLoadingDots.d.ts +10 -10
- package/dist/deprecated/DropdownToggleButton.d.ts +3 -3
- package/dist/deprecated/MultiSelect.d.ts +64 -64
- package/dist/deprecated/RegularDropdown.d.ts +20 -20
- package/dist/deprecated/SearchableDropdown.d.ts +34 -34
- package/dist/deprecated/index.d.ts +2 -2
- package/dist/dropdown.cjs.development.js +181 -187
- package/dist/dropdown.cjs.development.js.map +1 -1
- package/dist/dropdown.cjs.production.min.js +1 -1
- package/dist/dropdown.cjs.production.min.js.map +1 -1
- package/dist/dropdown.esm.js +30 -30
- package/dist/index.d.ts +7 -7
- package/dist/styles.css +255 -257
- package/dist/useNormalizedItems.d.ts +12 -12
- package/dist/useResolvedItems.d.ts +10 -10
- package/dist/utils.d.ts +48 -48
- package/package.json +10 -10
package/dist/Dropdown.d.ts
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
import React, { Dispatch, SetStateAction } from 'react';
|
|
2
|
-
import { VariantType } from '@entur/form';
|
|
3
|
-
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
4
|
-
import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
|
|
5
|
-
import './Dropdown.scss';
|
|
6
|
-
export type DropdownProps = {
|
|
7
|
-
/** Tilgjengelige valg i dropdown-en */
|
|
8
|
-
items: PotentiallyAsyncDropdownItemType;
|
|
9
|
-
/** Valgt verdi. Bruk null for ingen verdi. */
|
|
10
|
-
selectedItem: NormalizedDropdownItemType | null;
|
|
11
|
-
/** Callback ved valg som skal oppdatere selectedItem */
|
|
12
|
-
onChange?: (selectedItem: NormalizedDropdownItemType | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType | null>>;
|
|
13
|
-
/** Beskrivende tekst som forklarer feltet */
|
|
14
|
-
label: string;
|
|
15
|
-
/** Placeholder-tekst når ingenting er satt */
|
|
16
|
-
placeholder?: string;
|
|
17
|
-
/** Om man skal ha mulighet for å nullstille Dropdown-en
|
|
18
|
-
* @default false
|
|
19
|
-
*/
|
|
20
|
-
clearable?: boolean;
|
|
21
|
-
/** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
|
|
22
|
-
selectOnBlur?: boolean;
|
|
23
|
-
/** Deaktiver dropdown-en */
|
|
24
|
-
disabled?: boolean;
|
|
25
|
-
/** Setter dropdown-en i read-only modus */
|
|
26
|
-
readOnly?: boolean;
|
|
27
|
-
/** Hvilken valideringsvariant som gjelder */
|
|
28
|
-
variant?: VariantType;
|
|
29
|
-
/** Valideringsmelding, brukes sammen med `variant` */
|
|
30
|
-
feedback?: string;
|
|
31
|
-
/** Tekst eller ikon som kommer før dropdown-en */
|
|
32
|
-
prepend?: React.ReactNode;
|
|
33
|
-
/** En tekst som beskriver hva som skjer når man venter på items */
|
|
34
|
-
loadingText?: string;
|
|
35
|
-
/** Om man skal ha mulighet for å nullstille Dropdown-en
|
|
36
|
-
* @default "fjern valgt"
|
|
37
|
-
*/
|
|
38
|
-
labelClearSelectedItem?: string;
|
|
39
|
-
/** Plasserer labelen statisk på toppen av inputfeltet
|
|
40
|
-
* @default false
|
|
41
|
-
*/
|
|
42
|
-
disableLabelAnimation?: boolean;
|
|
43
|
-
/** Ekstra klassenavn */
|
|
44
|
-
className?: string;
|
|
45
|
-
/** Styling som sendes ned til Dropdown-lista */
|
|
46
|
-
listStyle?: {
|
|
47
|
-
[key: string]: any;
|
|
48
|
-
};
|
|
49
|
-
/** Styling for Dropdown-en */
|
|
50
|
-
style?: {
|
|
51
|
-
[key: string]: any;
|
|
52
|
-
};
|
|
53
|
-
/** Tekst for skjemleser for knapp som lukker listen med valg
|
|
54
|
-
* @default "Lukk liste med valg"
|
|
55
|
-
*/
|
|
56
|
-
ariaLabelCloseList?: string;
|
|
57
|
-
/** Tekst for skjemleser for knapp som åpner listen med valg
|
|
58
|
-
* @default "Åpne liste med valg"
|
|
59
|
-
*/
|
|
60
|
-
ariaLabelOpenList?: string;
|
|
61
|
-
};
|
|
62
|
-
export declare const Dropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, style, variant, ...rest }: DropdownProps) => JSX.Element;
|
|
1
|
+
import React, { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
import { VariantType } from '@entur/form';
|
|
3
|
+
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
4
|
+
import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
|
|
5
|
+
import './Dropdown.scss';
|
|
6
|
+
export type DropdownProps = {
|
|
7
|
+
/** Tilgjengelige valg i dropdown-en */
|
|
8
|
+
items: PotentiallyAsyncDropdownItemType;
|
|
9
|
+
/** Valgt verdi. Bruk null for ingen verdi. */
|
|
10
|
+
selectedItem: NormalizedDropdownItemType | null;
|
|
11
|
+
/** Callback ved valg som skal oppdatere selectedItem */
|
|
12
|
+
onChange?: (selectedItem: NormalizedDropdownItemType | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType | null>>;
|
|
13
|
+
/** Beskrivende tekst som forklarer feltet */
|
|
14
|
+
label: string;
|
|
15
|
+
/** Placeholder-tekst når ingenting er satt */
|
|
16
|
+
placeholder?: string;
|
|
17
|
+
/** Om man skal ha mulighet for å nullstille Dropdown-en
|
|
18
|
+
* @default false
|
|
19
|
+
*/
|
|
20
|
+
clearable?: boolean;
|
|
21
|
+
/** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
|
|
22
|
+
selectOnBlur?: boolean;
|
|
23
|
+
/** Deaktiver dropdown-en */
|
|
24
|
+
disabled?: boolean;
|
|
25
|
+
/** Setter dropdown-en i read-only modus */
|
|
26
|
+
readOnly?: boolean;
|
|
27
|
+
/** Hvilken valideringsvariant som gjelder */
|
|
28
|
+
variant?: VariantType;
|
|
29
|
+
/** Valideringsmelding, brukes sammen med `variant` */
|
|
30
|
+
feedback?: string;
|
|
31
|
+
/** Tekst eller ikon som kommer før dropdown-en */
|
|
32
|
+
prepend?: React.ReactNode;
|
|
33
|
+
/** En tekst som beskriver hva som skjer når man venter på items */
|
|
34
|
+
loadingText?: string;
|
|
35
|
+
/** Om man skal ha mulighet for å nullstille Dropdown-en
|
|
36
|
+
* @default "fjern valgt"
|
|
37
|
+
*/
|
|
38
|
+
labelClearSelectedItem?: string;
|
|
39
|
+
/** Plasserer labelen statisk på toppen av inputfeltet
|
|
40
|
+
* @default false
|
|
41
|
+
*/
|
|
42
|
+
disableLabelAnimation?: boolean;
|
|
43
|
+
/** Ekstra klassenavn */
|
|
44
|
+
className?: string;
|
|
45
|
+
/** Styling som sendes ned til Dropdown-lista */
|
|
46
|
+
listStyle?: {
|
|
47
|
+
[key: string]: any;
|
|
48
|
+
};
|
|
49
|
+
/** Styling for Dropdown-en */
|
|
50
|
+
style?: {
|
|
51
|
+
[key: string]: any;
|
|
52
|
+
};
|
|
53
|
+
/** Tekst for skjemleser for knapp som lukker listen med valg
|
|
54
|
+
* @default "Lukk liste med valg"
|
|
55
|
+
*/
|
|
56
|
+
ariaLabelCloseList?: string;
|
|
57
|
+
/** Tekst for skjemleser for knapp som åpner listen med valg
|
|
58
|
+
* @default "Åpne liste med valg"
|
|
59
|
+
*/
|
|
60
|
+
ariaLabelOpenList?: string;
|
|
61
|
+
};
|
|
62
|
+
export declare const Dropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, style, variant, ...rest }: DropdownProps) => React.JSX.Element;
|
package/dist/MultiSelect.d.ts
CHANGED
|
@@ -1,111 +1,111 @@
|
|
|
1
|
-
import React, { Dispatch, SetStateAction } from 'react';
|
|
2
|
-
import { VariantType } from '@entur/form';
|
|
3
|
-
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
4
|
-
import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
|
|
5
|
-
import './Dropdown.scss';
|
|
6
|
-
export type MultiSelectProps = {
|
|
7
|
-
/** Beskrivende tekst som forklarer feltet */
|
|
8
|
-
label: string;
|
|
9
|
-
/** Tilgjengelige valg i MultiSelect */
|
|
10
|
-
items: PotentiallyAsyncDropdownItemType;
|
|
11
|
-
/** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
|
|
12
|
-
*/
|
|
13
|
-
selectedItems: NormalizedDropdownItemType[];
|
|
14
|
-
/** Callback med alle valgte verdier.
|
|
15
|
-
* Bruk denne til å oppdatere selectedItems-listen */
|
|
16
|
-
onChange?: (selectedItems: NormalizedDropdownItemType[]) => void | Dispatch<SetStateAction<NormalizedDropdownItemType[]>>;
|
|
17
|
-
/** Filtreringen som brukes når man skriver inn tekst i inputfeltet
|
|
18
|
-
* @default Regex-test som sjekker om item.label inneholder input-teksten
|
|
19
|
-
*/
|
|
20
|
-
itemFilter?: (item: NormalizedDropdownItemType, inputValue: string | undefined) => boolean;
|
|
21
|
-
/** Hvilken valideringsvariant som gjelder */
|
|
22
|
-
variant?: VariantType;
|
|
23
|
-
/** Valideringsmelding, brukes sammen med `variant` */
|
|
24
|
-
feedback?: string;
|
|
25
|
-
/** Om dropdown-en er deaktivert */
|
|
26
|
-
disabled?: boolean;
|
|
27
|
-
/** Om dropdown-en er i read-only modus */
|
|
28
|
-
readOnly?: boolean;
|
|
29
|
-
/** Om en knapp for å fjerne alle valg skal vises
|
|
30
|
-
* @default true
|
|
31
|
-
*/
|
|
32
|
-
clearable?: boolean;
|
|
33
|
-
/** Placeholder-tekst når ingenting er satt */
|
|
34
|
-
placeholder?: string;
|
|
35
|
-
/** En tekst som beskriver hva som skjer når man venter på items
|
|
36
|
-
* @default "Laster inn …"
|
|
37
|
-
*/
|
|
38
|
-
loadingText?: string;
|
|
39
|
-
/** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
|
|
40
|
-
* @default "Ingen treff for søket"
|
|
41
|
-
*/
|
|
42
|
-
noMatchesText?: string;
|
|
43
|
-
/** Skjuler «Velg alle» fra listen med valg
|
|
44
|
-
* @default false
|
|
45
|
-
*/
|
|
46
|
-
hideSelectAll?: boolean;
|
|
47
|
-
/** Antall millisekunder man venter før man kaller en potensiell items-funksjon
|
|
48
|
-
* @default 250
|
|
49
|
-
*/
|
|
50
|
-
debounceTimeout?: number;
|
|
51
|
-
/** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
|
|
52
|
-
* @default 10
|
|
53
|
-
*/
|
|
54
|
-
maxChips?: number;
|
|
55
|
-
/** Tekst eller ikon som kommer før MultiSelect */
|
|
56
|
-
prepend?: React.ReactNode;
|
|
57
|
-
/** Resetter input etter at et element er valgt i listen
|
|
58
|
-
* @default false
|
|
59
|
-
*/
|
|
60
|
-
clearInputOnSelect?: boolean;
|
|
61
|
-
/** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
|
|
62
|
-
selectOnBlur?: boolean;
|
|
63
|
-
style?: React.CSSProperties;
|
|
64
|
-
/** Styling som sendes ned til MultiSelect-lista */
|
|
65
|
-
listStyle?: {
|
|
66
|
-
[key: string]: any;
|
|
67
|
-
};
|
|
68
|
-
/** Ekstra klassenavn */
|
|
69
|
-
className?: string;
|
|
70
|
-
/** Teksten som vises for «Velg alle»-elementet i listen
|
|
71
|
-
* @default "Velg alle"
|
|
72
|
-
*/
|
|
73
|
-
labelSelectAll?: string;
|
|
74
|
-
/** Teksten som vises for «Velg alle»-elementet i listen
|
|
75
|
-
* @default "Alle valgt"
|
|
76
|
-
*/
|
|
77
|
-
labelAllItemsSelected?: string;
|
|
78
|
-
/** Skjermleser-tekst som for å fjerne alle valg
|
|
79
|
-
* @default "Fjern valgte"
|
|
80
|
-
*/
|
|
81
|
-
labelClearAllItems?: string;
|
|
82
|
-
/** Tekst for skjemleser på knapper for å fjerne valgt element
|
|
83
|
-
* @default "trykk for å fjerne valg"
|
|
84
|
-
*/
|
|
85
|
-
ariaLabelRemoveSelected?: string;
|
|
86
|
-
/** Tekst for skjemleser for å indikere at et element er valgt
|
|
87
|
-
* @default "valgt"
|
|
88
|
-
*/
|
|
89
|
-
ariaLabelChosenSingular?: string;
|
|
90
|
-
/** Tekst for skjemleser for å indikere at et element er valgt
|
|
91
|
-
* @default "valgte"
|
|
92
|
-
*/
|
|
93
|
-
ariaLabelChosenPlural?: string;
|
|
94
|
-
/** Tekst for skjemleser for knapp som lukker listen med valg
|
|
95
|
-
* @default "Lukk liste med valg"
|
|
96
|
-
*/
|
|
97
|
-
ariaLabelCloseList?: string;
|
|
98
|
-
/** Tekst for skjemleser for knapp som åpner listen med valg
|
|
99
|
-
* @default "Åpne liste med valg"
|
|
100
|
-
*/
|
|
101
|
-
ariaLabelOpenList?: string;
|
|
102
|
-
/** Tekst for skjemleser for å hoppe til input-feltet
|
|
103
|
-
* @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
|
|
104
|
-
*/
|
|
105
|
-
ariaLabelJumpToInput?: string;
|
|
106
|
-
/** Tekst for skjemleser for å indikere at et element i listen er valgt
|
|
107
|
-
* @default ", valgt element, trykk for å fjerne"
|
|
108
|
-
*/
|
|
109
|
-
ariaLabelSelectedItem?: string;
|
|
110
|
-
};
|
|
111
|
-
export declare const MultiSelect: ({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, itemFilter, items: initialItems, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps) => JSX.Element;
|
|
1
|
+
import React, { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
import { VariantType } from '@entur/form';
|
|
3
|
+
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
4
|
+
import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
|
|
5
|
+
import './Dropdown.scss';
|
|
6
|
+
export type MultiSelectProps = {
|
|
7
|
+
/** Beskrivende tekst som forklarer feltet */
|
|
8
|
+
label: string;
|
|
9
|
+
/** Tilgjengelige valg i MultiSelect */
|
|
10
|
+
items: PotentiallyAsyncDropdownItemType;
|
|
11
|
+
/** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
|
|
12
|
+
*/
|
|
13
|
+
selectedItems: NormalizedDropdownItemType[];
|
|
14
|
+
/** Callback med alle valgte verdier.
|
|
15
|
+
* Bruk denne til å oppdatere selectedItems-listen */
|
|
16
|
+
onChange?: (selectedItems: NormalizedDropdownItemType[]) => void | Dispatch<SetStateAction<NormalizedDropdownItemType[]>>;
|
|
17
|
+
/** Filtreringen som brukes når man skriver inn tekst i inputfeltet
|
|
18
|
+
* @default Regex-test som sjekker om item.label inneholder input-teksten
|
|
19
|
+
*/
|
|
20
|
+
itemFilter?: (item: NormalizedDropdownItemType, inputValue: string | undefined) => boolean;
|
|
21
|
+
/** Hvilken valideringsvariant som gjelder */
|
|
22
|
+
variant?: VariantType;
|
|
23
|
+
/** Valideringsmelding, brukes sammen med `variant` */
|
|
24
|
+
feedback?: string;
|
|
25
|
+
/** Om dropdown-en er deaktivert */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Om dropdown-en er i read-only modus */
|
|
28
|
+
readOnly?: boolean;
|
|
29
|
+
/** Om en knapp for å fjerne alle valg skal vises
|
|
30
|
+
* @default true
|
|
31
|
+
*/
|
|
32
|
+
clearable?: boolean;
|
|
33
|
+
/** Placeholder-tekst når ingenting er satt */
|
|
34
|
+
placeholder?: string;
|
|
35
|
+
/** En tekst som beskriver hva som skjer når man venter på items
|
|
36
|
+
* @default "Laster inn …"
|
|
37
|
+
*/
|
|
38
|
+
loadingText?: string;
|
|
39
|
+
/** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
|
|
40
|
+
* @default "Ingen treff for søket"
|
|
41
|
+
*/
|
|
42
|
+
noMatchesText?: string;
|
|
43
|
+
/** Skjuler «Velg alle» fra listen med valg
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
hideSelectAll?: boolean;
|
|
47
|
+
/** Antall millisekunder man venter før man kaller en potensiell items-funksjon
|
|
48
|
+
* @default 250
|
|
49
|
+
*/
|
|
50
|
+
debounceTimeout?: number;
|
|
51
|
+
/** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
|
|
52
|
+
* @default 10
|
|
53
|
+
*/
|
|
54
|
+
maxChips?: number;
|
|
55
|
+
/** Tekst eller ikon som kommer før MultiSelect */
|
|
56
|
+
prepend?: React.ReactNode;
|
|
57
|
+
/** Resetter input etter at et element er valgt i listen
|
|
58
|
+
* @default false
|
|
59
|
+
*/
|
|
60
|
+
clearInputOnSelect?: boolean;
|
|
61
|
+
/** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
|
|
62
|
+
selectOnBlur?: boolean;
|
|
63
|
+
style?: React.CSSProperties;
|
|
64
|
+
/** Styling som sendes ned til MultiSelect-lista */
|
|
65
|
+
listStyle?: {
|
|
66
|
+
[key: string]: any;
|
|
67
|
+
};
|
|
68
|
+
/** Ekstra klassenavn */
|
|
69
|
+
className?: string;
|
|
70
|
+
/** Teksten som vises for «Velg alle»-elementet i listen
|
|
71
|
+
* @default "Velg alle"
|
|
72
|
+
*/
|
|
73
|
+
labelSelectAll?: string;
|
|
74
|
+
/** Teksten som vises for «Velg alle»-elementet i listen
|
|
75
|
+
* @default "Alle valgt"
|
|
76
|
+
*/
|
|
77
|
+
labelAllItemsSelected?: string;
|
|
78
|
+
/** Skjermleser-tekst som for å fjerne alle valg
|
|
79
|
+
* @default "Fjern valgte"
|
|
80
|
+
*/
|
|
81
|
+
labelClearAllItems?: string;
|
|
82
|
+
/** Tekst for skjemleser på knapper for å fjerne valgt element
|
|
83
|
+
* @default "trykk for å fjerne valg"
|
|
84
|
+
*/
|
|
85
|
+
ariaLabelRemoveSelected?: string;
|
|
86
|
+
/** Tekst for skjemleser for å indikere at et element er valgt
|
|
87
|
+
* @default "valgt"
|
|
88
|
+
*/
|
|
89
|
+
ariaLabelChosenSingular?: string;
|
|
90
|
+
/** Tekst for skjemleser for å indikere at et element er valgt
|
|
91
|
+
* @default "valgte"
|
|
92
|
+
*/
|
|
93
|
+
ariaLabelChosenPlural?: string;
|
|
94
|
+
/** Tekst for skjemleser for knapp som lukker listen med valg
|
|
95
|
+
* @default "Lukk liste med valg"
|
|
96
|
+
*/
|
|
97
|
+
ariaLabelCloseList?: string;
|
|
98
|
+
/** Tekst for skjemleser for knapp som åpner listen med valg
|
|
99
|
+
* @default "Åpne liste med valg"
|
|
100
|
+
*/
|
|
101
|
+
ariaLabelOpenList?: string;
|
|
102
|
+
/** Tekst for skjemleser for å hoppe til input-feltet
|
|
103
|
+
* @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
|
|
104
|
+
*/
|
|
105
|
+
ariaLabelJumpToInput?: string;
|
|
106
|
+
/** Tekst for skjemleser for å indikere at et element i listen er valgt
|
|
107
|
+
* @default ", valgt element, trykk for å fjerne"
|
|
108
|
+
*/
|
|
109
|
+
ariaLabelSelectedItem?: string;
|
|
110
|
+
};
|
|
111
|
+
export declare const MultiSelect: ({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, itemFilter, items: initialItems, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps) => React.JSX.Element;
|
package/dist/NativeDropdown.d.ts
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { VariantType } from '@entur/form';
|
|
3
|
-
import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
|
|
4
|
-
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
5
|
-
import './Dropdown.scss';
|
|
6
|
-
export type NativeDropdownProps = {
|
|
7
|
-
/** Ekstra klassenavn */
|
|
8
|
-
className?: string;
|
|
9
|
-
/**
|
|
10
|
-
* For å deaktivere dropdow-nen
|
|
11
|
-
* @default false
|
|
12
|
-
**/
|
|
13
|
-
disabled?: boolean;
|
|
14
|
-
/** Valideringsmelding, brukes sammen med `variant` */
|
|
15
|
-
feedback?: string;
|
|
16
|
-
/** Alle valg for dropdown-en å ha */
|
|
17
|
-
items: PotentiallyAsyncDropdownItemType;
|
|
18
|
-
/** Beskrivende tekst som forklarer feltet */
|
|
19
|
-
label: string;
|
|
20
|
-
/** En callback for endringer av value
|
|
21
|
-
* Obs: merk at parameter her denne ikke er samme som i en HTML select.
|
|
22
|
-
* Bruk { target } hvis du trenger info om select-elementet som ble trykket på
|
|
23
|
-
*/
|
|
24
|
-
onChange?: ({ value, selectedItem, target, }: {
|
|
25
|
-
value: string;
|
|
26
|
-
selectedItem: NormalizedDropdownItemType | null;
|
|
27
|
-
target: EventTarget & HTMLSelectElement;
|
|
28
|
-
}) => void;
|
|
29
|
-
/** Tekst eller ikon som kommer før dropdown-en */
|
|
30
|
-
prepend?: React.ReactNode;
|
|
31
|
-
/**
|
|
32
|
-
* Setter dropdown-en i read-only modus
|
|
33
|
-
* @default false
|
|
34
|
-
**/
|
|
35
|
-
readOnly?: boolean;
|
|
36
|
-
/** Den valgte verdien som NormalizedDropdownItemType
|
|
37
|
-
* (Brukes når komponenten er 'controlled')
|
|
38
|
-
*/
|
|
39
|
-
selectedItem?: NormalizedDropdownItemType | null;
|
|
40
|
-
/** Den valgte verdien som sting
|
|
41
|
-
* (Brukes når komponenten er 'controlled)
|
|
42
|
-
*/
|
|
43
|
-
value?: string;
|
|
44
|
-
/** Hvilken valideringsvariant som gjelder */
|
|
45
|
-
variant?: VariantType;
|
|
46
|
-
/** Plasserer labelen statisk på toppen av inputfeltet
|
|
47
|
-
* @default false
|
|
48
|
-
*/
|
|
49
|
-
disableLabelAnimation?: boolean;
|
|
50
|
-
[key: string]: any;
|
|
51
|
-
};
|
|
52
|
-
export declare const NativeDropdown: React.FC<NativeDropdownProps>;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { VariantType } from '@entur/form';
|
|
3
|
+
import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
|
|
4
|
+
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
5
|
+
import './Dropdown.scss';
|
|
6
|
+
export type NativeDropdownProps = {
|
|
7
|
+
/** Ekstra klassenavn */
|
|
8
|
+
className?: string;
|
|
9
|
+
/**
|
|
10
|
+
* For å deaktivere dropdow-nen
|
|
11
|
+
* @default false
|
|
12
|
+
**/
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** Valideringsmelding, brukes sammen med `variant` */
|
|
15
|
+
feedback?: string;
|
|
16
|
+
/** Alle valg for dropdown-en å ha */
|
|
17
|
+
items: PotentiallyAsyncDropdownItemType;
|
|
18
|
+
/** Beskrivende tekst som forklarer feltet */
|
|
19
|
+
label: string;
|
|
20
|
+
/** En callback for endringer av value
|
|
21
|
+
* Obs: merk at parameter her denne ikke er samme som i en HTML select.
|
|
22
|
+
* Bruk { target } hvis du trenger info om select-elementet som ble trykket på
|
|
23
|
+
*/
|
|
24
|
+
onChange?: ({ value, selectedItem, target, }: {
|
|
25
|
+
value: string;
|
|
26
|
+
selectedItem: NormalizedDropdownItemType | null;
|
|
27
|
+
target: EventTarget & HTMLSelectElement;
|
|
28
|
+
}) => void;
|
|
29
|
+
/** Tekst eller ikon som kommer før dropdown-en */
|
|
30
|
+
prepend?: React.ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* Setter dropdown-en i read-only modus
|
|
33
|
+
* @default false
|
|
34
|
+
**/
|
|
35
|
+
readOnly?: boolean;
|
|
36
|
+
/** Den valgte verdien som NormalizedDropdownItemType
|
|
37
|
+
* (Brukes når komponenten er 'controlled')
|
|
38
|
+
*/
|
|
39
|
+
selectedItem?: NormalizedDropdownItemType | null;
|
|
40
|
+
/** Den valgte verdien som sting
|
|
41
|
+
* (Brukes når komponenten er 'controlled)
|
|
42
|
+
*/
|
|
43
|
+
value?: string;
|
|
44
|
+
/** Hvilken valideringsvariant som gjelder */
|
|
45
|
+
variant?: VariantType;
|
|
46
|
+
/** Plasserer labelen statisk på toppen av inputfeltet
|
|
47
|
+
* @default false
|
|
48
|
+
*/
|
|
49
|
+
disableLabelAnimation?: boolean;
|
|
50
|
+
[key: string]: any;
|
|
51
|
+
};
|
|
52
|
+
export declare const NativeDropdown: React.FC<NativeDropdownProps>;
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
import React, { Dispatch, SetStateAction } from 'react';
|
|
2
|
-
import { VariantType } from '@entur/form';
|
|
3
|
-
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
4
|
-
import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
|
|
5
|
-
import './Dropdown.scss';
|
|
6
|
-
export type SearchableDropdownProps = {
|
|
7
|
-
/** Tilgjengelige valg i dropdown-en */
|
|
8
|
-
items: PotentiallyAsyncDropdownItemType;
|
|
9
|
-
/** Valgt element. Bruk null for ingen verdi */
|
|
10
|
-
selectedItem: NormalizedDropdownItemType | null;
|
|
11
|
-
/** Callback ved valg som skal brukes til å oppdatere selectedItem */
|
|
12
|
-
onChange?: (selectedItem: NormalizedDropdownItemType | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType | null>>;
|
|
13
|
-
/** Filtreringen som brukes når man skriver inn tekst i inputfeltet
|
|
14
|
-
* @default Regex-test som sjekker om item.label inneholder input-teksten
|
|
15
|
-
*/
|
|
16
|
-
itemFilter?: (item: NormalizedDropdownItemType, inputValue: string | undefined) => boolean;
|
|
17
|
-
/** Beskrivende tekst som forklarer feltet */
|
|
18
|
-
label: string;
|
|
19
|
-
/** Placeholder-tekst når ingenting er satt */
|
|
20
|
-
placeholder?: string;
|
|
21
|
-
/** Vis knapp for å nullstille Dropdown-en skal vises
|
|
22
|
-
* @default true
|
|
23
|
-
*/
|
|
24
|
-
clearable?: boolean;
|
|
25
|
-
/** Plasserer labelen statisk på toppen av inputfeltet
|
|
26
|
-
* @default false
|
|
27
|
-
*/
|
|
28
|
-
disableLabelAnimation?: boolean;
|
|
29
|
-
/** Antall millisekunder man venter etter tekstinput før det gjøres kall for å oppdatere items
|
|
30
|
-
* Denne er kun relevant hvis du sender inn en funksjon som items.
|
|
31
|
-
*/
|
|
32
|
-
debounceTimeout?: number;
|
|
33
|
-
/** Deaktiver dropdown-en */
|
|
34
|
-
disabled?: boolean;
|
|
35
|
-
/** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
|
|
36
|
-
selectOnBlur?: boolean;
|
|
37
|
-
/** Gjør dropdown-en til å kun kunne leses
|
|
38
|
-
* @default false
|
|
39
|
-
*/
|
|
40
|
-
readOnly?: boolean;
|
|
41
|
-
/** Tekst eller ikon som kommer før dropdown-en */
|
|
42
|
-
prepend?: React.ReactNode;
|
|
43
|
-
/** En tekst som beskriver hva som skjer når man venter på items */
|
|
44
|
-
loadingText?: string;
|
|
45
|
-
/** Hvilken valideringsvariant som gjelder */
|
|
46
|
-
variant?: VariantType;
|
|
47
|
-
/** Valideringsmelding, brukes sammen med `variant` */
|
|
48
|
-
feedback?: string;
|
|
49
|
-
className?: string;
|
|
50
|
-
style?: {
|
|
51
|
-
[key: string]: any;
|
|
52
|
-
};
|
|
53
|
-
/** Style som kun påføres listeelementet */
|
|
54
|
-
listStyle?: {
|
|
55
|
-
[key: string]: any;
|
|
56
|
-
};
|
|
57
|
-
/** Tekst som beskriver at man fjerner valget sitt
|
|
58
|
-
* @default "fjern valgt"
|
|
59
|
-
*/
|
|
60
|
-
labelClearSelectedItem?: string;
|
|
61
|
-
/** Tekst for skjemleser for knapp som lukker listen med valg
|
|
62
|
-
* @default "Lukk liste med valg"
|
|
63
|
-
*/
|
|
64
|
-
ariaLabelCloseList?: string;
|
|
65
|
-
/** Tekst for skjemleser for knapp som åpner listen med valg
|
|
66
|
-
* @default "Åpne liste med valg"
|
|
67
|
-
*/
|
|
68
|
-
ariaLabelOpenList?: string;
|
|
69
|
-
};
|
|
70
|
-
export declare const SearchableDropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, debounceTimeout, disabled, disableLabelAnimation, feedback, itemFilter, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem: value, selectOnBlur, style, variant, ...rest }: SearchableDropdownProps) => JSX.Element;
|
|
1
|
+
import React, { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
import { VariantType } from '@entur/form';
|
|
3
|
+
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
4
|
+
import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
|
|
5
|
+
import './Dropdown.scss';
|
|
6
|
+
export type SearchableDropdownProps = {
|
|
7
|
+
/** Tilgjengelige valg i dropdown-en */
|
|
8
|
+
items: PotentiallyAsyncDropdownItemType;
|
|
9
|
+
/** Valgt element. Bruk null for ingen verdi */
|
|
10
|
+
selectedItem: NormalizedDropdownItemType | null;
|
|
11
|
+
/** Callback ved valg som skal brukes til å oppdatere selectedItem */
|
|
12
|
+
onChange?: (selectedItem: NormalizedDropdownItemType | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType | null>>;
|
|
13
|
+
/** Filtreringen som brukes når man skriver inn tekst i inputfeltet
|
|
14
|
+
* @default Regex-test som sjekker om item.label inneholder input-teksten
|
|
15
|
+
*/
|
|
16
|
+
itemFilter?: (item: NormalizedDropdownItemType, inputValue: string | undefined) => boolean;
|
|
17
|
+
/** Beskrivende tekst som forklarer feltet */
|
|
18
|
+
label: string;
|
|
19
|
+
/** Placeholder-tekst når ingenting er satt */
|
|
20
|
+
placeholder?: string;
|
|
21
|
+
/** Vis knapp for å nullstille Dropdown-en skal vises
|
|
22
|
+
* @default true
|
|
23
|
+
*/
|
|
24
|
+
clearable?: boolean;
|
|
25
|
+
/** Plasserer labelen statisk på toppen av inputfeltet
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
disableLabelAnimation?: boolean;
|
|
29
|
+
/** Antall millisekunder man venter etter tekstinput før det gjøres kall for å oppdatere items
|
|
30
|
+
* Denne er kun relevant hvis du sender inn en funksjon som items.
|
|
31
|
+
*/
|
|
32
|
+
debounceTimeout?: number;
|
|
33
|
+
/** Deaktiver dropdown-en */
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
/** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
|
|
36
|
+
selectOnBlur?: boolean;
|
|
37
|
+
/** Gjør dropdown-en til å kun kunne leses
|
|
38
|
+
* @default false
|
|
39
|
+
*/
|
|
40
|
+
readOnly?: boolean;
|
|
41
|
+
/** Tekst eller ikon som kommer før dropdown-en */
|
|
42
|
+
prepend?: React.ReactNode;
|
|
43
|
+
/** En tekst som beskriver hva som skjer når man venter på items */
|
|
44
|
+
loadingText?: string;
|
|
45
|
+
/** Hvilken valideringsvariant som gjelder */
|
|
46
|
+
variant?: VariantType;
|
|
47
|
+
/** Valideringsmelding, brukes sammen med `variant` */
|
|
48
|
+
feedback?: string;
|
|
49
|
+
className?: string;
|
|
50
|
+
style?: {
|
|
51
|
+
[key: string]: any;
|
|
52
|
+
};
|
|
53
|
+
/** Style som kun påføres listeelementet */
|
|
54
|
+
listStyle?: {
|
|
55
|
+
[key: string]: any;
|
|
56
|
+
};
|
|
57
|
+
/** Tekst som beskriver at man fjerner valget sitt
|
|
58
|
+
* @default "fjern valgt"
|
|
59
|
+
*/
|
|
60
|
+
labelClearSelectedItem?: string;
|
|
61
|
+
/** Tekst for skjemleser for knapp som lukker listen med valg
|
|
62
|
+
* @default "Lukk liste med valg"
|
|
63
|
+
*/
|
|
64
|
+
ariaLabelCloseList?: string;
|
|
65
|
+
/** Tekst for skjemleser for knapp som åpner listen med valg
|
|
66
|
+
* @default "Åpne liste med valg"
|
|
67
|
+
*/
|
|
68
|
+
ariaLabelOpenList?: string;
|
|
69
|
+
};
|
|
70
|
+
export declare const SearchableDropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, debounceTimeout, disabled, disableLabelAnimation, feedback, itemFilter, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem: value, selectOnBlur, style, variant, ...rest }: SearchableDropdownProps) => React.JSX.Element;
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
import { UseComboboxGetMenuPropsOptions, GetPropsCommonOptions, UseComboboxGetItemPropsOptions } from 'downshift';
|
|
3
|
-
import { NormalizedDropdownItemType } from '../useNormalizedItems';
|
|
4
|
-
import './DropdownList.scss';
|
|
5
|
-
type DropdownListProps = {
|
|
6
|
-
ariaLabelChosenSingular?: string;
|
|
7
|
-
ariaLabelSelectedItem?: string;
|
|
8
|
-
getItemProps: (options: UseComboboxGetItemPropsOptions<NormalizedDropdownItemType>) => any;
|
|
9
|
-
getMenuProps: (options?: UseComboboxGetMenuPropsOptions | undefined, otherOptions?: GetPropsCommonOptions | undefined) => any;
|
|
10
|
-
highlightedIndex: number;
|
|
11
|
-
isOpen: boolean;
|
|
12
|
-
listItems: NormalizedDropdownItemType[];
|
|
13
|
-
listStyle: {
|
|
14
|
-
[key: string]: any;
|
|
15
|
-
} | undefined;
|
|
16
|
-
loading?: boolean;
|
|
17
|
-
loadingText?: string;
|
|
18
|
-
noMatchesText?: string;
|
|
19
|
-
selectAllCheckboxState?: () => boolean | 'indeterminate';
|
|
20
|
-
selectAllItem?: NormalizedDropdownItemType;
|
|
21
|
-
selectedItems: NormalizedDropdownItemType[];
|
|
22
|
-
[key: string]: any;
|
|
23
|
-
};
|
|
24
|
-
export declare const DropdownList: ({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems, listStyle, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, showSelectAllInList, ...rest }: DropdownListProps) => JSX.Element;
|
|
25
|
-
export {};
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { UseComboboxGetMenuPropsOptions, GetPropsCommonOptions, UseComboboxGetItemPropsOptions } from 'downshift';
|
|
3
|
+
import { NormalizedDropdownItemType } from '../useNormalizedItems';
|
|
4
|
+
import './DropdownList.scss';
|
|
5
|
+
type DropdownListProps = {
|
|
6
|
+
ariaLabelChosenSingular?: string;
|
|
7
|
+
ariaLabelSelectedItem?: string;
|
|
8
|
+
getItemProps: (options: UseComboboxGetItemPropsOptions<NormalizedDropdownItemType>) => any;
|
|
9
|
+
getMenuProps: (options?: UseComboboxGetMenuPropsOptions | undefined, otherOptions?: GetPropsCommonOptions | undefined) => any;
|
|
10
|
+
highlightedIndex: number;
|
|
11
|
+
isOpen: boolean;
|
|
12
|
+
listItems: NormalizedDropdownItemType[];
|
|
13
|
+
listStyle: {
|
|
14
|
+
[key: string]: any;
|
|
15
|
+
} | undefined;
|
|
16
|
+
loading?: boolean;
|
|
17
|
+
loadingText?: string;
|
|
18
|
+
noMatchesText?: string;
|
|
19
|
+
selectAllCheckboxState?: () => boolean | 'indeterminate';
|
|
20
|
+
selectAllItem?: NormalizedDropdownItemType;
|
|
21
|
+
selectedItems: NormalizedDropdownItemType[];
|
|
22
|
+
[key: string]: any;
|
|
23
|
+
};
|
|
24
|
+
export declare const DropdownList: ({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems, listStyle, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, showSelectAllInList, ...rest }: DropdownListProps) => React.JSX.Element;
|
|
25
|
+
export {};
|