@oslokommune/punkt-react/dist/components/combobox/types.d.ts

React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo

import { ChangeEvent, ChangeEventHandler, FocusEvent, KeyboardEvent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from 'react';
import { IPktComboboxOption, TPktComboboxDisplayValue, TPktComboboxTagPlacement } from '../../shared-types/combobox';
export interface IPktCombobox {
    value?: string | string[];
    defaultValue?: string | string[];
    options?: IPktComboboxOption[];
    defaultOptions?: IPktComboboxOption[];
    multiple?: boolean;
    maxlength?: number;
    typeahead?: boolean;
    includeSearch?: boolean;
    allowUserInput?: boolean;
    displayValueAs?: TPktComboboxDisplayValue;
    tagPlacement?: TPktComboboxTagPlacement;
    searchPlaceholder?: string;
    name?: string;
    id?: string;
    disabled?: boolean;
    required?: boolean;
    placeholder?: string;
    label?: string;
    helptext?: string | ReactNode;
    helptextDropdown?: string | ReactNode;
    helptextDropdownButton?: string;
    hasError?: boolean;
    errorMessage?: string | ReactNode;
    fullwidth?: boolean;
    requiredTag?: boolean;
    requiredText?: string;
    optionalTag?: boolean;
    optionalText?: string;
    tagText?: string;
    useWrapper?: boolean;
    inputSize?: 'small' | 'medium' | 'xsmall';
    onChange?: ChangeEventHandler<HTMLInputElement>;
    onValueChange?: (values: string[]) => void;
    className?: string;
    children?: ReactNode;
}
export interface IComboboxState {
    id: string;
    inputId: string;
    listboxId: string;
    values: string[];
    inputValue: string;
    searchValue: string;
    options: IPktComboboxOption[];
    filteredOptions: IPktComboboxOption[];
    isOpen: boolean;
    userInfoMessage: string;
    addValueText: string | null;
    maxIsReached: boolean;
    editingSingleValue: boolean;
    inputFocus: boolean;
    focusedTagIndex: number;
    label?: string;
    multiple: boolean;
    maxlength?: number;
    typeahead: boolean;
    includeSearch: boolean;
    allowUserInput: boolean;
    displayValueAs: TPktComboboxDisplayValue;
    tagPlacement?: TPktComboboxTagPlacement;
    searchPlaceholder?: string;
    placeholder?: string;
    disabled: boolean;
    required: boolean;
    fullwidth: boolean;
    hasError: boolean;
    errorMessage?: string | ReactNode;
    helptext?: string | ReactNode;
    helptextDropdown?: string | ReactNode;
    helptextDropdownButton?: string;
    optionalTag: boolean;
    optionalText?: string;
    requiredTag: boolean;
    requiredText?: string;
    tagText?: string;
    useWrapper: boolean;
    inputSize: 'small' | 'medium' | 'xsmall';
    name?: string;
    className?: string;
    hasCounter: boolean;
    inputRef: RefObject<HTMLInputElement | null>;
    changeInputRef: RefObject<HTMLInputElement | null>;
    triggerRef: RefObject<HTMLDivElement | null>;
    listboxRef: RefObject<HTMLDivElement | null>;
    wrapperRef: RefObject<HTMLDivElement | null>;
    handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
    handleInputKeydown: (e: KeyboardEvent<HTMLInputElement>) => void;
    handleInputFocus: () => void;
    handleInputBlur: () => void;
    handleFocusOut: (e: FocusEvent) => void;
    handleInputClick: (e: ReactMouseEvent) => void;
    handlePlaceholderClick: (e: ReactMouseEvent) => void;
    handleSelectOnlyKeydown: (e: ReactKeyboardEvent) => void;
    handleOptionClick: (value: string) => void;
    handleOptionKeydown: (e: KeyboardEvent<HTMLLIElement>, value: string) => void;
    handleTagRemove: (value: string) => void;
    handleTagKeydown: (e: ReactKeyboardEvent, index: number) => void;
    handleSearchInput: (e: ChangeEvent<HTMLInputElement>) => void;
    handleSearchKeydown: (e: KeyboardEvent<HTMLInputElement>) => void;
    handleNewOptionClick: (value: string) => void;
    handleNewOptionKeydown: (e: KeyboardEvent<HTMLDivElement>) => void;
    onChange?: ChangeEventHandler<HTMLInputElement>;
}