devextreme-react/cjs/list.d.ts

DevExtreme React UI and Visualization Components

/*!
 * devextreme-react
 * Version: 24.2.6
 * Build date: Mon Mar 17 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-react
 */

export { ExplicitTypes } from "devextreme/ui/list";
import * as React from "react";
import { Ref, ReactElement } from "react";
import dxList, { Properties } from "devextreme/ui/list";
import { IHtmlOptions, NestedComponentMeta } from "./core/component";
import type { dxListItem, ContentReadyEvent, DisposingEvent, GroupRenderedEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemDeletedEvent, ItemDeletingEvent, ItemHoldEvent, ItemRenderedEvent, ItemReorderedEvent, ItemSwipeEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectAllValueChangedEvent, SelectionChangingEvent } from "devextreme/ui/list";
import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, OptionChangedEvent as ButtonOptionChangedEvent, ClickEvent } from "devextreme/ui/button";
import type { ContentReadyEvent as TextBoxContentReadyEvent, DisposingEvent as TextBoxDisposingEvent, InitializedEvent as TextBoxInitializedEvent, OptionChangedEvent as TextBoxOptionChangedEvent, TextBoxType, ChangeEvent, CopyEvent, CutEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InputEvent, KeyDownEvent, KeyUpEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/text_box";
import type { DisposingEvent as SortableDisposingEvent, InitializedEvent as SortableInitializedEvent, AddEvent, DragChangeEvent, DragEndEvent, DragMoveEvent, DragStartEvent, OptionChangedEvent, RemoveEvent, ReorderEvent } from "devextreme/ui/sortable";
import type { TextEditorButtonLocation, template, DragDirection, DragHighlight, Orientation, ButtonStyle, ButtonType, TextBoxPredefinedButton, TextEditorButton, LabelMode, MaskMode, EditorStyle, ValidationMessageMode, Position, ValidationStatus } from "devextreme/common";
import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base";
type ReplaceFieldTypes<TSource, TReplacement> = {
    [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
};
type IListOptionsNarrowedEvents<TItem = any, TKey = any> = {
    onContentReady?: ((e: ContentReadyEvent<TItem, TKey>) => void);
    onDisposing?: ((e: DisposingEvent<TItem, TKey>) => void);
    onGroupRendered?: ((e: GroupRenderedEvent<TItem, TKey>) => void);
    onInitialized?: ((e: InitializedEvent<TItem, TKey>) => void);
    onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void);
    onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
    onItemDeleted?: ((e: ItemDeletedEvent<TItem, TKey>) => void);
    onItemDeleting?: ((e: ItemDeletingEvent<TItem, TKey>) => void);
    onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void);
    onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void);
    onItemReordered?: ((e: ItemReorderedEvent<TItem, TKey>) => void);
    onItemSwipe?: ((e: ItemSwipeEvent<TItem, TKey>) => void);
    onPageLoading?: ((e: PageLoadingEvent<TItem, TKey>) => void);
    onPullRefresh?: ((e: PullRefreshEvent<TItem, TKey>) => void);
    onScroll?: ((e: ScrollEvent<TItem, TKey>) => void);
    onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void);
    onSelectionChanging?: ((e: SelectionChangingEvent<TItem, TKey>) => void);
};
type IListOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TItem, TKey>, IListOptionsNarrowedEvents<TItem, TKey>> & IHtmlOptions & {
    dataSource?: Properties<TItem, TKey>["dataSource"];
    groupRender?: (...params: any) => React.ReactNode;
    groupComponent?: React.ComponentType<any>;
    itemRender?: (...params: any) => React.ReactNode;
    itemComponent?: React.ComponentType<any>;
    defaultItems?: Array<any | dxListItem | string>;
    defaultSelectedItemKeys?: Array<any>;
    defaultSelectedItems?: Array<any>;
    onItemsChange?: (value: Array<any | dxListItem | string>) => void;
    onSelectedItemKeysChange?: (value: Array<any>) => void;
    onSelectedItemsChange?: (value: Array<any>) => void;
}>;
interface ListRef<TItem = any, TKey = any> {
    instance: () => dxList<TItem, TKey>;
}
declare const List: <TItem = any, TKey = any>(props: ReplaceFieldTypes<Properties<TItem, TKey>, IListOptionsNarrowedEvents<TItem, TKey>> & IHtmlOptions & {
    dataSource?: import("devextreme/data/data_source").DataSourceLike<TItem, TKey> | null | undefined;
    groupRender?: ((...params: any) => React.ReactNode) | undefined;
    groupComponent?: React.ComponentType<any> | undefined;
    itemRender?: ((...params: any) => React.ReactNode) | undefined;
    itemComponent?: React.ComponentType<any> | undefined;
    defaultItems?: any[] | undefined;
    defaultSelectedItemKeys?: any[] | undefined;
    defaultSelectedItems?: any[] | undefined;
    onItemsChange?: ((value: Array<any | dxListItem | string>) => void) | undefined;
    onSelectedItemKeysChange?: ((value: Array<any>) => void) | undefined;
    onSelectedItemsChange?: ((value: Array<any>) => void) | undefined;
} & {
    children?: React.ReactNode;
} & {
    ref?: React.Ref<ListRef<TItem, TKey>> | undefined;
}) => ReactElement | null;
type IButtonProps = React.PropsWithChildren<{
    location?: TextEditorButtonLocation;
    name?: string | undefined;
    options?: dxButtonOptions | undefined;
}>;
declare const Button: ((props: IButtonProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    location?: TextEditorButtonLocation | undefined;
    name?: string | undefined;
    options?: dxButtonOptions | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICursorOffsetProps = React.PropsWithChildren<{
    x?: number;
    y?: number;
}>;
declare const CursorOffset: ((props: ICursorOffsetProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    x?: number | undefined;
    y?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IItemProps = React.PropsWithChildren<{
    badge?: string;
    disabled?: boolean;
    html?: string;
    icon?: string;
    key?: string;
    showChevron?: boolean;
    template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template;
    text?: string;
    visible?: boolean;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
}>;
declare const Item: ((props: IItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    badge?: string | undefined;
    disabled?: boolean | undefined;
    html?: string | undefined;
    icon?: string | undefined;
    key?: string | undefined;
    showChevron?: boolean | undefined;
    template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined;
    text?: string | undefined;
    visible?: boolean | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IItemDraggingProps = React.PropsWithChildren<{
    allowDropInsideItem?: boolean;
    allowReordering?: boolean;
    autoScroll?: boolean;
    bindingOptions?: Record<string, any>;
    boundary?: any | string | undefined;
    container?: any | string | undefined;
    cursorOffset?: Record<string, any> | string | {
        x?: number;
        y?: number;
    };
    data?: any | undefined;
    dragDirection?: DragDirection;
    dragTemplate?: ((dragInfo: {
        fromIndex: number;
        itemData: any;
        itemElement: any;
    }, containerElement: any) => string | any) | template | undefined;
    dropFeedbackMode?: DragHighlight;
    elementAttr?: Record<string, any>;
    filter?: string;
    group?: string | undefined;
    handle?: string;
    height?: (() => number | string) | number | string | undefined;
    itemOrientation?: Orientation;
    moveItemOnDrop?: boolean;
    onAdd?: ((e: AddEvent) => void);
    onDisposing?: ((e: SortableDisposingEvent) => void);
    onDragChange?: ((e: DragChangeEvent) => void);
    onDragEnd?: ((e: DragEndEvent) => void);
    onDragMove?: ((e: DragMoveEvent) => void);
    onDragStart?: ((e: DragStartEvent) => void);
    onInitialized?: ((e: SortableInitializedEvent) => void);
    onOptionChanged?: ((e: OptionChangedEvent) => void);
    onRemove?: ((e: RemoveEvent) => void);
    onReorder?: ((e: ReorderEvent) => void);
    rtlEnabled?: boolean;
    scrollSensitivity?: number;
    scrollSpeed?: number;
    width?: (() => number | string) | number | string | undefined;
    dragRender?: (...params: any) => React.ReactNode;
    dragComponent?: React.ComponentType<any>;
}>;
declare const ItemDragging: ((props: IItemDraggingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    allowDropInsideItem?: boolean | undefined;
    allowReordering?: boolean | undefined;
    autoScroll?: boolean | undefined;
    bindingOptions?: Record<string, any> | undefined;
    boundary?: any | string | undefined;
    container?: any | string | undefined;
    cursorOffset?: string | Record<string, any> | {
        x?: number | undefined;
        y?: number | undefined;
    } | undefined;
    data?: any | undefined;
    dragDirection?: DragDirection | undefined;
    dragTemplate?: template | ((dragInfo: {
        fromIndex: number;
        itemData: any;
        itemElement: any;
    }, containerElement: any) => string | any) | undefined;
    dropFeedbackMode?: DragHighlight | undefined;
    elementAttr?: Record<string, any> | undefined;
    filter?: string | undefined;
    group?: string | undefined;
    handle?: string | undefined;
    height?: (() => number | string) | number | string | undefined;
    itemOrientation?: Orientation | undefined;
    moveItemOnDrop?: boolean | undefined;
    onAdd?: ((e: AddEvent) => void) | undefined;
    onDisposing?: ((e: SortableDisposingEvent) => void) | undefined;
    onDragChange?: ((e: DragChangeEvent) => void) | undefined;
    onDragEnd?: ((e: DragEndEvent) => void) | undefined;
    onDragMove?: ((e: DragMoveEvent) => void) | undefined;
    onDragStart?: ((e: DragStartEvent) => void) | undefined;
    onInitialized?: ((e: SortableInitializedEvent) => void) | undefined;
    onOptionChanged?: ((e: OptionChangedEvent) => void) | undefined;
    onRemove?: ((e: RemoveEvent) => void) | undefined;
    onReorder?: ((e: ReorderEvent) => void) | undefined;
    rtlEnabled?: boolean | undefined;
    scrollSensitivity?: number | undefined;
    scrollSpeed?: number | undefined;
    width?: (() => number | string) | number | string | undefined;
    dragRender?: ((...params: any) => React.ReactNode) | undefined;
    dragComponent?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IMenuItemProps = React.PropsWithChildren<{
    action?: ((itemElement: any, itemData: any) => void);
    text?: string;
}>;
declare const MenuItem: ((props: IMenuItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    action?: ((itemElement: any, itemData: any) => void) | undefined;
    text?: string | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IOptionsProps = React.PropsWithChildren<{
    accessKey?: string | undefined;
    activeStateEnabled?: boolean;
    bindingOptions?: Record<string, any>;
    disabled?: boolean;
    elementAttr?: Record<string, any>;
    focusStateEnabled?: boolean;
    height?: (() => number | string) | number | string | undefined;
    hint?: string | undefined;
    hoverStateEnabled?: boolean;
    icon?: string;
    onClick?: ((e: ClickEvent) => void);
    onContentReady?: ((e: ButtonContentReadyEvent) => void);
    onDisposing?: ((e: ButtonDisposingEvent) => void);
    onInitialized?: ((e: ButtonInitializedEvent) => void);
    onOptionChanged?: ((e: ButtonOptionChangedEvent) => void);
    rtlEnabled?: boolean;
    stylingMode?: ButtonStyle;
    tabIndex?: number;
    template?: ((buttonData: {
        icon: string;
        text: string;
    }, contentElement: any) => string | any) | template;
    text?: string;
    type?: ButtonType | string;
    useSubmitBehavior?: boolean;
    validationGroup?: string | undefined;
    visible?: boolean;
    width?: (() => number | string) | number | string | undefined;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
}>;
declare const Options: ((props: IOptionsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    accessKey?: string | undefined;
    activeStateEnabled?: boolean | undefined;
    bindingOptions?: Record<string, any> | undefined;
    disabled?: boolean | undefined;
    elementAttr?: Record<string, any> | undefined;
    focusStateEnabled?: boolean | undefined;
    height?: (() => number | string) | number | string | undefined;
    hint?: string | undefined;
    hoverStateEnabled?: boolean | undefined;
    icon?: string | undefined;
    onClick?: ((e: ClickEvent) => void) | undefined;
    onContentReady?: ((e: ButtonContentReadyEvent) => void) | undefined;
    onDisposing?: ((e: ButtonDisposingEvent) => void) | undefined;
    onInitialized?: ((e: ButtonInitializedEvent) => void) | undefined;
    onOptionChanged?: ((e: ButtonOptionChangedEvent) => void) | undefined;
    rtlEnabled?: boolean | undefined;
    stylingMode?: ButtonStyle | undefined;
    tabIndex?: number | undefined;
    template?: template | ((buttonData: {
        icon: string;
        text: string;
    }, contentElement: any) => string | any) | undefined;
    text?: string | undefined;
    type?: string | undefined;
    useSubmitBehavior?: boolean | undefined;
    validationGroup?: string | undefined;
    visible?: boolean | undefined;
    width?: (() => number | string) | number | string | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ISearchEditorOptionsProps = React.PropsWithChildren<{
    accessKey?: string | undefined;
    activeStateEnabled?: boolean;
    bindingOptions?: Record<string, any>;
    buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton>;
    disabled?: boolean;
    elementAttr?: Record<string, any>;
    focusStateEnabled?: boolean;
    height?: (() => number | string) | number | string | undefined;
    hint?: string | undefined;
    hoverStateEnabled?: boolean;
    inputAttr?: any;
    isDirty?: boolean;
    isValid?: boolean;
    label?: string;
    labelMode?: LabelMode;
    mask?: string;
    maskChar?: string;
    maskInvalidMessage?: string;
    maskRules?: any;
    maxLength?: number | string;
    mode?: TextBoxType;
    name?: string;
    onChange?: ((e: ChangeEvent) => void);
    onContentReady?: ((e: TextBoxContentReadyEvent) => void);
    onCopy?: ((e: CopyEvent) => void);
    onCut?: ((e: CutEvent) => void);
    onDisposing?: ((e: TextBoxDisposingEvent) => void);
    onEnterKey?: ((e: EnterKeyEvent) => void);
    onFocusIn?: ((e: FocusInEvent) => void);
    onFocusOut?: ((e: FocusOutEvent) => void);
    onInitialized?: ((e: TextBoxInitializedEvent) => void);
    onInput?: ((e: InputEvent) => void);
    onKeyDown?: ((e: KeyDownEvent) => void);
    onKeyUp?: ((e: KeyUpEvent) => void);
    onOptionChanged?: ((e: TextBoxOptionChangedEvent) => void);
    onPaste?: ((e: PasteEvent) => void);
    onValueChanged?: ((e: ValueChangedEvent) => void);
    placeholder?: string;
    readOnly?: boolean;
    rtlEnabled?: boolean;
    showClearButton?: boolean;
    showMaskMode?: MaskMode;
    spellcheck?: boolean;
    stylingMode?: EditorStyle;
    tabIndex?: number;
    text?: string;
    useMaskedValue?: boolean;
    validationError?: any;
    validationErrors?: Array<any>;
    validationMessageMode?: ValidationMessageMode;
    validationMessagePosition?: Position;
    validationStatus?: ValidationStatus;
    value?: string;
    valueChangeEvent?: string;
    visible?: boolean;
    width?: (() => number | string) | number | string | undefined;
    defaultValue?: string;
    onValueChange?: (value: string) => void;
}>;
declare const SearchEditorOptions: ((props: ISearchEditorOptionsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    accessKey?: string | undefined;
    activeStateEnabled?: boolean | undefined;
    bindingOptions?: Record<string, any> | undefined;
    buttons?: (string | TextEditorButton)[] | undefined;
    disabled?: boolean | undefined;
    elementAttr?: Record<string, any> | undefined;
    focusStateEnabled?: boolean | undefined;
    height?: (() => number | string) | number | string | undefined;
    hint?: string | undefined;
    hoverStateEnabled?: boolean | undefined;
    inputAttr?: any;
    isDirty?: boolean | undefined;
    isValid?: boolean | undefined;
    label?: string | undefined;
    labelMode?: LabelMode | undefined;
    mask?: string | undefined;
    maskChar?: string | undefined;
    maskInvalidMessage?: string | undefined;
    maskRules?: any;
    maxLength?: string | number | undefined;
    mode?: TextBoxType | undefined;
    name?: string | undefined;
    onChange?: ((e: ChangeEvent) => void) | undefined;
    onContentReady?: ((e: TextBoxContentReadyEvent) => void) | undefined;
    onCopy?: ((e: CopyEvent) => void) | undefined;
    onCut?: ((e: CutEvent) => void) | undefined;
    onDisposing?: ((e: TextBoxDisposingEvent) => void) | undefined;
    onEnterKey?: ((e: EnterKeyEvent) => void) | undefined;
    onFocusIn?: ((e: FocusInEvent) => void) | undefined;
    onFocusOut?: ((e: FocusOutEvent) => void) | undefined;
    onInitialized?: ((e: TextBoxInitializedEvent) => void) | undefined;
    onInput?: ((e: InputEvent) => void) | undefined;
    onKeyDown?: ((e: KeyDownEvent) => void) | undefined;
    onKeyUp?: ((e: KeyUpEvent) => void) | undefined;
    onOptionChanged?: ((e: TextBoxOptionChangedEvent) => void) | undefined;
    onPaste?: ((e: PasteEvent) => void) | undefined;
    onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
    placeholder?: string | undefined;
    readOnly?: boolean | undefined;
    rtlEnabled?: boolean | undefined;
    showClearButton?: boolean | undefined;
    showMaskMode?: MaskMode | undefined;
    spellcheck?: boolean | undefined;
    stylingMode?: EditorStyle | undefined;
    tabIndex?: number | undefined;
    text?: string | undefined;
    useMaskedValue?: boolean | undefined;
    validationError?: any;
    validationErrors?: any[] | undefined;
    validationMessageMode?: ValidationMessageMode | undefined;
    validationMessagePosition?: Position | undefined;
    validationStatus?: ValidationStatus | undefined;
    value?: string | undefined;
    valueChangeEvent?: string | undefined;
    visible?: boolean | undefined;
    width?: (() => number | string) | number | string | undefined;
    defaultValue?: string | undefined;
    onValueChange?: ((value: string) => void) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
export default List;
export { List, IListOptions, ListRef, Button, IButtonProps, CursorOffset, ICursorOffsetProps, Item, IItemProps, ItemDragging, IItemDraggingProps, MenuItem, IMenuItemProps, Options, IOptionsProps, SearchEditorOptions, ISearchEditorOptionsProps };
import type * as ListTypes from 'devextreme/ui/list_types';
export { ListTypes };