@entur/dropdown 5.0.0-beta.2 → 5.0.0-beta.4

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.
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { NormalizedDropdownItemType } from './useNormalizedItems';
2
+ import { NormalizedDropdownItemType } from './beta/useNormalizedItems';
3
3
  import './BaseDropdown.scss';
4
4
  type BaseDropdownProps = {
5
5
  className?: string;
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ControllerStateAndHelpers } from 'downshift';
3
- import { NormalizedDropdownItemType } from './useNormalizedItems';
3
+ import { NormalizedDropdownItemType } from './beta/useNormalizedItems';
4
4
  export type DownshiftProviderProps = {
5
5
  onChange?: (selectedItem: NormalizedDropdownItemType, stateAndHelpers: ControllerStateAndHelpers<NormalizedDropdownItemType>) => void;
6
6
  onInputValueChange?: (value: string) => void;
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { VariantType } from '@entur/form';
3
- import { NormalizedDropdownItemType } from './useNormalizedItems';
4
- import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
3
+ import { NormalizedDropdownItemType } from './beta/useNormalizedItems';
4
+ import { PotentiallyAsyncDropdownItemType } from './beta/useResolvedItems';
5
5
  export type DropdownProps = {
6
6
  /** Beskrivende tekst som forklarer feltet */
7
7
  label: string;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { NormalizedDropdownItemType } from './useNormalizedItems';
2
+ import { NormalizedDropdownItemType } from './beta/useNormalizedItems';
3
3
  import './DropdownList.scss';
4
4
  export type DropdownListProps = {
5
5
  items: NormalizedDropdownItemType[];
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import { UseSelectProps } from 'downshift';
3
- import { NormalizedDropdownItemType } from './useNormalizedItems';
3
+ import { NormalizedDropdownItemType } from './beta/useNormalizedItems';
4
4
  import { VariantType } from '@entur/form';
5
- import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
5
+ import { PotentiallyAsyncDropdownItemType } from './beta/useResolvedItems';
6
6
  import './MultiSelect.scss';
7
7
  import './DropdownList.scss';
8
8
  type MultiSelectProps = {
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { NormalizedDropdownItemType } from './useNormalizedItems';
2
+ import { NormalizedDropdownItemType } from './beta/useNormalizedItems';
3
3
  type RegularDropdownProps = {
4
4
  items: NormalizedDropdownItemType[];
5
5
  disabled?: boolean;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { NormalizedDropdownItemType } from './useNormalizedItems';
2
+ import { NormalizedDropdownItemType } from './beta/useNormalizedItems';
3
3
  import './SearchableDropdown.scss';
4
4
  type SearchableDropdownProps = {
5
5
  className?: string;
@@ -1,56 +1,62 @@
1
1
  import React from 'react';
2
2
  import { VariantType } from '@entur/form';
3
- import { NormalizedDropdownItemType } from '../useNormalizedItems';
4
- import { PotentiallyAsyncDropdownItemType } from '../useResolvedItems';
3
+ import { NormalizedDropdownItemType } from './useNormalizedItems';
4
+ import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
5
5
  import './Dropdown.scss';
6
6
  export type DropdownBetaProps = {
7
7
  /** Tilgjengelige valg i dropdown-en */
8
8
  items: PotentiallyAsyncDropdownItemType;
9
9
  /** Valgt verdi. Bruk null for ingen verdi. */
10
10
  selectedItem: NormalizedDropdownItemType | null;
11
+ /** Callback som skal oppdatere selectedItem */
12
+ onChange?: (selectedItem: NormalizedDropdownItemType | null) => void;
11
13
  /** Beskrivende tekst som forklarer feltet */
12
14
  label: string;
13
- /** Tooltip for labelen */
14
- labelTooltip?: string;
15
+ /** Placeholder-tekst når ingenting er satt */
16
+ placeholder?: string;
17
+ /** Om man skal ha mulighet for å nullstille Dropdown-en
18
+ * @default true
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;
15
27
  /** Hvilken valideringsvariant som gjelder */
16
28
  variant?: VariantType;
17
29
  /** Valideringsmelding, brukes sammen med `variant` */
18
30
  feedback?: string;
19
31
  /** Tekst eller ikon som kommer før dropdown-en */
20
32
  prepend?: React.ReactNode;
21
- /** Deaktiver dropdown-en */
22
- disabled?: boolean;
23
- /** Setter dropdown-en i read-only modus */
24
- readOnly?: boolean;
25
- /** Placeholder-tekst når ingenting er satt */
26
- placeholder?: string;
27
33
  /** En tekst som beskriver hva som skjer når man venter på items */
28
34
  loadingText?: string;
29
- /** Callback når brukeren endrer valg */
30
- onChange?: (selectedItem: NormalizedDropdownItemType | null) => void;
31
- /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
32
- selectOnTab?: boolean;
33
- /** Om man skal vise items ved fokusering av input-feltet, før man skriver inn noe */
34
- openOnFocus?: boolean;
35
- /** Antall millisekunder man venter før man kaller en potensiell items-funksjon */
36
- debounceTimeout?: number;
37
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
38
40
  * @default false
39
41
  */
40
- clearable?: boolean;
42
+ disableLabelAnimation?: boolean;
41
43
  /** Ekstra klassenavn */
42
44
  className?: string;
43
- /** Marker første valgmulighet automatisk */
44
- highlightFirstItemOnOpen?: boolean;
45
45
  /** Styling som sendes ned til Dropdown-lista */
46
46
  listStyle?: {
47
47
  [key: string]: any;
48
48
  };
49
- /** Plasserer labelen statisk på toppen av inputfeltet
50
- * @default false
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"
51
55
  */
52
- disableLabelAnimation?: boolean;
53
- /** Alle ekstra props videresendes til Downshift */
54
- [key: string]: any;
56
+ ariaLabelCloseList?: string;
57
+ /** Tekst for skjemleser for knapp som åpner listen med valg
58
+ * @default "Åpne liste med valg"
59
+ */
60
+ ariaLabelOpenList?: string;
55
61
  };
56
- export declare const DropdownBeta: ({ className, clearable, debounceTimeout, feedback, items: initialItems, label, listStyle, onChange, openOnFocus, placeholder, readonly, selectedItem, selectOnBlur, selectOnTab, variant, ...rest }: DropdownBetaProps) => JSX.Element;
62
+ export declare const DropdownBeta: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, style, variant, ...rest }: DropdownBetaProps) => JSX.Element;
@@ -1,77 +1,97 @@
1
1
  import React from 'react';
2
2
  import { VariantType } from '@entur/form';
3
- import { NormalizedDropdownItemType } from '../useNormalizedItems';
4
- import { PotentiallyAsyncDropdownItemType } from '../useResolvedItems';
3
+ import { NormalizedDropdownItemType } from './useNormalizedItems';
4
+ import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
5
5
  import './Dropdown.scss';
6
6
  export type MultiSelectBetaProps = {
7
7
  /** Tilgjengelige valg i MultiSelect */
8
8
  items: PotentiallyAsyncDropdownItemType;
9
- /** Elementer som er valgt blant 'items'.
10
- * Denne skal oppdateres av onChange.
9
+ /** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
11
10
  */
12
11
  selectedItems: NormalizedDropdownItemType[];
13
12
  /** Callback med alle valgte verdier.
14
13
  * Bruk denne til å oppdatere selectedItems-listen */
15
- onChange: (selectedItems: NormalizedDropdownItemType[]) => void;
14
+ onChange?: (selectedItems: NormalizedDropdownItemType[]) => void;
16
15
  /** Beskrivende tekst som forklarer feltet */
17
16
  label?: string;
18
17
  /** Hvilken valideringsvariant som gjelder */
19
18
  variant?: VariantType;
20
19
  /** Valideringsmelding, brukes sammen med `variant` */
21
20
  feedback?: string;
22
- /** Tekst eller ikon som kommer før MultiSelect */
23
- prepend?: React.ReactNode;
24
21
  /** Om dropdown-en er deaktivert */
25
22
  disabled?: boolean;
26
23
  /** Om dropdown-en er i read-only modus */
27
24
  readOnly?: boolean;
25
+ /** Om en knapp for å fjerne alle valg skal vises
26
+ * @default true
27
+ */
28
+ clearable?: boolean;
28
29
  /** Placeholder-tekst når ingenting er satt */
29
30
  placeholder?: string;
30
31
  /** En tekst som beskriver hva som skjer når man venter på items */
31
32
  loadingText?: string;
32
- /** Om man skal vise items ved fokusering av input-feltet, før man skriver inn noe
33
- * @default false
34
- */
35
- openOnFocus?: boolean;
36
33
  /** Skjuler «Velg alle» fra listen med valg
37
34
  * @default false
38
35
  */
39
36
  hideSelectAll?: boolean;
37
+ /** Antall millisekunder man venter før man kaller en potensiell items-funksjon
38
+ * @default 250
39
+ */
40
+ debounceTimeout?: number;
41
+ /** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
42
+ * @default 10
43
+ */
44
+ maxTags?: number;
45
+ /** Tekst eller ikon som kommer før MultiSelect */
46
+ prepend?: React.ReactNode;
47
+ /** Resetter input etter at et element er valgt i listen
48
+ * @default false
49
+ */
50
+ clearInputOnSelect?: boolean;
51
+ /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
52
+ selectOnBlur?: boolean;
53
+ style?: React.CSSProperties;
54
+ /** Styling som sendes ned til MultiSelect-lista */
55
+ listStyle?: {
56
+ [key: string]: any;
57
+ };
58
+ /** Ekstra klassenavn */
59
+ className?: string;
40
60
  /** Teksten som vises for «Velg alle»-elementet i listen
41
61
  * @default "Velg alle"
42
62
  */
43
- selectAllLabel?: string;
63
+ labelSelectAll?: string;
44
64
  /** Teksten som vises for «Velg alle»-elementet i listen
45
65
  * @default "Alle valgt"
46
66
  */
47
- allItemsSelectedLabel?: string;
67
+ labelAllItemsSelected?: string;
48
68
  /** Skjermleser-tekst som for å fjerne alle valg
49
69
  * @default "Fjern valgte"
50
70
  */
51
- removeAllItemsAriaLabel?: string;
52
- /** Ekstra klassenavn */
53
- className?: string;
71
+ labelClearAllItems?: string;
54
72
  /** Tekst for skjemleser på knapper for å fjerne valgt element
55
73
  * @default "trykk for å fjerne valg"
56
74
  */
57
75
  ariaLabelRemoveSelected?: string;
58
- /** Styling som sendes ned til MultiSelect-lista */
59
- listStyle?: {
60
- [key: string]: any;
61
- };
62
- /** Antall millisekunder man venter før man kaller en potensiell items-funksjon
63
- * @default 250
76
+ /** Tekst for skjemleser for å indikere at et element er valgt
77
+ * @default "valgt"
64
78
  */
65
- debounceTimeout?: number;
66
- maxTags?: number;
67
- /** Om en knapp for å fjerne alle valg skal vises
68
- * @default false
79
+ ariaLabelChosenSingular?: string;
80
+ /** Tekst for skjemleser for å indikere at et element er valgt
81
+ * @default "valgte"
69
82
  */
70
- clearable?: boolean;
71
- clearInputOnSelect?: boolean;
72
- selectOnBlur?: boolean;
73
- readonly?: boolean;
74
- loading?: boolean;
75
- style?: React.CSSProperties;
83
+ ariaLabelChosenPlural?: string;
84
+ /** Tekst for skjemleser for knapp som lukker listen med valg
85
+ * @default "Lukk liste med valg"
86
+ */
87
+ ariaLabelCloseList?: string;
88
+ /** Tekst for skjemleser for knapp som åpner listen med valg
89
+ * @default "Åpne liste med valg"
90
+ */
91
+ ariaLabelOpenList?: string;
92
+ /** Tekst for skjemleser for å hoppe til input-feltet
93
+ * @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
94
+ */
95
+ ariaLabelJumpToInput?: string;
76
96
  };
77
- export declare const MultiSelectBeta: ({ allItemsSelectedLabel, ariaLabelRemoveSelected, className, clearable, clearInputOnSelect, debounceTimeout, feedback, hideSelectAll, items: initialItems, label, listStyle, maxTags, onChange, openOnFocus, placeholder, readonly, removeAllItemsAriaLabel, selectAllLabel, selectedItems, selectOnBlur, style, variant, ...rest }: MultiSelectBetaProps) => JSX.Element;
97
+ export declare const MultiSelectBeta: ({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, items: initialItems, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, listStyle, loadingText, maxTags, onChange, placeholder, readOnly, selectedItems, selectOnBlur, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ...rest }: MultiSelectBetaProps) => JSX.Element;
@@ -0,0 +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,19 +1,17 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { VariantType } from '@entur/form';
3
- import { NormalizedDropdownItemType } from '../useNormalizedItems';
4
- import { PotentiallyAsyncDropdownItemType } from '../useResolvedItems';
3
+ import { NormalizedDropdownItemType } from './useNormalizedItems';
4
+ import { PotentiallyAsyncDropdownItemType } from './useResolvedItems';
5
5
  import './Dropdown.scss';
6
6
  export type SearchableDropdownProps = {
7
7
  /** Tilgjengelige valg i dropdown-en */
8
8
  items: PotentiallyAsyncDropdownItemType;
9
- /** Valgt element. Bruk null for ingen verdi.
10
- * Det er denne som skal oppdateres av onChange
11
- */
9
+ /** Valgt element. Bruk null for ingen verdi */
12
10
  selectedItem: NormalizedDropdownItemType | null;
13
- /** Callback for når brukeren endrer valg */
14
- onChange: (value: NormalizedDropdownItemType | null) => void;
15
- /** Filtreringen som blir brukt dersom man har en searchable Dropdown
16
- * @default Enkel tekstsammenligning
11
+ /** Callback ved valg som skal brukes til å oppdatere selectedItem */
12
+ onChange?: (value: NormalizedDropdownItemType | null) => void;
13
+ /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
14
+ * @default Regex-test som sjekker om item.label inneholder input-teksten
17
15
  */
18
16
  itemFilter?: (item: NormalizedDropdownItemType, inputValue: string | undefined) => boolean;
19
17
  /** Beskrivende tekst som forklarer feltet */
@@ -21,24 +19,29 @@ export type SearchableDropdownProps = {
21
19
  /** Placeholder-tekst når ingenting er satt */
22
20
  placeholder?: string;
23
21
  /** Vis knapp for å nullstille Dropdown-en skal vises
24
- * @default false
22
+ * @default true
25
23
  */
26
24
  clearable?: boolean;
27
- /** Vis listen med valg skal vises på fokus av inputfeltet
28
- * @default false
29
- */
30
- openOnFocus?: boolean;
31
25
  /** Plasserer labelen statisk på toppen av inputfeltet
32
26
  * @default false
33
27
  */
34
28
  disableLabelAnimation?: boolean;
35
- /** Antall millisekunder man venter før man kaller en potensiell items-funksjon */
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
+ */
36
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
37
  /** Gjør dropdown-en til å kun kunne leses
38
38
  * @default false
39
39
  */
40
- readonly?: boolean;
41
- selectOnBlur?: boolean;
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;
42
45
  /** Hvilken valideringsvariant som gjelder */
43
46
  variant?: VariantType;
44
47
  /** Valideringsmelding, brukes sammen med `variant` */
@@ -51,5 +54,17 @@ export type SearchableDropdownProps = {
51
54
  listStyle?: {
52
55
  [key: string]: any;
53
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;
54
69
  };
55
- export declare const SearchableDropdownBeta: ({ className, clearable, debounceTimeout, disableLabelAnimation, feedback, itemFilter, items: initialItems, label, listStyle, onChange, openOnFocus, placeholder, readonly, selectedItem: value, selectOnBlur, variant, ...rest }: SearchableDropdownProps) => JSX.Element;
70
+ export declare const SearchableDropdownBeta: ({ 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,24 +1,24 @@
1
1
  /// <reference types="react" />
2
2
  import { UseComboboxGetMenuPropsOptions, GetPropsCommonOptions, UseComboboxGetItemPropsOptions } from 'downshift';
3
- import { NormalizedDropdownItemType } from '../../useNormalizedItems';
3
+ import { NormalizedDropdownItemType } from '../useNormalizedItems';
4
4
  import './DropdownList.scss';
5
5
  type DropdownListProps = {
6
- selectedItems: NormalizedDropdownItemType[];
6
+ ariaLabelSelectedItem?: string;
7
+ getItemProps: (options: UseComboboxGetItemPropsOptions<NormalizedDropdownItemType>) => any;
8
+ getMenuProps: (options?: UseComboboxGetMenuPropsOptions | undefined, otherOptions?: GetPropsCommonOptions | undefined) => any;
9
+ highlightedIndex: number;
7
10
  isOpen: boolean;
8
11
  listItems: NormalizedDropdownItemType[];
9
- highlightedIndex: number;
10
12
  listStyle: {
11
13
  [key: string]: any;
12
14
  } | undefined;
13
- getMenuProps: (options?: UseComboboxGetMenuPropsOptions | undefined, otherOptions?: GetPropsCommonOptions | undefined) => any;
14
- getItemProps: (options: UseComboboxGetItemPropsOptions<NormalizedDropdownItemType>) => any;
15
- selectAllCheckboxState?: () => boolean | 'indeterminate';
16
- noMatchesText?: string;
17
- loadingText?: string;
18
- selectedItemAriaLabel?: string;
19
15
  loading?: boolean;
16
+ loadingText?: string;
17
+ noMatchesText?: string;
18
+ selectAllCheckboxState?: () => boolean | 'indeterminate';
20
19
  selectAllItem?: NormalizedDropdownItemType;
20
+ selectedItems: NormalizedDropdownItemType[];
21
21
  [key: string]: any;
22
22
  };
23
- export declare const DropdownList: ({ selectedItems, listItems, inputValue, isOpen, getMenuProps, getItemProps, highlightedIndex, showSelectAllInList, loading, selectAllCheckboxState, selectAllItem, listStyle, noMatchesText, loadingText, selectedItemAriaLabel, ...rest }: DropdownListProps) => JSX.Element;
23
+ export declare const DropdownList: ({ ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems, listStyle, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, showSelectAllInList, ...rest }: DropdownListProps) => JSX.Element;
24
24
  export {};
@@ -1,24 +1,29 @@
1
- import { UseComboboxGetToggleButtonPropsOptions, UseMultipleSelectionGetSelectedItemPropsOptions } from 'downshift';
2
- import { NormalizedDropdownItemType } from '../../useNormalizedItems';
3
1
  import React from 'react';
2
+ import { UseComboboxGetToggleButtonPropsOptions, UseMultipleSelectionGetSelectedItemPropsOptions } from 'downshift';
3
+ import { NormalizedDropdownItemType } from '../useNormalizedItems';
4
4
  import './FieldComponents.scss';
5
- export declare const SelectedItemTag: ({ getSelectedItemProps, removeSelectedItem, selectedItem, index, ariaLabelRemoveSelected, }: {
5
+ export declare const SelectedItemTag: ({ ariaLabelRemoveSelected, ariaLabelChosen, disabled, getSelectedItemProps, index, readOnly, removeSelectedItem, selectedItem, }: {
6
+ ariaLabelRemoveSelected: string;
7
+ ariaLabelChosen?: string | undefined;
8
+ disabled?: boolean | undefined;
6
9
  getSelectedItemProps?: ((options: UseMultipleSelectionGetSelectedItemPropsOptions<NormalizedDropdownItemType>) => any) | undefined;
10
+ index?: number | undefined;
11
+ readOnly?: boolean | undefined;
7
12
  removeSelectedItem: (item: NormalizedDropdownItemType) => void;
8
13
  selectedItem: NormalizedDropdownItemType;
9
- index?: number | undefined;
10
- ariaLabelRemoveSelected: string;
11
14
  }) => JSX.Element;
12
15
  export declare const FieldAppend: React.FC<{
13
- selectedItems: (NormalizedDropdownItemType | null)[];
16
+ ariaHiddenToggleButton?: boolean;
17
+ ariaLabelCloseList?: string;
18
+ ariaLabelOpenList?: string;
19
+ clearable?: boolean;
20
+ labelClearSelectedItems?: string;
21
+ disabled?: boolean;
22
+ focusable?: boolean;
23
+ getToggleButtonProps: (options?: UseComboboxGetToggleButtonPropsOptions | undefined) => any;
14
24
  isOpen: boolean;
15
- clearable: boolean;
16
25
  loading?: boolean;
17
26
  loadingText?: string;
18
- ariaLabelClearItems?: string;
19
- clearSelectedItemsLabel?: string;
20
- readOnly: boolean;
21
- focusable?: boolean;
22
27
  onClear: () => void;
23
- getToggleButtonProps: (options?: UseComboboxGetToggleButtonPropsOptions | undefined) => any;
28
+ selectedItems: (NormalizedDropdownItemType | null)[];
24
29
  }>;
@@ -1,3 +1,5 @@
1
1
  export * from './SearchableDropdown';
2
2
  export * from './MultiSelect';
3
3
  export * from './Dropdown';
4
+ export * from './NativeDropdown';
5
+ export type { NormalizedDropdownItemType, DropdownItemType, } from './useNormalizedItems';
@@ -1,13 +1,12 @@
1
1
  import React from 'react';
2
- /** A dropdown item has a string label and a string value */
3
- export type NormalizedDropdownItemType = {
4
- value: string;
5
- label: string;
6
- icons?: React.ComponentType<any>[];
7
- };
8
2
  export type DropdownItemType = {
9
3
  value?: string;
10
4
  label: string;
11
5
  icons?: React.ComponentType<any>[];
12
6
  } | string;
7
+ export type NormalizedDropdownItemType = {
8
+ value: string;
9
+ label: string;
10
+ icons?: React.ComponentType<any>[];
11
+ };
13
12
  export declare const useNormalizedItems: (items: DropdownItemType[]) => NormalizedDropdownItemType[];
@@ -1,16 +1,24 @@
1
- import { NormalizedDropdownItemType } from '../useNormalizedItems';
1
+ import { A11yRemovalMessage, A11yStatusMessageOptions } from 'downshift';
2
+ import { NormalizedDropdownItemType } from './useNormalizedItems';
3
+ import React from 'react';
4
+ export declare const EMPTY_INPUT = "";
2
5
  export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType, input: string | undefined): boolean;
3
6
  export declare const itemToString: (item: NormalizedDropdownItemType | null) => string;
4
7
  type useMultiselectUtilsType = {
5
8
  selectedItems: NormalizedDropdownItemType[];
6
9
  listItems: NormalizedDropdownItemType[];
7
- selectAllValue: string;
10
+ selectAll: NormalizedDropdownItemType;
8
11
  };
9
- export declare const useMultiselectUtils: ({ listItems, selectedItems, selectAllValue, }: useMultiselectUtilsType) => {
12
+ export declare const useMultiselectUtils: ({ listItems, selectedItems, selectAll, }: useMultiselectUtilsType) => {
10
13
  addClickedItemToSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
11
14
  allListItemsAreSelected: boolean;
12
15
  clickedItemIsInSelectedItems: (clickedItem: NormalizedDropdownItemType) => boolean;
13
16
  clickedItemIsSelectAll: (clickedItem: NormalizedDropdownItemType) => boolean;
17
+ handleListItemClicked: ({ clickedItem, onChange, setLastRemovedItem, }: {
18
+ clickedItem: NormalizedDropdownItemType;
19
+ onChange: (value: NormalizedDropdownItemType[]) => void;
20
+ setLastRemovedItem: any;
21
+ }) => void;
14
22
  hasSelectedItems: boolean;
15
23
  listItemsWithoutSelectAll: NormalizedDropdownItemType[];
16
24
  removeClickedItemFromSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
@@ -19,4 +27,22 @@ export declare const useMultiselectUtils: ({ listItems, selectedItems, selectAll
19
27
  someListItemsAreSelected: boolean;
20
28
  unselectAllListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
21
29
  };
30
+ type getA11yStatusMessageType<Item> = A11yStatusMessageOptions<Item> & {
31
+ selectAllItemIncluded?: boolean;
32
+ ariaLabelNoResults?: string;
33
+ };
34
+ export declare function getA11yStatusMessage<Item>(options: getA11yStatusMessageType<Item>): string;
35
+ type getA11ySelectionMessageType<Item> = A11yStatusMessageOptions<Item> & {
36
+ selectAllItem?: NormalizedDropdownItemType;
37
+ };
38
+ export declare function getA11ySelectionMessage(options: getA11ySelectionMessageType<NormalizedDropdownItemType>): string;
39
+ type getA11yRemovalMessageType<Item> = A11yRemovalMessage<Item> & {
40
+ selectAllItem?: NormalizedDropdownItemType;
41
+ removedItem?: NormalizedDropdownItemType;
42
+ };
43
+ export declare function getA11yRemovalMessage(options: getA11yRemovalMessageType<NormalizedDropdownItemType>): string;
44
+ /**A VoiceOver click is always preformed in the center of the clicked element.
45
+ This functions expolits that to check if the performed click likely is
46
+ made by VoiceOver. */
47
+ export declare const isVoiceOverClick: (clickEvent: React.MouseEvent) => boolean;
22
48
  export {};