@entur/dropdown 7.3.2 → 7.3.4

package/dist/Dropdown.d.ts

@@ -0,0 +1,90 @@
+import { default as React, Dispatch, SetStateAction } from 'react';
+import { VariantType } from '../../utils';
+import { NormalizedDropdownItemType, PotentiallyAsyncDropdownItemType } from './types';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+export type DropdownProps<ValueType> = {
+    /** Tilgjengelige valg i dropdown-en */
+    items: PotentiallyAsyncDropdownItemType<ValueType>;
+    /** Valgt verdi. Bruk null for ingen verdi. */
+    selectedItem: NormalizedDropdownItemType<ValueType> | null;
+    /** Callback ved valg som skal oppdatere selectedItem */
+    onChange?: (selectedItem: NormalizedDropdownItemType<ValueType> | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType<ValueType> | null>>;
+    /** Beskrivende tekst som forklarer feltet */
+    label: string;
+    /** Placeholder-tekst når ingenting er satt */
+    placeholder?: string;
+    /** Om man skal ha mulighet for å nullstille Dropdown-en
+     * @default false
+     */
+    clearable?: boolean;
+    /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
+    selectOnTab?: boolean;
+    /**
+     * @deprecated
+     * Bruk selectOnTab i stedet
+     *
+     * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
+    selectOnBlur?: boolean;
+    /** Deaktiver dropdown-en */
+    disabled?: boolean;
+    /** Setter dropdown-en i read-only modus */
+    readOnly?: boolean;
+    /** Hvilken valideringsvariant som gjelder */
+    variant?: VariantType | typeof error | typeof info;
+    /** Valideringsmelding, brukes sammen med `variant` */
+    feedback?: string;
+    /** Tekst eller ikon som kommer først i dropdown-feltet */
+    prepend?: React.ReactNode;
+    /** */
+    loading?: boolean;
+    /** En tekst som beskriver hva som skjer når man venter på items
+     * @default 'Laster inn …'
+     */
+    loadingText?: string;
+    /** Tekst som kommer opp når det ikke er noe elementer å vise
+     * @default "Ingen tilgjengelige valg …"
+     */
+    noMatchesText?: string;
+    /** Om man skal ha mulighet for å nullstille Dropdown-en
+     * @default "fjern valgt"
+     */
+    labelClearSelectedItem?: string;
+    /** En tooltip som gir ekstra info om inputfeltet */
+    labelTooltip?: React.ReactNode;
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Styling som sendes ned til Dropdown-lista */
+    listStyle?: {
+        [key: string]: any;
+    };
+    /** Styling for Dropdown-en */
+    style?: {
+        [key: string]: any;
+    };
+    /** Tekst for skjemleser for knapp som lukker listen med valg
+     * @default "Lukk liste med valg"
+     */
+    ariaLabelCloseList?: string;
+    /** Tekst for skjemleser for knapp som åpner listen med valg
+     * @default "Åpne liste med valg"
+     */
+    ariaLabelOpenList?: string;
+    /** Ord for at et element er valgt i entall
+     * eks. 'Element 1, _valgt_'
+     * @default 'valgt'
+     */
+    ariaLabelChosenSingular?: string;
+    /** Tekst for skjermleser som beskriver statusen til et element som valgt
+     * @default ', valgt element, trykk for å fjerne'
+     */
+    ariaLabelSelectedItem?: string;
+};
+export declare const Dropdown: <ValueType extends unknown>(props: DropdownProps<ValueType> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export {};

package/dist/MultiSelect.d.ts

@@ -0,0 +1,123 @@
+import { default as React, Dispatch, SetStateAction } from 'react';
+import { DropdownProps } from './Dropdown';
+import { NormalizedDropdownItemType } from './types';
+export type MultiSelectProps<ValueType> = Omit<DropdownProps<ValueType>, 'selectedItem' | 'onChange'> & {
+    /** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
+     */
+    selectedItems: NormalizedDropdownItemType<ValueType>[];
+    /** Callback med alle valgte verdier.
+     *  Bruk denne til å oppdatere selectedItems-listen */
+    onChange?: (selectedItems: NormalizedDropdownItemType<ValueType>[]) => void | Dispatch<SetStateAction<NormalizedDropdownItemType<ValueType>[]>>;
+    /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
+     * @default Regex-test som sjekker om item.label inneholder input-teksten
+     */
+    itemFilter?: (item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean;
+    /** Skjuler «Velg alle» fra listen med valg
+     * @default false
+     */
+    hideSelectAll?: boolean;
+    /** Antall millisekunder man venter før man kaller en potensiell items-funksjon
+     * @default 250
+     */
+    debounceTimeout?: number;
+    /** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
+     * @default 10
+     */
+    maxChips?: number;
+    /** Resetter input etter at et element er valgt i listen
+     * @default false
+     */
+    clearInputOnSelect?: boolean;
+    /** Teksten som vises for «Velg alle»-elementet i listen
+     * @default "Velg alle"
+     */
+    labelSelectAll?: string;
+    /** Teksten som vises for «Velg alle»-elementet i listen
+     * @default "Alle valgt"
+     */
+    labelAllItemsSelected?: string;
+    /** Skjermleser-tekst som for å fjerne alle valg
+     * @default "Fjern valgte"
+     */
+    labelClearAllItems?: string;
+    /** Tekst for skjemleser på knapper for å fjerne valgt element
+     * @default "trykk for å fjerne valg"
+     */
+    ariaLabelRemoveSelected?: string;
+    /** Tekst for skjemleser for å indikere at et element er valgt
+     * @default "valgte"
+     */
+    ariaLabelChosenPlural?: string;
+    /** Tekst for skjemleser for å hoppe til input-feltet
+     * @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
+     */
+    ariaLabelJumpToInput?: string;
+    /** Callback som kalles når brukeren går ut av input-feltet */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback når komponenten klikkes */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Callback når en tast trykkes */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /** Callback når komponenten får fokus */
+    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+};
+export declare const MultiSelect: <ValueType extends unknown>(props: Omit<DropdownProps<ValueType>, "onChange" | "selectedItem"> & {
+    /** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
+     */
+    selectedItems: NormalizedDropdownItemType<ValueType>[];
+    /** Callback med alle valgte verdier.
+     *  Bruk denne til å oppdatere selectedItems-listen */
+    onChange?: ((selectedItems: NormalizedDropdownItemType<ValueType>[]) => void | React.Dispatch<React.SetStateAction<NormalizedDropdownItemType<ValueType>[]>>) | undefined;
+    /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
+     * @default Regex-test som sjekker om item.label inneholder input-teksten
+     */
+    itemFilter?: ((item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean) | undefined;
+    /** Skjuler «Velg alle» fra listen med valg
+     * @default false
+     */
+    hideSelectAll?: boolean;
+    /** Antall millisekunder man venter før man kaller en potensiell items-funksjon
+     * @default 250
+     */
+    debounceTimeout?: number;
+    /** Maks antall individuelle valgt-element-tags i MultiSelect-en før de blir til en samle-tag
+     * @default 10
+     */
+    maxChips?: number;
+    /** Resetter input etter at et element er valgt i listen
+     * @default false
+     */
+    clearInputOnSelect?: boolean;
+    /** Teksten som vises for «Velg alle»-elementet i listen
+     * @default "Velg alle"
+     */
+    labelSelectAll?: string;
+    /** Teksten som vises for «Velg alle»-elementet i listen
+     * @default "Alle valgt"
+     */
+    labelAllItemsSelected?: string;
+    /** Skjermleser-tekst som for å fjerne alle valg
+     * @default "Fjern valgte"
+     */
+    labelClearAllItems?: string;
+    /** Tekst for skjemleser på knapper for å fjerne valgt element
+     * @default "trykk for å fjerne valg"
+     */
+    ariaLabelRemoveSelected?: string;
+    /** Tekst for skjemleser for å indikere at et element er valgt
+     * @default "valgte"
+     */
+    ariaLabelChosenPlural?: string;
+    /** Tekst for skjemleser for å hoppe til input-feltet
+     * @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
+     */
+    ariaLabelJumpToInput?: string;
+    /** Callback som kalles når brukeren går ut av input-feltet */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback når komponenten klikkes */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Callback når en tast trykkes */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /** Callback når komponenten får fokus */
+    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+} & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;

package/dist/NativeDropdown.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+import { VariantType } from '../../utils';
+import { NormalizedDropdownItemType, PotentiallyAsyncDropdownItemType } from './types';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+export type NativeDropdownProps<ValueType> = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /**
+     * For å deaktivere dropdow-nen
+     * @default false
+     **/
+    disabled?: boolean;
+    /** Valideringsmelding, brukes sammen med `variant` */
+    feedback?: string;
+    /** Alle valg for dropdown-en å ha */
+    items: PotentiallyAsyncDropdownItemType<ValueType>;
+    /** Beskrivende tekst som forklarer feltet */
+    label: string;
+    /** En callback for endringer av value
+     * Obs: merk at parameter her denne ikke er samme som i en HTML select.
+     * Bruk { target } hvis du trenger info om select-elementet som ble trykket på
+     */
+    onChange?: ({ value, selectedItem, target, }: {
+        value: string;
+        selectedItem: NormalizedDropdownItemType<ValueType> | null;
+        target: EventTarget & HTMLSelectElement;
+    }) => void;
+    /** Tekst eller ikon som kommer før dropdown-en */
+    prepend?: React.ReactNode;
+    /**
+     * Setter dropdown-en i read-only modus
+     * @default false
+     **/
+    readOnly?: boolean;
+    /** Den valgte verdien som NormalizedDropdownItemType
+     * (Brukes når komponenten er 'controlled')
+     */
+    selectedItem?: NormalizedDropdownItemType<ValueType> | null;
+    /** Den valgte verdien som sting
+     * (Brukes når komponenten er 'controlled)
+     */
+    value?: string;
+    /** Hvilken valideringsvariant som gjelder*/
+    variant?: VariantType | typeof error | typeof info;
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+    [key: string]: any;
+};
+export declare const NativeDropdown: <ValueType extends string | number>(props: NativeDropdownProps<ValueType> & React.RefAttributes<HTMLSelectElement>) => React.ReactElement | null;
+export {};

package/dist/SearchableDropdown.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { DropdownProps } from './Dropdown';
+import { NormalizedDropdownItemType } from './types';
+export type SearchableDropdownProps<ValueType> = DropdownProps<ValueType> & {
+    /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
+     * @default Regex-test som sjekker om item.label inneholder input-teksten
+     */
+    itemFilter?: (item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean;
+    /** Antall millisekunder man venter etter tekstinput før det gjøres kall for å oppdatere items
+     * Denne er kun relevant hvis du sender inn en funksjon som items.
+     */
+    debounceTimeout?: number;
+    /** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
+     * @default "Ingen treff for søket"
+     */
+    noMatchesText?: string;
+    /** Callback som kalles når brukeren går ut av input-feltet */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback når komponenten klikkes */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Callback når en tast trykkes */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /** Callback når komponenten får fokus */
+    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+};
+export declare const SearchableDropdown: <ValueType extends unknown>(props: DropdownProps<ValueType> & {
+    /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
+     * @default Regex-test som sjekker om item.label inneholder input-teksten
+     */
+    itemFilter?: ((item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean) | undefined;
+    /** Antall millisekunder man venter etter tekstinput før det gjøres kall for å oppdatere items
+     * Denne er kun relevant hvis du sender inn en funksjon som items.
+     */
+    debounceTimeout?: number;
+    /** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
+     * @default "Ingen treff for søket"
+     */
+    noMatchesText?: string;
+    /** Callback som kalles når brukeren går ut av input-feltet */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback når komponenten klikkes */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Callback når en tast trykkes */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /** Callback når komponenten får fokus */
+    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+} & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;

package/dist/components/DropdownList.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { UseComboboxPropGetters, UseSelectPropGetters } from 'downshift';
+import { NormalizedDropdownItemType } from '../types';
+type DropdownListProps<ValueType> = {
+    ariaLabelChosenSingular?: string;
+    ariaLabelSelectedItem?: string;
+    getMenuProps: UseComboboxPropGetters<ValueType>['getMenuProps'] | UseSelectPropGetters<ValueType>['getMenuProps'];
+    getItemProps: UseComboboxPropGetters<ValueType>['getItemProps'] | UseSelectPropGetters<ValueType>['getItemProps'];
+    highlightedIndex: number;
+    isOpen: boolean;
+    listItems: NormalizedDropdownItemType<ValueType | string>[];
+    floatingStyles: {
+        [key: string]: any;
+    } | undefined;
+    setListRef: (node: HTMLElement | null) => void;
+    loading?: boolean;
+    loadingText?: string;
+    noMatchesText?: string;
+    selectAllCheckboxState?: () => boolean | 'indeterminate';
+    selectAllItem?: NormalizedDropdownItemType<string>;
+    selectedItems: NormalizedDropdownItemType<ValueType>[];
+    style?: React.CSSProperties;
+    readOnly?: boolean;
+};
+export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, isOpen, highlightedIndex, listItems, floatingStyles, setListRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, readOnly, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
+export {};

package/dist/components/FieldComponents.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { UseComboboxGetToggleButtonPropsReturnValue, UseMultipleSelectionGetSelectedItemPropsOptions } from 'downshift';
+import { NormalizedDropdownItemType } from '../types';
+export declare const SelectedItemTag: <ValueType extends unknown>({ ariaLabelRemoveSelected, ariaLabelChosen, disabled, getSelectedItemProps, index, readOnly, removeSelectedItem, selectedItem, }: {
+    ariaLabelRemoveSelected: string;
+    ariaLabelChosen?: string;
+    disabled?: boolean;
+    getSelectedItemProps?: (options: UseMultipleSelectionGetSelectedItemPropsOptions<NormalizedDropdownItemType<ValueType>>) => any;
+    index?: number;
+    readOnly?: boolean;
+    removeSelectedItem: (item: NormalizedDropdownItemType<ValueType>) => void;
+    selectedItem: NormalizedDropdownItemType<ValueType>;
+}) => React.JSX.Element;
+export declare const DropdownFieldAppendix: (props: Partial<UseComboboxGetToggleButtonPropsReturnValue> & {
+    ariaLabelCloseList: string;
+    ariaLabelOpenList: string;
+    clearable?: boolean;
+    labelClearSelected: string;
+    disabled?: boolean;
+    focusable?: boolean;
+    isOpen: boolean;
+    loading: boolean;
+    loadingText: string | undefined;
+    onClear: () => void;
+    itemIsSelected: boolean;
+} & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const ClearableButton: ({ onClear, labelClearSelectedItems, focusable, }: {
+    onClear: () => void;
+    labelClearSelectedItems?: string;
+    focusable?: boolean;
+    ariaLabelClearItems?: string;
+}) => React.JSX.Element;

package/dist/dropdown.cjs.js

@@ -525,6 +525,10 @@ const SearchableDropdown = React.forwardRef(
     selectOnTab = false,
     style,
     variant = "info",
+    onBlur,
+    onClick,
+    onKeyDown,
+    onFocus,
     ...rest
   }, ref) => {
     const [showSelectedItem, setShowSelectedItem] = React.useState(value !== null);
@@ -697,7 +701,10 @@ const SearchableDropdown = React.forwardRef(
           if (e.target === e.currentTarget) {
             getInputProps()?.onClick?.(e);
           }
+          onClick?.(e);
         },
+        onKeyDown,
+        onFocus,
         prepend,
         readOnly,
         ref: refs.setReference,
@@ -758,8 +765,9 @@ const SearchableDropdown = React.forwardRef(
                     }
                   }
                 },
-                onBlur() {
+                onBlur(e) {
                   if (selectedItem !== null) setShowSelectedItem(true);
+                  onBlur?.(e);
                 },
                 onFocus() {
                   if (!readOnly) {
@@ -835,6 +843,10 @@ const MultiSelect = React.forwardRef(
     ariaLabelOpenList = "Åpne liste med valg",
     ariaLabelRemoveSelected = "trykk for å fjerne valg",
     ariaLabelSelectedItem,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onFocus,
     ...rest
   }, ref) => {
     const [lastHighlightedIndex, setLastHighlightedIndex] = React.useState(0);
@@ -1060,12 +1072,18 @@ const MultiSelect = React.forwardRef(
         labelId: getLabelProps().id,
         labelProps: getLabelProps(),
         labelTooltip,
-        onBlur: () => setInputValue(""),
+        onBlur: (e) => {
+          setInputValue("");
+          onBlur?.(e);
+        },
         onClick: (e) => {
           if (e.target === e.currentTarget) {
             getInputProps()?.onClick?.(e);
           }
+          onClick?.(e);
         },
+        onKeyDown,
+        onFocus,
         readOnly,
         ref: refs.setReference,
         style,