@entur/dropdown 7.0.3 → 7.1.1-beta.0

package/README.md

@@ -2,7 +2,7 @@
 
 This package contains the different Dropdown components.
 
-> 💡 Looking for the [documentation](https://design.entur.no/komponenter/skjemaelementer/dropdown)?
+> 💡 Looking for the [documentation](https://linje.entur.no/komponenter/skjemaelementer/dropdown)?
 
 ## Installation
 
@@ -14,4 +14,4 @@ yarn add @entur/dropdown
 
 ## Usage
 
-Please refer to the [documentation](https://design.entur.no/komponenter/skjemaelementer/dropdown) for usage information.
+Please refer to the [documentation](https://linje.entur.no/komponenter/skjemaelementer/dropdown) for usage information.

package/dist/Dropdown.d.ts

@@ -37,8 +37,10 @@ export type DropdownProps<ValueType> = {
     variant?: VariantType | typeof error | typeof info;
     /** Valideringsmelding, brukes sammen med `variant` */
     feedback?: string;
-    /** Tekst eller ikon som kommer før dropdown-en */
+    /** 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 …'
      */
@@ -85,5 +87,5 @@ export type DropdownProps<ValueType> = {
      */
     ariaLabelSelectedItem?: string;
 };
-export declare const Dropdown: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelCloseList, ariaLabelOpenList, ariaLabelSelectedItem, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, labelTooltip, listStyle, loadingText, noMatchesText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, selectOnTab, style, variant, ...rest }: DropdownProps<ValueType>) => React.JSX.Element;
+export declare const Dropdown: <ValueType extends unknown>(props: DropdownProps<ValueType> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 export {};

package/dist/MultiSelect.d.ts

@@ -1,16 +1,8 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import { VariantType } from '@entur/utils';
-import { NormalizedDropdownItemType, PotentiallyAsyncDropdownItemType } from './types';
+import { DropdownProps } from './Dropdown';
+import { NormalizedDropdownItemType } from './types';
 import './Dropdown.scss';
-/** @deprecated use variant="information" instead */
-declare const info = "info";
-/** @deprecated use variant="negative" instead */
-declare const error = "error";
-export type MultiSelectProps<ValueType> = {
-    /** Beskrivende tekst som forklarer feltet */
-    label: string;
-    /** Tilgjengelige valg i MultiSelect */
-    items: PotentiallyAsyncDropdownItemType<ValueType>;
+export type MultiSelectProps<ValueType> = Omit<DropdownProps<ValueType>, 'selectedItem' | 'onChange'> & {
     /** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
      */
     selectedItems: NormalizedDropdownItemType<ValueType>[];
@@ -21,30 +13,6 @@ export type MultiSelectProps<ValueType> = {
      * @default Regex-test som sjekker om item.label inneholder input-teksten
      */
     itemFilter?: (item: NormalizedDropdownItemType<ValueType>, inputValue: string | undefined) => boolean;
-    /** Hvilken valideringsvariant som gjelder */
-    variant?: VariantType | typeof error | typeof info;
-    /** Valideringsmelding, brukes sammen med `variant` */
-    feedback?: string;
-    /** Om dropdown-en er deaktivert */
-    disabled?: boolean;
-    /** Om dropdown-en er i read-only modus */
-    readOnly?: boolean;
-    /** Om en knapp for å fjerne alle valg skal vises
-     * @default true
-     */
-    clearable?: boolean;
-    /** Plasserer ledeteksten statisk på toppen av inputfeltet */
-    disableLabelAnimation?: boolean;
-    /** Placeholder-tekst når ingenting er satt */
-    placeholder?: string;
-    /** 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 treff på filtreringsøket
-     * @default "Ingen treff for søket"
-     */
-    noMatchesText?: string;
     /** Skjuler «Velg alle» fra listen med valg
      * @default false
      */
@@ -57,27 +25,10 @@ export type MultiSelectProps<ValueType> = {
      * @default 10
      */
     maxChips?: number;
-    /** Tekst eller ikon som kommer før MultiSelect */
-    prepend?: React.ReactNode;
     /** Resetter input etter at et element er valgt i listen
      * @default false
      */
     clearInputOnSelect?: 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;
-    style?: React.CSSProperties;
-    /** Styling som sendes ned til MultiSelect-lista */
-    listStyle?: {
-        [key: string]: any;
-    };
-    /** Ekstra klassenavn */
-    className?: string;
     /** Teksten som vises for «Velg alle»-elementet i listen
      * @default "Velg alle"
      */
@@ -90,8 +41,6 @@ export type MultiSelectProps<ValueType> = {
      * @default "Fjern valgte"
      */
     labelClearAllItems?: string;
-    /** En tooltip som gir ekstra info om inputfeltet */
-    labelTooltip?: React.ReactNode;
     /** Tekst for skjemleser på knapper for å fjerne valgt element
      * @default "trykk for å fjerne valg"
      */
@@ -100,27 +49,60 @@ export type MultiSelectProps<ValueType> = {
      * @default "valgte"
      */
     ariaLabelChosenPlural?: string;
-    /** 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;
     /** Tekst for skjemleser for å hoppe til input-feltet
      * @default `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`
      */
     ariaLabelJumpToInput?: string;
-    /** Ord for at et element er valgt i entall
-     * eks. 'Element 1, _valgt_'
-     * @default 'valgt'
+};
+export declare const MultiSelect: <ValueType extends unknown>(props: Omit<DropdownProps<ValueType>, "selectedItem" | "onChange"> & {
+    /** Elementer som er valgt blant 'items'. Bruk tom liste for ingen valgte
      */
-    ariaLabelChosenSingular?: string;
-    /** Tekst for skjermleser som beskriver statusen til et element som valgt
-     * @default ', valgt element, trykk for å fjerne'
+    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
      */
-    ariaLabelSelectedItem?: string;
-};
-export declare const MultiSelect: <ValueType extends unknown>({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, disableLabelAnimation, feedback, hideSelectAll, items: initialItems, itemFilter, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, labelTooltip, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, selectOnTab, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps<ValueType>) => React.JSX.Element;
-export {};
+    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;
+} & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;

package/dist/NativeDropdown.d.ts

@@ -52,5 +52,5 @@ export type NativeDropdownProps<ValueType> = {
     disableLabelAnimation?: boolean;
     [key: string]: any;
 };
-export declare const NativeDropdown: <ValueType extends string | number>({ className, disabled, disableLabelAnimation, feedback, items, label, loadingText, onChange, prepend, readOnly, selectedItem, style, value, variant, ...rest }: NativeDropdownProps<ValueType>) => React.JSX.Element;
+export declare const NativeDropdown: <ValueType extends string | number>(props: NativeDropdownProps<ValueType> & React.RefAttributes<HTMLSelectElement>) => React.ReactElement | null;
 export {};

package/dist/SearchableDropdown.d.ts

@@ -1,95 +1,32 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { VariantType } from '@entur/utils';
-import { NormalizedDropdownItemType, PotentiallyAsyncDropdownItemType } from './types';
+import React from 'react';
+import { DropdownProps } from './Dropdown';
+import { NormalizedDropdownItemType } from './types';
 import './Dropdown.scss';
-/** @deprecated use variant="information" instead */
-declare const info = "info";
-/** @deprecated use variant="negative" instead */
-declare const error = "error";
-export type SearchableDropdownProps<ValueType> = {
-    /** Tilgjengelige valg i dropdown-en */
-    items: PotentiallyAsyncDropdownItemType<ValueType>;
-    /** Valgt element. Bruk null for ingen verdi */
-    selectedItem: NormalizedDropdownItemType<ValueType> | null;
-    /** Callback ved valg som skal brukes til å oppdatere selectedItem */
-    onChange?: (selectedItem: NormalizedDropdownItemType<ValueType> | null) => void | Dispatch<SetStateAction<NormalizedDropdownItemType<ValueType> | null>>;
+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;
-    /** Beskrivende tekst som forklarer feltet */
-    label: string;
-    /** Placeholder-tekst når ingenting er satt */
-    placeholder?: string;
-    /** Vis knapp for å nullstille Dropdown-en skal vises
-     * @default true
-     */
-    clearable?: boolean;
-    /** Plasserer labelen statisk på toppen av inputfeltet
-     * @default false
-     */
-    disableLabelAnimation?: 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;
-    /** Deaktiver dropdown-en */
-    disabled?: 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;
     /** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
      * @default "Ingen treff for søket"
      */
     noMatchesText?: string;
-    /** Gjør dropdown-en til å kun kunne leses
-     * @default false
-     */
-    readOnly?: boolean;
-    /** Tekst eller ikon som kommer før dropdown-en */
-    prepend?: React.ReactNode;
-    /** En tekst som beskriver hva som skjer når man venter på items */
-    loadingText?: string;
-    /** Hvilken valideringsvariant som gjelder*/
-    variant?: VariantType | typeof error | typeof info;
-    /** Valideringsmelding, brukes sammen med `variant` */
-    feedback?: string;
-    className?: string;
-    style?: {
-        [key: string]: any;
-    };
-    /** Style som kun påføres listeelementet */
-    listStyle?: {
-        [key: string]: any;
-    };
-    /** Tekst som beskriver at man fjerner valget sitt
-     * @default "fjern valgt"
-     */
-    labelClearSelectedItem?: string;
-    /** En tooltip som gir ekstra info om inputfeltet */
-    labelTooltip?: React.ReactNode;
-    /** 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"
+};
+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
      */
-    ariaLabelOpenList?: string;
-    /** Ord for at et element er valgt i entall
-     * eks. 'Element 1, _valgt_'
-     * @default "valgt"
+    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.
      */
-    ariaLabelChosenSingular?: string;
-    /** Tekst for skjermleser som beskriver statusen til et element som valgt
-     * @default ", valgt element, trykk for å fjerne"
+    debounceTimeout?: number;
+    /** Tekst som kommer opp når det ikke er noe treff på filtreringsøket
+     * @default "Ingen treff for søket"
      */
-    ariaLabelSelectedItem?: string;
-};
-export declare const SearchableDropdown: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelCloseList, ariaLabelOpenList, ariaLabelSelectedItem, className, clearable, debounceTimeout, disabled, disableLabelAnimation, feedback, items: initialItems, itemFilter, label, labelClearSelectedItem, labelTooltip, listStyle, loadingText, noMatchesText, onChange, placeholder, prepend, readOnly, selectedItem: value, selectOnBlur, selectOnTab, style, variant, ...rest }: SearchableDropdownProps<ValueType>) => React.JSX.Element;
-export {};
+    noMatchesText?: string;
+} & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;

package/dist/components/DropdownList.d.ts

@@ -20,7 +20,7 @@ type DropdownListProps<ValueType> = {
     selectAllCheckboxState?: () => boolean | 'indeterminate';
     selectAllItem?: NormalizedDropdownItemType<string>;
     selectedItems: NormalizedDropdownItemType<ValueType>[];
-    [key: string]: any;
+    style?: React.CSSProperties;
 };
-export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems, floatingStyles, setListRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, showSelectAllInList, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
+export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, isOpen, highlightedIndex, listItems, floatingStyles, setListRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
 export {};

package/dist/components/FieldComponents.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UseComboboxGetToggleButtonPropsOptions, UseMultipleSelectionGetSelectedItemPropsOptions } from 'downshift';
+import { UseComboboxGetToggleButtonPropsReturnValue, UseMultipleSelectionGetSelectedItemPropsOptions } from 'downshift';
 import { NormalizedDropdownItemType } from '../types';
 import './FieldComponents.scss';
 export declare const SelectedItemTag: <ValueType extends unknown>({ ariaLabelRemoveSelected, ariaLabelChosen, disabled, getSelectedItemProps, index, readOnly, removeSelectedItem, selectedItem, }: {
@@ -12,20 +12,22 @@ export declare const SelectedItemTag: <ValueType extends unknown>({ ariaLabelRem
     removeSelectedItem: (item: NormalizedDropdownItemType<ValueType>) => void;
     selectedItem: NormalizedDropdownItemType<ValueType>;
 }) => React.JSX.Element;
-type FieldAppendProps<ValueType> = {
-    ariaHiddenToggleButton?: boolean;
-    ariaLabelCloseList?: string;
-    ariaLabelOpenList?: string;
+export declare const DropdownFieldAppendix: (props: Partial<UseComboboxGetToggleButtonPropsReturnValue> & {
+    ariaLabelCloseList: string;
+    ariaLabelOpenList: string;
     clearable?: boolean;
-    labelClearSelectedItems?: string;
+    labelClearSelected: string;
     disabled?: boolean;
     focusable?: boolean;
-    getToggleButtonProps: (options?: UseComboboxGetToggleButtonPropsOptions | undefined) => any;
     isOpen: boolean;
-    loading?: boolean;
-    loadingText?: string;
+    loading: boolean;
+    loadingText: string | undefined;
+    onClear: () => void;
+    itemIsSelected: boolean;
+} & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const ClearableButton: ({ onClear, labelClearSelectedItems, focusable, }: {
     onClear: () => void;
-    selectedItems: (NormalizedDropdownItemType<ValueType> | null)[];
-};
-export declare const FieldAppend: <ValueType extends unknown>({ ariaHiddenToggleButton, ariaLabelCloseList, ariaLabelOpenList, clearable, labelClearSelectedItems, disabled, focusable, getToggleButtonProps, isOpen, loading, loadingText, onClear, selectedItems, }: FieldAppendProps<ValueType>) => React.JSX.Element | null;
-export {};
+    labelClearSelectedItems?: string;
+    focusable?: boolean;
+    ariaLabelClearItems?: string;
+}) => React.JSX.Element;