@entur/dropdown 4.0.9 → 5.0.0-beta.0

package/dist/beta/Dropdown.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { VariantType } from '@entur/form';
+import { NormalizedDropdownItemType } from '../useNormalizedItems';
+import { PotentiallyAsyncDropdownItemType } from '../useResolvedItems';
+import './Dropdown.scss';
+export type DropdownBetaProps = {
+    /** Tilgjengelige valg i dropdown-en */
+    items: PotentiallyAsyncDropdownItemType;
+    /** Valgt verdi. Bruk null for ingen verdi. */
+    selectedItem: NormalizedDropdownItemType | null;
+    /** Beskrivende tekst som forklarer feltet */
+    label: string;
+    /** Tooltip for labelen */
+    labelTooltip?: string;
+    /** Hvilken valideringsvariant som gjelder */
+    variant?: VariantType;
+    /** Valideringsmelding, brukes sammen med `variant` */
+    feedback?: string;
+    /** Tekst eller ikon som kommer før dropdown-en */
+    prepend?: React.ReactNode;
+    /** Deaktiver dropdown-en */
+    disabled?: boolean;
+    /** Setter dropdown-en i read-only modus */
+    readOnly?: boolean;
+    /** Placeholder-tekst når ingenting er satt */
+    placeholder?: string;
+    /** En tekst som beskriver hva som skjer når man venter på items */
+    loadingText?: string;
+    /** Callback når brukeren endrer valg */
+    onChange?: (selectedItem: NormalizedDropdownItemType | null) => void;
+    /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
+    selectOnTab?: boolean;
+    /** Om man skal vise items ved fokusering av input-feltet, før man skriver inn noe */
+    openOnFocus?: boolean;
+    /** Antall millisekunder man venter før man kaller en potensiell items-funksjon */
+    debounceTimeout?: number;
+    /** Om man skal ha mulighet for å nullstille Dropdown-en
+     * @default false
+     */
+    clearable?: boolean;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Marker første valgmulighet automatisk */
+    highlightFirstItemOnOpen?: boolean;
+    /** Styling som sendes ned til Dropdown-lista */
+    listStyle?: {
+        [key: string]: any;
+    };
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+    /** Alle ekstra props videresendes til Downshift */
+    [key: string]: any;
+};
+export declare const DropdownBeta: ({ className, clearable, debounceTimeout, feedback, items: initialItems, label, listStyle, onChange, openOnFocus, placeholder, readonly, selectedItem, selectOnBlur, selectOnTab, variant, ...rest }: DropdownBetaProps) => JSX.Element;

package/dist/beta/MultiSelect.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { VariantType } from '@entur/form';
+import { NormalizedDropdownItemType } from '../useNormalizedItems';
+import { PotentiallyAsyncDropdownItemType } from '../useResolvedItems';
+import './Dropdown.scss';
+export type MultiSelectBetaProps = {
+    /** Tilgjengelige valg i MultiSelect */
+    items: PotentiallyAsyncDropdownItemType;
+    /** Elementer som er valgt blant 'items'.
+     *  Denne skal oppdateres av onChange.
+     */
+    selectedItems: NormalizedDropdownItemType[];
+    /** Callback med alle valgte verdier.
+     *  Bruk denne til å oppdatere selectedItems-listen */
+    onChange: (selectedItems: NormalizedDropdownItemType[]) => void;
+    /** Beskrivende tekst som forklarer feltet */
+    label?: string;
+    /** Hvilken valideringsvariant som gjelder */
+    variant?: VariantType;
+    /** Valideringsmelding, brukes sammen med `variant` */
+    feedback?: string;
+    /** Tekst eller ikon som kommer før MultiSelect */
+    prepend?: React.ReactNode;
+    /** Om dropdown-en er deaktivert */
+    disabled?: boolean;
+    /** Om dropdown-en er i read-only modus */
+    readOnly?: boolean;
+    /** Placeholder-tekst når ingenting er satt */
+    placeholder?: string;
+    /** En tekst som beskriver hva som skjer når man venter på items */
+    loadingText?: string;
+    /** Om man skal vise items ved fokusering av input-feltet, før man skriver inn noe
+     * @default false
+     */
+    openOnFocus?: boolean;
+    /** Skjuler «Velg alle» fra listen med valg
+     * @default false
+     */
+    hideSelectAll?: boolean;
+    /** Teksten som vises for «Velg alle»-elementet i listen
+     * @default "Velg alle"
+     */
+    selectAllLabel?: string;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Tekst for skjemleser på knapper for å fjerne valgt element
+     * @default "trykk for å fjerne valg"
+     */
+    ariaLabelRemoveSelected?: string;
+    /** Styling som sendes ned til MultiSelect-lista */
+    listStyle?: {
+        [key: string]: any;
+    };
+    /** Antall millisekunder man venter før man kaller en potensiell items-funksjon
+     * @default 250
+     */
+    debounceTimeout?: number;
+    /** Om en knapp for å fjerne alle valg skal vises
+     * @default false
+     */
+    clearable?: boolean;
+    selectOnBlur?: boolean;
+    readonly?: boolean;
+    loading?: boolean;
+    style?: React.CSSProperties;
+};
+export declare const MultiSelectBeta: ({ ariaLabelRemoveSelected, className, clearable, debounceTimeout, feedback, hideSelectAll, items: initialItems, label, listStyle, onChange, openOnFocus, placeholder, readonly, selectAllLabel, selectedItems, selectOnBlur, style, variant, ...rest }: MultiSelectBetaProps) => JSX.Element;

package/dist/beta/SearchableDropdown.d.ts

@@ -1,14 +1,21 @@
 /// <reference types="react" />
 import { VariantType } from '@entur/form';
 import { NormalizedDropdownItemType } from '../useNormalizedItems';
-import './dropdown.scss';
+import { PotentiallyAsyncDropdownItemType } from '../useResolvedItems';
+import './Dropdown.scss';
 export type SearchableDropdownProps = {
     /** Tilgjengelige valg i dropdown-en */
-    items: NormalizedDropdownItemType[];
-    /** Valgt element. Bruk null for ingen verdi. */
+    items: PotentiallyAsyncDropdownItemType;
+    /** Valgt element. Bruk null for ingen verdi.
+     * Det er denne som skal oppdateres av onChange
+     */
     selectedItem: NormalizedDropdownItemType | null;
     /** Callback for når brukeren endrer valg */
     onChange: (value: NormalizedDropdownItemType | null) => void;
+    /** Filtreringen som blir brukt dersom man har en searchable Dropdown
+     * @default Enkel tekstsammenligning
+     */
+    itemFilter?: (item: NormalizedDropdownItemType, inputValue: string | undefined) => boolean;
     /** Beskrivende tekst som forklarer feltet */
     label: string;
     /** Placeholder-tekst når ingenting er satt */
@@ -21,10 +28,17 @@ export type SearchableDropdownProps = {
      * @default false
      */
     openOnFocus?: boolean;
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+    /** Antall millisekunder man venter før man kaller en potensiell items-funksjon */
+    debounceTimeout?: number;
     /** Gjør dropdown-en til å kun kunne leses
      * @default false
      */
     readonly?: boolean;
+    selectOnBlur?: boolean;
     /** Hvilken valideringsvariant som gjelder */
     variant?: VariantType;
     /** Valideringsmelding, brukes sammen med `variant` */
@@ -37,6 +51,5 @@ export type SearchableDropdownProps = {
     listStyle?: {
         [key: string]: any;
     };
-    [key: string]: any;
 };
-export declare const SearchableDropdownBeta: ({ items, selectedItem: value, onChange, label, placeholder, clearable, openOnFocus, readonly, feedback, variant, className, listStyle, ...rest }: SearchableDropdownProps) => JSX.Element;
+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;

package/dist/beta/components/DropdownList.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { UseComboboxGetMenuPropsOptions, GetPropsCommonOptions, UseComboboxGetItemPropsOptions } from 'downshift';
+import { NormalizedDropdownItemType } from '../../useNormalizedItems';
+import './DropdownList.scss';
+type DropdownListProps = {
+    selectedItems: NormalizedDropdownItemType[];
+    isOpen: boolean;
+    listItems: NormalizedDropdownItemType[];
+    highlightedIndex: number;
+    listStyle: {
+        [key: string]: any;
+    } | undefined;
+    getMenuProps: (options?: UseComboboxGetMenuPropsOptions | undefined, otherOptions?: GetPropsCommonOptions | undefined) => any;
+    getItemProps: (options: UseComboboxGetItemPropsOptions<NormalizedDropdownItemType>) => any;
+    selectAllCheckboxState?: () => boolean | 'indeterminate';
+    noMatchesText?: string;
+    loadingText?: string;
+    selectedItemAriaLabel?: string;
+    loading?: boolean;
+    selectAllItem?: NormalizedDropdownItemType;
+    [key: string]: any;
+};
+export declare const DropdownList: ({ selectedItems, listItems, inputValue, isOpen, getMenuProps, getItemProps, highlightedIndex, showSelectAllInList, loading, selectAllCheckboxState, selectAllItem, listStyle, noMatchesText, loadingText, selectedItemAriaLabel, ...rest }: DropdownListProps) => JSX.Element;
+export {};

package/dist/beta/components/FieldComponents.d.ts

@@ -0,0 +1,24 @@
+import { UseComboboxGetToggleButtonPropsOptions, UseMultipleSelectionGetSelectedItemPropsOptions } from 'downshift';
+import { NormalizedDropdownItemType } from '../../useNormalizedItems';
+import React from 'react';
+import './FieldComponents.scss';
+export declare const SelectedElementsTag: ({ getSelectedItemProps, removeSelectedItem, selectedItem, index, ariaLabelRemoveSelected, }: {
+    getSelectedItemProps: (options: UseMultipleSelectionGetSelectedItemPropsOptions<NormalizedDropdownItemType>) => any;
+    removeSelectedItem: (item: NormalizedDropdownItemType) => void;
+    selectedItem: NormalizedDropdownItemType;
+    index: number;
+    ariaLabelRemoveSelected: string;
+}) => JSX.Element;
+export declare const FieldAppend: React.FC<{
+    selectedItems: (NormalizedDropdownItemType | null)[];
+    isOpen: boolean;
+    clearable: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    ariaLabelClearItems?: string;
+    clearSelectedItemsLabel?: string;
+    readOnly: boolean;
+    focusable?: boolean;
+    onClear: () => void;
+    getToggleButtonProps: (options?: UseComboboxGetToggleButtonPropsOptions | undefined) => any;
+}>;

package/dist/beta/index.d.ts

@@ -1 +1,3 @@
 export * from './SearchableDropdown';
+export * from './MultiSelect';
+export * from './Dropdown';

package/dist/beta/utils.d.ts

@@ -0,0 +1,22 @@
+import { NormalizedDropdownItemType } from '../useNormalizedItems';
+export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType, input: string | undefined): boolean;
+export declare const itemToString: (item: NormalizedDropdownItemType | null) => string;
+type useMultiselectUtilsType = {
+    selectedItems: NormalizedDropdownItemType[];
+    listItems: NormalizedDropdownItemType[];
+    selectAllValue: string;
+};
+export declare const useMultiselectUtils: ({ listItems, selectedItems, selectAllValue, }: useMultiselectUtilsType) => {
+    addClickedItemToSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
+    allListItemsAreSelected: boolean;
+    clickedItemIsInSelectedItems: (clickedItem: NormalizedDropdownItemType) => boolean;
+    clickedItemIsSelectAll: (clickedItem: NormalizedDropdownItemType) => boolean;
+    hasSelectedItems: boolean;
+    listItemsWithoutSelectAll: NormalizedDropdownItemType[];
+    removeClickedItemFromSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
+    selectAllCheckboxState: () => boolean | "indeterminate";
+    selectAllUnselectedItemsInListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
+    someListItemsAreSelected: boolean;
+    unselectAllListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
+};
+export {};