diff --git a/app/package.json b/app/package.json
index 0a8d9fb4b1..4a9373171e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -30,6 +30,7 @@
     "@epam/uui-docs": "5.7.1",
     "@epam/uui-editor": "5.7.1",
     "@epam/uui-timeline": "5.7.1",
+    "@tanstack/react-query": "^5.17.19",
     "@udecode/plate-common": "25.0.1",
     "amplitude-js": "8.9.1",
     "classnames": "2.2.6",
diff --git a/app/src/common/apiReference/TypeRefTable.tsx b/app/src/common/apiReference/TypeRefTable.tsx
index 9552dbc2f9..697139d596 100644
--- a/app/src/common/apiReference/TypeRefTable.tsx
+++ b/app/src/common/apiReference/TypeRefTable.tsx
@@ -68,7 +68,7 @@ export function TypeRefTable(props: TypeRefTableProps) {
         [items, props.isGrouped],
     );
 
-    const view = exportPropsDs.getView(tableState, setTableState, {
+    const view = exportPropsDs.useView(tableState, setTableState, {
         isFoldedByDefault: () => false,
     });
 
diff --git a/app/src/demo/tables/editableTable/ProjectTableDemo.tsx b/app/src/demo/tables/editableTable/ProjectTableDemo.tsx
index c2609ce847..8899a6aa39 100644
--- a/app/src/demo/tables/editableTable/ProjectTableDemo.tsx
+++ b/app/src/demo/tables/editableTable/ProjectTableDemo.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { DataTable, Panel, Button, FlexCell, FlexRow, FlexSpacer, IconButton, useForm, SearchInput, Tooltip } from '@epam/uui';
-import { AcceptDropParams, DataTableState, DropParams, DropPosition, Metadata, useList } from '@epam/uui-core';
+import { AcceptDropParams, DataTableState, DropParams, DropPosition, Metadata, useArrayDataSource } from '@epam/uui-core';
 import { useDataTableFocusManager } from '@epam/uui-components';
 
 import { ReactComponent as undoIcon } from '@epam/assets/icons/content-edit_undo-outline.svg';
@@ -39,7 +39,7 @@ let savedValue: FormState = { items: getDemoTasks() };
 
 export function ProjectTableDemo() {
     const {
-        lens, value, save, isChanged, revert, undo, canUndo, redo, canRedo, setValue,
+        value, save, isChanged, revert, undo, canUndo, redo, canRedo, setValue, lens,
     } = useForm<FormState>({
         value: savedValue,
         onSave: async (data) => {
@@ -52,7 +52,6 @@ export function ProjectTableDemo() {
     const [tableState, setTableState] = useState<DataTableState>({ sorting: [{ field: 'order' }], visibleCount: 1000 });
     const dataTableFocusManager = useDataTableFocusManager<Task['id']>({}, []);
 
-    // Insert new/exiting top/bottom or above/below relative to other task
     const insertTask = useCallback((position: DropPosition, relativeTask: Task | null = null, existingTask: Task | null = null) => {
         let tempRelativeTask = relativeTask;
         const task: Task = existingTask ? { ...existingTask } : { id: lastId--, name: '' };
@@ -117,15 +116,13 @@ export function ProjectTableDemo() {
         [],
     );
 
-    const { rows, listProps } = useList(
+    const dataSource = useArrayDataSource<Task, number, any>(
         {
-            type: 'array',
-            listState: tableState,
-            setListState: setTableState,
             items: Object.values(value.items),
             getSearchFields: (item) => [item.name],
             getId: (i) => i.id,
             getParentId: (i) => i.parentId,
+            fixItemBetweenSortings: false,
             getRowOptions: (task) => ({
                 ...lens.prop('items').prop(task.id).toProps(), // pass IEditable to each row to allow editing
                 // checkbox: { isVisible: true },
@@ -141,6 +138,8 @@ export function ProjectTableDemo() {
         [],
     );
 
+    const view = dataSource.useView(tableState, setTableState);
+
     const columns = useMemo(
         () => getColumns({ insertTask, deleteTask }),
         [insertTask, deleteTask],
@@ -156,7 +155,7 @@ export function ProjectTableDemo() {
     const deleteSelectedItem = useCallback(() => {
         if (selectedItem === undefined) return;
         
-        const prevRows = [...rows];
+        const prevRows = [...view.getVisibleRows()];
         deleteTask(selectedItem);
         const index = prevRows.findIndex((task) => task.id === selectedItem.id);
         const newSelectedIndex = index === prevRows.length - 1
@@ -167,7 +166,7 @@ export function ProjectTableDemo() {
             ...state,
             selectedId: newSelectedIndex >= 0 ? prevRows[newSelectedIndex].id : undefined,
         }));
-    }, [deleteTask, rows, selectedItem, setTableState]);
+    }, [deleteTask, view, selectedItem, setTableState]);
 
     const keydownHandler = useCallback((event: KeyboardEvent) => {
         if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.code === 'Enter') {
@@ -251,7 +250,7 @@ export function ProjectTableDemo() {
             </FlexRow>
             <DataTable
                 headerTextCase="upper"
-                getRows={ () => rows }
+                getRows={ view.getVisibleRows }
                 columns={ columns }
                 value={ tableState }
                 onValueChange={ setTableState }
@@ -259,7 +258,7 @@ export function ProjectTableDemo() {
                 showColumnsConfig
                 allowColumnsResizing
                 allowColumnsReordering
-                { ...listProps }
+                { ...view.getListProps() }
             />
         </Panel>
     );
diff --git a/app/src/demo/tables/editableTable/helpers.ts b/app/src/demo/tables/editableTable/helpers.ts
index b76861d92b..58e1c33a71 100644
--- a/app/src/demo/tables/editableTable/helpers.ts
+++ b/app/src/demo/tables/editableTable/helpers.ts
@@ -52,12 +52,18 @@ const findAllChildren = (tasks: Task[], parentTask: Task) => {
 
 export const deleteTaskWithChildren = (tasks: Record<number, Task>, taskToDelete: Task | null): Record<number, Task> => {
     const currentTasks = { ...tasks };
-    if (!taskToDelete) {
+    let taskToBeDeleted = taskToDelete;
+    if (taskToBeDeleted === undefined) {
+        const rootItems = Object.values(currentTasks).filter((task) => task.parentId === undefined);
+        taskToBeDeleted = rootItems[rootItems.length - 1];
+    }
+
+    if (!taskToBeDeleted) {
         return currentTasks;
     }
 
-    const childrenIds = findAllChildren(Object.values(currentTasks), taskToDelete);
-    [taskToDelete.id, ...childrenIds].forEach((id) => {
+    const childrenIds = findAllChildren(Object.values(currentTasks), taskToBeDeleted);
+    [taskToBeDeleted.id, ...childrenIds].forEach((id) => {
         delete currentTasks[id];
     });
 
diff --git a/app/src/demo/tables/filteredTable/FilteredTable.tsx b/app/src/demo/tables/filteredTable/FilteredTable.tsx
index 67422c5ea1..5a06a779e7 100644
--- a/app/src/demo/tables/filteredTable/FilteredTable.tsx
+++ b/app/src/demo/tables/filteredTable/FilteredTable.tsx
@@ -7,8 +7,8 @@ import {
 } from '@epam/uui';
 import { getFilters } from './filters';
 import {
-    useLazyDataSource, useUuiContext, UuiContexts, useTableState, LazyDataSourceApiRequest, ITablePreset,
-    DataQueryFilter,
+    useUuiContext, UuiContexts, useTableState, LazyDataSourceApiRequest, ITablePreset,
+    DataQueryFilter, useLazyDataSource,
 } from '@epam/uui-core';
 import { FilteredTableFooter } from './FilteredTableFooter';
 import { Person } from '@epam/uui-docs';
@@ -58,7 +58,7 @@ export function FilteredTable() {
         return result;
     }, [svc.api.demo]);
 
-    const dataSource = useLazyDataSource<Person, number, Person>(
+    const dataSource = useLazyDataSource<Person, number, DataQueryFilter<Person>>(
         {
             api: api,
             selectAll: false,
diff --git a/app/src/demo/tables/masterDetailedTable/FilterPanel/FilterPanel.tsx b/app/src/demo/tables/masterDetailedTable/FilterPanel/FilterPanel.tsx
index 5328c6be72..abb73cd538 100644
--- a/app/src/demo/tables/masterDetailedTable/FilterPanel/FilterPanel.tsx
+++ b/app/src/demo/tables/masterDetailedTable/FilterPanel/FilterPanel.tsx
@@ -10,13 +10,13 @@ import { FiltersBlock } from './FiltersBlock';
 // import { ColumnsBlock } from './ColumnsBlock';
 import { GroupingBlock } from './GroupingBlock';
 
-export interface IFilterPanelProps<TFilter extends Record<string, any>> extends ITableState<TFilter> {
+export interface IFilterPanelProps<TFilter> extends ITableState<TFilter> {
     columns: DataColumnProps[];
     filters: TableFiltersConfig<TFilter>[];
     closePanel(): void;
 }
 
-function FilterPanel<TFilter = any>(props: IFilterPanelProps<TFilter>) {
+function FilterPanel<TFilter extends { groupBy?: string[] } = any>(props: IFilterPanelProps<TFilter>) {
     return (
         <>
             <FlexRow borderBottom size="48" padding="18">
diff --git a/app/src/demo/tables/masterDetailedTable/FilterPanel/GroupingBlock/GroupingBlock.tsx b/app/src/demo/tables/masterDetailedTable/FilterPanel/GroupingBlock/GroupingBlock.tsx
index f10e7630ec..97b3837a36 100644
--- a/app/src/demo/tables/masterDetailedTable/FilterPanel/GroupingBlock/GroupingBlock.tsx
+++ b/app/src/demo/tables/masterDetailedTable/FilterPanel/GroupingBlock/GroupingBlock.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { Accordion, PickerList } from '@epam/uui';
 import { DataTableState } from '@epam/uui-core';
 import { groupingsDataSource } from '../../groupings';
 
 interface GroupingBlockProps<TFilter> {
     tableState: DataTableState<TFilter>;
-    setTableState(newState: DataTableState<TFilter>): void;
+    setTableState: Dispatch<SetStateAction<DataTableState<TFilter, any>>>;
 }
 
 function GroupingBlock<TFilter extends { groupBy?: string[] }>({ tableState, setTableState }: GroupingBlockProps<TFilter>) {
@@ -33,4 +33,4 @@ function GroupingBlock<TFilter extends { groupBy?: string[] }>({ tableState, set
     );
 }
 
-export default React.memo(GroupingBlock);
+export default React.memo(GroupingBlock) as typeof GroupingBlock;
diff --git a/app/src/demo/tables/masterDetailedTable/MasterDetailedTable.tsx b/app/src/demo/tables/masterDetailedTable/MasterDetailedTable.tsx
index 8df17fa4a5..56e7aedcb2 100644
--- a/app/src/demo/tables/masterDetailedTable/MasterDetailedTable.tsx
+++ b/app/src/demo/tables/masterDetailedTable/MasterDetailedTable.tsx
@@ -59,6 +59,7 @@ export function MasterDetailedTable() {
                 .addDefaults({
                     getType: ({ __typename }) => __typename,
                     getGroupBy: () => tableStateApi.tableState.filter?.groupBy,
+                    complexIds: true,
                     backgroundReload: true,
                     fetchStrategy: 'parallel',
                     cascadeSelection: true,
diff --git a/app/src/demo/tables/masterDetailedTable/types.ts b/app/src/demo/tables/masterDetailedTable/types.ts
index ced48ce973..962259ae3f 100644
--- a/app/src/demo/tables/masterDetailedTable/types.ts
+++ b/app/src/demo/tables/masterDetailedTable/types.ts
@@ -26,7 +26,7 @@ export type PersonFilters = {
     PersonEmploymentGroup: DataQueryFilter<PersonEmploymentGroup>;
 };
 
-export type PersonTableFilter = DataQueryFilter<Person> & { groupBy?: GroupByLocation | GroupByEmployment | Array<GroupByLocation | GroupByEmployment> };
+export type PersonTableFilter = DataQueryFilter<Person> & { groupBy?: Array<GroupByLocation | GroupByEmployment> };
 export interface Grouping {
     id: string;
     name: string;
diff --git a/app/src/demo/tables/masterDetailedTable/useLazyDataSourceWithGrouping/groupingConfigBuilder.ts b/app/src/demo/tables/masterDetailedTable/useLazyDataSourceWithGrouping/groupingConfigBuilder.ts
index 63d87e4463..52cd647313 100644
--- a/app/src/demo/tables/masterDetailedTable/useLazyDataSourceWithGrouping/groupingConfigBuilder.ts
+++ b/app/src/demo/tables/masterDetailedTable/useLazyDataSourceWithGrouping/groupingConfigBuilder.ts
@@ -121,7 +121,9 @@ export class GroupingConfigBuilder<
         LazyDataSourceProps<TGroupsWithMeta<TGroups, TId, TGroupBy>[TType], TId[TType], TFilter[TType]>['api']
         >
     ) {
-        return this.entitiesConfig[this.defaultEntity].api(...apiArgs);
+        const [request, context] = apiArgs;
+        const response = await this.entitiesConfig[this.defaultEntity].api(request, context);
+        return this.getResultsWithMeta(response, context?.parent, []);
     }
 
     private getGroupByPathForParent(
diff --git a/app/src/docs/_examples/dataSources/DataSourceViewer.code.example.tsx b/app/src/docs/_examples/dataSources/DataSourceViewer.code.example.tsx
index 8a3ba20dcb..4cd7c9104e 100644
--- a/app/src/docs/_examples/dataSources/DataSourceViewer.code.example.tsx
+++ b/app/src/docs/_examples/dataSources/DataSourceViewer.code.example.tsx
@@ -8,6 +8,7 @@ interface Props<TItem, TId> extends IEditable<DataSourceState> {
     selectAll?: boolean;
     getName?: (item: TItem) => string;
     dataSource: IDataSource<TItem, TId, any>;
+    onValueChange: React.Dispatch<React.SetStateAction<DataSourceState<any, TId>>>;
 }
 
 export function DataSourceViewer<TItem, TId>(props: Props<TItem, TId>) {
diff --git a/app/src/docs/_examples/pickerModal/LazyTreePickerModal.example.tsx b/app/src/docs/_examples/pickerModal/LazyTreePickerModal.example.tsx
index 051525d5dd..9bcb384848 100644
--- a/app/src/docs/_examples/pickerModal/LazyTreePickerModal.example.tsx
+++ b/app/src/docs/_examples/pickerModal/LazyTreePickerModal.example.tsx
@@ -28,7 +28,7 @@ export default function LazyTreePickerModal() {
     const handleModalOpening = useCallback(() => {
         context.uuiModals
             .show((props) => (
-                <PickerModal
+                <PickerModal<Location, string>
                     initialValue={ value }
                     dataSource={ dataSource }
                     selectionMode="multi"
diff --git a/app/src/docs/_examples/statusIndicator/WithTable.example.tsx b/app/src/docs/_examples/statusIndicator/WithTable.example.tsx
index c8c9b19f18..45094156c6 100644
--- a/app/src/docs/_examples/statusIndicator/WithTable.example.tsx
+++ b/app/src/docs/_examples/statusIndicator/WithTable.example.tsx
@@ -55,7 +55,7 @@ const personColumns: DataColumnProps<Person, number>[] = [
 export default function WithTableExample() {
     const { api } = useUuiContext();
 
-    const { tableState, setTableState } = useTableState({
+    const { tableState, setTableState } = useTableState<Person, any>({
         columns: personColumns,
     });
 
diff --git a/app/src/docs/_examples/tables/ArrayTable.example.tsx b/app/src/docs/_examples/tables/ArrayTable.example.tsx
index 6982c43132..21473c77e1 100644
--- a/app/src/docs/_examples/tables/ArrayTable.example.tsx
+++ b/app/src/docs/_examples/tables/ArrayTable.example.tsx
@@ -5,7 +5,7 @@ import { demoData, FeatureClass } from '@epam/uui-docs';
 import css from './TablesExamples.module.scss';
 
 export default function ArrayDataTableExample() {
-    const [value, onValueChange] = useState({});
+    const [dataSourceState, setDataSourceState] = useState({});
 
     const dataSource = useArrayDataSource<FeatureClass, number, unknown>(
         {
@@ -14,7 +14,7 @@ export default function ArrayDataTableExample() {
         [],
     );
 
-    const view = dataSource.useView(value, onValueChange, {});
+    const view = dataSource.useView(dataSourceState, setDataSourceState, {});
 
     const productColumns: DataColumnProps<FeatureClass>[] = useMemo(
         () => [
@@ -47,8 +47,8 @@ export default function ArrayDataTableExample() {
             <DataTable
                 { ...view.getListProps() }
                 getRows={ view.getVisibleRows }
-                value={ value }
-                onValueChange={ onValueChange }
+                value={ dataSourceState }
+                onValueChange={ setDataSourceState }
                 columns={ productColumns }
                 headerTextCase="upper"
             />
diff --git a/app/src/docs/_examples/tables/ColumnsConfig.example.tsx b/app/src/docs/_examples/tables/ColumnsConfig.example.tsx
index 5c84978dfb..a9db35044f 100644
--- a/app/src/docs/_examples/tables/ColumnsConfig.example.tsx
+++ b/app/src/docs/_examples/tables/ColumnsConfig.example.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, SetStateAction } from 'react';
 import { DataTableState, DataColumnProps, useLazyDataSource, useUuiContext } from '@epam/uui-core';
 import { Text, DataTable, Panel, IconButton } from '@epam/uui';
 import { City } from '@epam/uui-docs';
@@ -91,17 +91,12 @@ export default function ColumnsConfigurationDataTableExample() {
         [],
     );
 
-    const handleTableStateChange = useCallback((newState: DataTableState) => {
+    const handleTableStateChange = useCallback((newState: SetStateAction<DataTableState>) => {
+        const updatedState = typeof newState === 'function' ? newState(tableState) : newState;
         // Set columns config to localStorage
-        svc.uuiUserSettings.set(LOCAL_STORAGE_KEY, newState.columnsConfig || {});
-        setTableState(newState);
-    }, []);
-
-    useEffect(() => {
-        return () => {
-            citiesDS.unsubscribeView(handleTableStateChange);
-        };
-    }, []);
+        svc.uuiUserSettings.set(LOCAL_STORAGE_KEY, updatedState.columnsConfig || {});
+        setTableState(updatedState);
+    }, [svc.uuiUserSettings, tableState]);
 
     const view = citiesDS.useView(tableState, handleTableStateChange, {
         getRowOptions: useCallback(() => ({ checkbox: { isVisible: true } }), []),
diff --git a/app/src/docs/_examples/tables/EditableTable.example.tsx b/app/src/docs/_examples/tables/EditableTable.example.tsx
index b57b8afd16..5bffc3c5f5 100644
--- a/app/src/docs/_examples/tables/EditableTable.example.tsx
+++ b/app/src/docs/_examples/tables/EditableTable.example.tsx
@@ -1,51 +1,29 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { DataColumnProps, DataTableRowProps, Metadata, useArrayDataSource } from '@epam/uui-core';
+import { DataColumnProps, DataSourceState, DataTableRowProps, IImmutableMap, ItemsMap, Metadata, PatchOrdering, UuiContexts, useArrayDataSource, useAsyncDataSource, useUuiContext } from '@epam/uui-core';
 import { Button, Checkbox, FlexSpacer, DataTable, DataTableCell, DataTableRow, DatePicker, FlexCell, FlexRow, Panel, PickerInput,
     TextArea, TextInput, useForm, IconButton } from '@epam/uui';
+import { TodoTask } from '@epam/uui-docs';
 import { ReactComponent as deleteIcon } from '@epam/assets/icons/common/content-clear-18.svg';
 import css from './TablesExamples.module.scss';
-
-// Define interface describe data for each row
-interface ToDoItem {
-    id: number;
-    isDone?: boolean;
-    name?: string;
-    priority?: number;
-    dueDate?: string;
-    comments?: string;
-}
+import { TApi } from '../../../data';
+import { useDataTableFocusManager } from '@epam/uui-components';
+import { ReactComponent as undoIcon } from '@epam/assets/icons/content-edit_undo-outline.svg';
+import { ReactComponent as redoIcon } from '@epam/assets/icons/content-edit_redo-outline.svg';
 
 // Define a blank item - for use as a new item, and to simplify mock data definition below
-const blankItem: Partial<ToDoItem> = {
+const blankItem: Partial<TodoTask> = {
     isDone: false,
     name: '',
     priority: null,
     comments: '',
     dueDate: '',
+    isNew: true,
 };
 
-// To store the last item id used
-let id = 1;
-
-// Prepare mock data for the demo. Usually, you'll get initial data from server API call
-const demoItems: ToDoItem[] = [
-    {
-        ...blankItem, id: id++, name: 'Complete data sources re-work', comments: 'The plan is to unite all dataSources into a single "useList" hook',
-    }, {
-        ...blankItem, id: id++, name: 'Implement editable cells', isDone: true,
-    }, {
-        ...blankItem, id: id++, name: 'Find better ways to add/remove rows', dueDate: '01-09-2022', priority: 2,
-    }, {
-        ...blankItem, id: id++, name: 'Finalize the "Project" table demo', comments: 'We first need to build the add/remove rows helpers, and rows drag-n-drop',
-    }, { ...blankItem, id: id++, name: 'Complete cells replication' }, {
-        ...blankItem, id: id++, name: 'Better rows drag-n-drop support', comments: 'With state-management helpers, and tree/hierarchy support',
-    },
-];
-
 // Interface to hold form data. Here we'll only store items, so we might use ToDoItem[] as a state.
 // However, we'll have an object here to extend the form state if needed later.
 interface FormState {
-    items: ToDoItem[];
+    items: IImmutableMap<number, TodoTask>;
 }
 
 // Define priorities to use in PickerInput
@@ -67,25 +45,67 @@ const metadata: Metadata<FormState> = {
     },
 };
 
+let savedItem: FormState = {
+    items: ItemsMap.blank<number, TodoTask>({ getId: (todo) => todo.id }),
+    // items: ItemsMap.blank<number, TodoTask>({ }),
+};
+
+// To store the last item id used
+let id = -1;
+
+const defaultSorting: DataSourceState['sorting'] = [{ field: 'id', direction: 'asc' }];
+
 export default function EditableTableExample() {
+    const svc = useUuiContext<TApi, UuiContexts>();
+
     // Use form to manage state of the editable table
     const {
-        lens, save, revert, value, setValue, isChanged,
+        lens, save, revert, undo, canUndo, redo, canRedo, value, setValue, isChanged,
     } = useForm<FormState>({
-        value: { items: demoItems },
-        onSave: () => Promise.resolve(),
+        value: savedItem,
+        onSave: (newValue) => {
+            savedItem = newValue;
+            return Promise.resolve({ form: newValue });
+        },
         getMetadata: () => metadata,
     });
+    const dataTableFocusManager = useDataTableFocusManager<TodoTask['id']>({}, []);
+
+    const newItems = useMemo(() => new Map<number, boolean>(), []);
 
     // Prepare callback to add a new item to the list.
     const handleNewItem = useCallback(() => {
+        const newItem = { ...blankItem, id: --id };
+
+        newItems.set(newItem.id, true);
         // We can manipulate form state directly with the setValue
         // - pretty much like we do with the setState of React.useState.
-        setValue((current) => ({ ...current, items: [...current.items, { ...blankItem, id: id++ }] }));
-    }, []);
+        setValue((current) => ({ ...current, items: current.items.set(newItem.id, newItem) }));
+        dataTableFocusManager?.focusRow(newItem.id);
+    }, [setValue, newItems, dataTableFocusManager]);
+
+    const handleDeleteItem = useCallback((item: TodoTask) => {
+        setValue((current) => ({ ...current, items: current.items.set(item.id, { ...item, isDeleted: true }) }));
+    }, [setValue]);
 
     // Use state to hold DataTable state - current sorting, filtering, etc.
-    const [tableState, setTableState] = useState({});
+    const [tableState, setTableState] = useState<DataSourceState>({ sorting: defaultSorting });
+
+    const onTableStateChange = useCallback((state: React.SetStateAction<DataSourceState>) => {
+        setTableState((currentTableState) => {
+            let updatedState: DataSourceState;
+            if (typeof state === 'function') {
+                updatedState = state(currentTableState);
+            } else {
+                updatedState = state;
+            }
+            
+            if (!updatedState.sorting || !updatedState.sorting.length) {
+                updatedState.sorting = defaultSorting;
+            }
+            return updatedState;
+        });
+    }, [setTableState]);
 
     // Define DataSource to use in PickerInput in the 'tags' column
     const pickerDataSource = useArrayDataSource({ items: tags }, []);
@@ -113,6 +133,7 @@ export default function EditableTableExample() {
                     ),
                     fix: 'left',
                     width: 300,
+                    isSortable: true,
                 },
                 {
                     key: 'isDone',
@@ -151,49 +172,64 @@ export default function EditableTableExample() {
                 }, 
                 {
                     key: 'actions',
-                    render: () => <IconButton icon={ deleteIcon } onClick={ () => null } color="secondary" />,
+                    render: (item) => (
+                        <IconButton
+                            icon={ deleteIcon }
+                            onClick={ () => handleDeleteItem(item) }
+                            color="secondary"
+                        />
+                    ),
                     width: 55,
                     alignSelf: 'center',
                     allowResizing: false,
                 },
-            ] as DataColumnProps<ToDoItem>[],
+            ] as DataColumnProps<TodoTask>[],
         [],
     );
 
     // Create data-source and view to supply filtered/sorted data to the table in form of DataTableRows.
     // DataSources describe the way to extract some list/tree-structured data.
-    // Here we'll use ArrayDataSource - which gets data from an array, which we obtain from our Form
-    const dataSource = useArrayDataSource<ToDoItem, number, unknown>(
+    // Here we'll use ArrayDataSource - which gets data from an array, which we obtain from our Form.
+    const dataSource = useAsyncDataSource<TodoTask, number, unknown>(
         {
-            items: value.items,
+            api: svc.api.demo.todos,
         },
         [],
     );
 
     // Make an IDataSourceView instance, which takes data from the DataSource, and transforms it into DataTableRows.
     // It considers current sorting, filtering, scroll position, etc. to get a flat list of currently visible rows.
-    const view = dataSource.useView(tableState, setTableState, {
-        getRowOptions: (item: ToDoItem, index: number) => ({
-            ...lens.prop('items').index(index).toProps(),
+    const view = dataSource.useView(tableState, onTableStateChange, {
+        getRowOptions: (item: TodoTask) => ({
+            ...lens.prop('items').key(item.id).default(item).toProps(),
         }),
+        patch: value.items,
+        getNewItemPosition: () => PatchOrdering.TOP,
+        isDeleted: (item) => item.isDeleted,
     });
 
     // Render row callback. In simple cases, you don't need, as default implementation would work ok.
     // Here we override it to change row background for 'isDone' items.
     const renderRow = useCallback(
-        (props: DataTableRowProps<ToDoItem, number>) => <DataTableRow { ...props } cx={ props.value.isDone ? css.taskIsDone : undefined } />,
+        (props: DataTableRowProps<TodoTask, number>) => <DataTableRow { ...props } cx={ props.value?.isDone ? css.taskIsDone : undefined } />,
         [],
     );
 
-    // Render the table, passing the prepared data to it in form of getVisibleRows callback, list props (e.g. items counts)
+    // Render the table, passing the prepared data to it in form of getRows callback, list props (e.g. items counts)
     return (
-        <Panel background="surface-main" shadow>
+        <Panel background="surface-main" shadow cx={ css.container }>
             {/* Render a panel with Save/Revert buttons to control the form */}
             <FlexRow columnGap="12" padding="12" vPadding="12" borderBottom>
                 <FlexCell width="auto">
                     <Button caption="Add task" fill="outline" color="primary" onClick={ handleNewItem } />
                 </FlexCell>
                 <FlexSpacer />
+                <FlexCell width="auto">
+                    <Button size="18" icon={ undoIcon } onClick={ undo } isDisabled={ !canUndo } fill="outline" />
+                </FlexCell>
+                <FlexCell width="auto">
+                    <Button size="18" icon={ redoIcon } onClick={ redo } isDisabled={ !canRedo } fill="outline" />
+                </FlexCell>
                 <FlexCell width="auto">
                     <Button caption="Revert" onClick={ revert } isDisabled={ !isChanged } color="secondary" fill="outline" />
                 </FlexCell>
@@ -201,16 +237,17 @@ export default function EditableTableExample() {
                     <Button caption="Save" onClick={ save } color="primary" isDisabled={ !isChanged } />
                 </FlexCell>
             </FlexRow>
-            <FlexRow>
+            <FlexRow cx={ css.container }>
                 {/* Render the data table */}
                 <DataTable
                     { ...view.getListProps() }
                     getRows={ view.getVisibleRows }
                     value={ tableState }
-                    onValueChange={ setTableState }
+                    onValueChange={ onTableStateChange }
                     columns={ columns }
                     headerTextCase="upper"
                     renderRow={ renderRow }
+                    dataTableFocusManager={ dataTableFocusManager }
                 />
             </FlexRow>
         </Panel>
diff --git a/app/src/docs/_examples/tables/LazyTable.example.tsx b/app/src/docs/_examples/tables/LazyTable.example.tsx
index 79e7d4212a..49122d9725 100644
--- a/app/src/docs/_examples/tables/LazyTable.example.tsx
+++ b/app/src/docs/_examples/tables/LazyTable.example.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { ReactNode, useCallback, useMemo, useState } from 'react';
 import { DataSourceState, DataColumnProps, useUuiContext, useLazyDataSource, DropdownBodyProps } from '@epam/uui-core';
 import { Dropdown, DropdownMenuButton, DropdownMenuSplitter, DropdownMenuBody, Text, DataTable, Panel, IconButton } from '@epam/uui';
 import { City } from '@epam/uui-docs';
@@ -6,9 +6,10 @@ import { ReactComponent as MoreIcon } from '@epam/assets/icons/common/navigation
 import { ReactComponent as PencilIcon } from '@epam/assets/icons/common/content-edit-18.svg';
 
 import css from './TablesExamples.module.scss';
+import { TApi } from '../../../data';
 
 export default function CitiesTable() {
-    const svc = useUuiContext();
+    const svc = useUuiContext<TApi>();
     const [tableState, setTableState] = useState<DataSourceState>({});
 
     const renderMenu = (dropdownProps: DropdownBodyProps): ReactNode => (
@@ -103,12 +104,6 @@ export default function CitiesTable() {
         backgroundReload: true,
     }, []);
 
-    // IMPORTANT! Unsubscribe view from DataSource when you don't need it more.
-    // Pass this.handleTableStateChange function which you provided to getView as a second argument
-    useEffect(() => {
-        return () => citiesDS.unsubscribeView(setTableState);
-    }, []);
-
     // Create View according to your tableState and options
     const view = citiesDS.useView(tableState, setTableState, {
         getRowOptions: useCallback(
@@ -125,7 +120,7 @@ export default function CitiesTable() {
             <DataTable
                 value={ tableState }
                 onValueChange={ setTableState }
-                // Spread ListProps and provide getVisibleRows function from view to DataTable component.
+                // Spread ListProps and provide getRows function from view to DataTable component.
                 // getRows function will be called every time when table will need more rows.
                 { ...view.getListProps() }
                 getRows={ view.getVisibleRows }
diff --git a/app/src/docs/_examples/tables/PagedTable.example.tsx b/app/src/docs/_examples/tables/PagedTable.example.tsx
index 446017c3dd..241e05b5ab 100644
--- a/app/src/docs/_examples/tables/PagedTable.example.tsx
+++ b/app/src/docs/_examples/tables/PagedTable.example.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { SetStateAction, useCallback, useMemo, useState } from 'react';
 import { DataColumnProps, useLazyDataSource, DataSourceState, LazyDataSourceApiRequest, useUuiContext, LazyDataSourceApi } from '@epam/uui-core';
 import { DataTable, Panel, Text, Paginator, FlexRow, FlexSpacer } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
@@ -11,18 +11,20 @@ export default function PagedTable() {
         page: 1, pageSize: 10,
     });
 
-    const setTableState = useCallback((newState: DataSourceState) => {
-        const isFilterChanged = !isEqual(state.filter, newState.filter);
-        const isSearchChanged = state.search !== newState.search;
-        const isSortingChanged = !isEqual(state.sorting, newState.sorting);
-        const isPagingChanged = state.page !== newState.page || state.pageSize !== newState.pageSize;
-
-        if (isFilterChanged || isSearchChanged || isSortingChanged || isPagingChanged) {
-            setState({ ...newState, checked: [] });
-            return;
-        }
-        setState(newState);
-    }, [state]);
+    const setTableState = useCallback((newState: SetStateAction<DataSourceState>) => {
+        setState((currentState) => {
+            const updatedState = typeof newState === 'function' ? newState(currentState) : newState;
+            const isFilterChanged = !isEqual(currentState.filter, updatedState.filter);
+            const isSearchChanged = currentState.search !== updatedState.search;
+            const isSortingChanged = !isEqual(currentState.sorting, updatedState.sorting);
+            const isPagingChanged = currentState.page !== updatedState.page || currentState.pageSize !== updatedState.pageSize;
+    
+            if (isFilterChanged || isSearchChanged || isSortingChanged || isPagingChanged) {
+                return { ...updatedState, checked: [] };
+            }
+            return updatedState;
+        });
+    }, []);
 
     const columns: DataColumnProps<Person>[] = useMemo(
         () => [
diff --git a/app/src/docs/_examples/tables/TableCollapse.example.tsx b/app/src/docs/_examples/tables/TableCollapse.example.tsx
index cda717fc80..db015f9102 100644
--- a/app/src/docs/_examples/tables/TableCollapse.example.tsx
+++ b/app/src/docs/_examples/tables/TableCollapse.example.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Location } from '@epam/uui-docs';
 import {
     DataColumnProps,
@@ -84,12 +84,6 @@ export default function TableCollapseExample() {
         [],
     );
 
-    useEffect(() => {
-        return () => {
-            locationsDS.unsubscribeView(setTableState);
-        };
-    }, []);
-
     const view = locationsDS.useView(tableState, setTableState, {
         getSearchFields: (item) => [item.name],
         sortBy: (item, sorting) => {
diff --git a/app/src/docs/_examples/tables/TableWithPinnedRows.example.tsx b/app/src/docs/_examples/tables/TableWithPinnedRows.example.tsx
index 87280280f8..396d9a5a72 100644
--- a/app/src/docs/_examples/tables/TableWithPinnedRows.example.tsx
+++ b/app/src/docs/_examples/tables/TableWithPinnedRows.example.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { DataSourceState, DataColumnProps, useUuiContext, useLazyDataSource } from '@epam/uui-core';
 import { Text, DataTable, Panel } from '@epam/uui';
 import { Location } from '@epam/uui-docs';
@@ -51,7 +51,7 @@ export default function TableWithPinnedRows() {
         [],
     );
 
-    const locationsDS = useLazyDataSource<Location, string, unknown>({
+    const dataSource = useLazyDataSource<Location, string, unknown>({
         api: (request, ctx) => {
             const filter = { parentId: ctx?.parentId };
             return svc.api.demo.locations({ ...request, filter });
@@ -61,16 +61,12 @@ export default function TableWithPinnedRows() {
         backgroundReload: true,
     }, []);
 
-    useEffect(() => {
-        return () => locationsDS.unsubscribeView(setTableState);
-    }, [locationsDS]);
-
-    const view = locationsDS.useView(tableState, setTableState, {
+    const view = dataSource.useView(tableState, setTableState, {
         rowOptions: {
             // To make some row `pinned`, it is required to define `pin` function.
             // Parents and elements of the same level can be pinned.
             pin: (location) => location.value.type !== 'city',
-        }, 
+        },
     });
 
     return (
diff --git a/app/src/docs/_examples/tables/TreeTable.example.tsx b/app/src/docs/_examples/tables/TreeTable.example.tsx
index 1598def90f..14daa1b536 100644
--- a/app/src/docs/_examples/tables/TreeTable.example.tsx
+++ b/app/src/docs/_examples/tables/TreeTable.example.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Location } from '@epam/uui-docs';
-import { DataSourceState, DataColumnProps, useUuiContext, useAsyncDataSource, LazyDataSourceApiResponse } from '@epam/uui-core';
+import { DataSourceState, DataColumnProps, useUuiContext, LazyDataSourceApiResponse, useAsyncDataSource } from '@epam/uui-core';
 import { Text, LinkButton, DataTable, Panel } from '@epam/uui';
 import css from './TablesExamples.module.scss';
 
@@ -61,21 +61,12 @@ export default function TreeTableExample() {
         [],
     );
 
-    const locationsDS = useAsyncDataSource<Location, string, Location>(
-        {
-            api: () => svc.api.demo.locations({}).then((r: LazyDataSourceApiResponse<Location>) => r.items),
-        },
-        [],
-    );
-
-    useEffect(() => {
-        return () => {
-            locationsDS.unsubscribeView(setTableState);
-        };
+    const dataSource = useAsyncDataSource<Location, string, Location>({
+        api: () => svc.api.demo.locations({}).then((r: LazyDataSourceApiResponse<Location>) => r.items),
+        getParentId: (item) => item.parentId,
     }, []);
 
-    // handleTableStateChange function should not be re-created on each render, as it would cause performance issues.
-    const view = locationsDS.useView(tableState, setTableState, {
+    const view = dataSource.useView(tableState, setTableState, {
         getSearchFields: (item) => [item.name],
         sortBy: (item, sorting) => {
             switch (sorting.field) {
diff --git a/app/src/docs/assets/Icons.doc.tsx b/app/src/docs/assets/Icons.doc.tsx
index c5f1fc52cc..ca9f4992e4 100644
--- a/app/src/docs/assets/Icons.doc.tsx
+++ b/app/src/docs/assets/Icons.doc.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import css from './IconsPage.module.scss';
 import { FlexCell, Panel, FlexRow, Text, IconContainer, Button, IconButton, LinkButton, Tooltip, NotificationCard, MultiSwitch,
     ScrollBars, SearchInput, TextInput } from '@epam/uui';
-import { ArrayDataSource, cx, Icon } from '@epam/uui-core';
+import { cx, Icon, useArrayDataSource } from '@epam/uui-core';
 import { getAllIcons } from '../../documents/iconListHelpers';
 import { copyTextToClipboard } from '../../helpers';
 import { svc } from '../../services';
@@ -35,9 +35,10 @@ export function IconsDoc() {
     });
 
     const allIcons: IconBase<Icon>[] = getAllIcons<Icon>();
-    const iconsDS = new ArrayDataSource({
+
+    const iconsDS = useArrayDataSource<IconBase<Icon>, string, unknown>({
         items: allIcons,
-    });
+    }, []);
 
     const showNotification = () => {
         svc.uuiNotifications.show(
@@ -200,7 +201,7 @@ export function IconsDoc() {
     };
 
     const onDataSourceStateChange = (data: any) => setState(data);
-    const view = iconsDS.getView(state, onDataSourceStateChange, { getSearchFields: (l) => [l.name] });
+    const view = iconsDS.useView(state, onDataSourceStateChange, { getSearchFields: (l) => [l.name] });
     const items = view.getVisibleRows();
 
     return (
@@ -213,7 +214,7 @@ export function IconsDoc() {
                         size="42"
                         placeholder="Search icon"
                         value={ state.search }
-                        onValueChange={ (value) => setState({ ...state, search: value }) }
+                        onValueChange={ (value) => setState((currentState) => ({ ...currentState, search: value })) }
                     />
                     <FlexCell>{renderIconsBox(items)}</FlexCell>
                 </FlexCell>
diff --git a/app/src/sandbox/SandboxPage.tsx b/app/src/sandbox/SandboxPage.tsx
index 458dd8877d..4ccaac55c9 100644
--- a/app/src/sandbox/SandboxPage.tsx
+++ b/app/src/sandbox/SandboxPage.tsx
@@ -23,6 +23,8 @@ import { ProjectTasksDemo } from './tasks/ProjectTasksDemo';
 import { RichTextEditorDemo } from './RTE/rteDemo';
 import { TableColumnConfigModalTest } from './tableColConfigModal/TableColumnConfigModalTest';
 import { PalettePage } from './tokens/palette/palettePage';
+import { ReactQueryLocationsTable } from './reactQueryLocationsTable';
+import { ProjectTableDemo } from './editableTable';
 
 export function SandboxPage() {
     const items = useMemo(
@@ -32,6 +34,8 @@ export function SandboxPage() {
             { id: 'tableDemo', name: 'Persons Table', component: PersonsTableDemo },
             { id: 'productsTableDemo', name: 'Products Table', component: ProductsTableDemo },
             { id: 'projectTasksDemo', name: 'Project Tasks Demo', component: ProjectTasksDemo },
+            { id: 'editableTableDemo', name: 'Editable Table', component: ProjectTableDemo },
+            { id: 'reactQueryLocationsTableDemo', name: 'React-query Loactions Demo', component: ReactQueryLocationsTable },
             { id: 'Draft', name: 'DRAFT RTE demo', component: DraftRTEDemo },
             { id: 'scrollSpy', name: 'Scroll Spy', component: ScrollSpyDemo },
             { id: 'responsive', name: 'Responsive', component: Responsive },
diff --git a/app/src/sandbox/db/DbDemo.tsx b/app/src/sandbox/db/DbDemo.tsx
index c2a9e028d7..c9765dda95 100644
--- a/app/src/sandbox/db/DbDemo.tsx
+++ b/app/src/sandbox/db/DbDemo.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { DataSourceState, LazyDataSourceApi, DataQueryFilter, Lens, useList } from '@epam/uui-core';
+import { DataSourceState, LazyDataSourceApi, DataQueryFilter, Lens, useLazyDataSource } from '@epam/uui-core';
 import { DbContext } from '@epam/uui-db';
 import { Person } from '@epam/uui-docs';
 import { FlexRow, FlexCell, FlexSpacer, Button, SuccessNotification, ErrorNotification, Text, SearchInput } from '@epam/loveship';
@@ -74,20 +74,17 @@ export function DbDemoImpl() {
     dbRef.jobTitlesLoader.load({});
     dbRef.departmentsLoader.load({});
 
-    const { rows, listProps, reload } = useList(
-        {
-            type: 'lazy',
-            listState: value,
-            setListState: onValueChange,
-            api,
-            getId: ({ id }) => id,
-            getChildCount: (item: PersonTableRecord) => (item.__typename === 'PersonEmploymentGroup' ? item.count : null),
-            getRowOptions: () => ({ checkbox: { isVisible: true } }),
-            isFoldedByDefault: () => false,
-            backgroundReload: true,
-        },
-        [],
-    );
+    const dataSource = useLazyDataSource({
+        api,
+        getId: ({ id }) => id,
+        getChildCount: (item: PersonTableRecord) => (item.__typename === 'PersonEmploymentGroup' ? item.count : null),
+        isFoldedByDefault: () => false,
+        backgroundReload: true,
+    }, []);
+
+    const view = dataSource.useView(value, onValueChange, {
+        getRowOptions: () => ({ checkbox: { isVisible: true } }),
+    });
 
     return (
         <div className={ cx(css.container, css.uuiThemePromo) }>
@@ -103,10 +100,10 @@ export function DbDemoImpl() {
                     <Button caption="Revert" onClick={ () => dbRef.revert() } size="30" />
                 </FlexCell>
                 <FlexCell width="auto">
-                    <Button caption="Reload" onClick={ () => reload() } size="30" />
+                    <Button caption="Reload" onClick={ () => view.reload() } size="30" />
                 </FlexCell>
             </FlexRow>
-            <PersonsTable { ...lens.toProps() } rows={ rows } listProps={ listProps } />
+            <PersonsTable { ...lens.toProps() } rows={ view.getVisibleRows() } listProps={ view.getListProps() } />
         </div>
     );
 }
diff --git a/app/src/sandbox/editableTable/ProjectTableDemo.module.scss b/app/src/sandbox/editableTable/ProjectTableDemo.module.scss
new file mode 100644
index 0000000000..6713572456
--- /dev/null
+++ b/app/src/sandbox/editableTable/ProjectTableDemo.module.scss
@@ -0,0 +1,20 @@
+.container {
+    width: 100%;
+    height: calc(100vh - 60px);
+}
+
+
+.search {
+    align-self: flex-start;
+}
+
+.divider {
+    border-left: 1px solid var(--uui-divider);
+    height: 30px;
+}
+
+.statusIcon {
+    padding-left: 6px;
+    width: 10px;
+    height: 10px;
+}
diff --git a/app/src/sandbox/editableTable/ProjectTableDemo.tsx b/app/src/sandbox/editableTable/ProjectTableDemo.tsx
new file mode 100644
index 0000000000..eb832c9128
--- /dev/null
+++ b/app/src/sandbox/editableTable/ProjectTableDemo.tsx
@@ -0,0 +1,355 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { DataTable, Panel, Button, FlexCell, FlexRow, FlexSpacer, IconButton, useForm, SearchInput, Tooltip } from '@epam/uui';
+import { AcceptDropParams, DataTableState, DropParams, DropPosition, ItemsMap, Metadata,
+    PatchOrdering, SortingOption, UuiContexts, getOrderBetween, indexToOrder, useDataRows, useTree, useUuiContext } from '@epam/uui-core';
+import { useDataTableFocusManager } from '@epam/uui-components';
+
+import { ReactComponent as undoIcon } from '@epam/assets/icons/content-edit_undo-outline.svg';
+import { ReactComponent as redoIcon } from '@epam/assets/icons/content-edit_redo-outline.svg';
+import { ReactComponent as insertAfter } from '@epam/assets/icons/table-row_plus_after-outline.svg';
+import { ReactComponent as insertBefore } from '@epam/assets/icons/table-row_plus_before-outline.svg';
+import { ReactComponent as deleteLast } from '@epam/assets/icons/table-row_remove-outline.svg';
+import { ReactComponent as add } from '@epam/assets/icons/action-add-outline.svg';
+
+import { Task } from './types';
+import { getColumns } from './columns';
+
+import css from './ProjectTableDemo.module.scss';
+import { TApi } from '../../data';
+import { ProjectTask } from '@epam/uui-docs';
+
+interface FormState {
+    items: ItemsMap<number, ProjectTask>;
+    sorting: SortingOption<any>[],
+}
+
+const metadata: Metadata<FormState> = {
+    props: {
+        items: {
+            all: {
+                props: {
+                    name: { isRequired: true },
+                },
+            },
+        },
+    },
+};
+
+let lastId = -1;
+
+const defaultSorting = [{ field: 'order' }];
+let savedValue: FormState = {
+    items: ItemsMap.blank({ getId: (item) => item.id }),
+    sorting: defaultSorting,
+};
+
+export function ProjectTableDemo() {
+    const svc = useUuiContext<TApi, UuiContexts>();
+    const [tableState, setState] = useState<DataTableState>({ sorting: defaultSorting });
+    const {
+        value, save, isChanged, revert, undo, canUndo, redo, canRedo, setValue, lens,
+    } = useForm<FormState>({
+        value: savedValue,
+        onSave: async (data) => {
+            // At this point you usually call api.saveSomething(value) to actually send changed data to server
+            savedValue = data;
+        },
+        getMetadata: () => metadata,
+    });
+
+    const setTableState = useCallback<React.Dispatch<React.SetStateAction<DataTableState>>>((newState) => {
+        setState((st) => {
+            const updatedTableState = typeof newState === 'function' ? { ...newState(st) } : { ...st, ...newState };
+
+            if (st.sorting !== updatedTableState.sorting) {
+                setValue((currentValue) => {
+                    let newItems = ItemsMap.blank<number, ProjectTask>({ getId: (item) => item.id });
+                    currentValue.items.forEach(({ tempOrder, ...item }) => {
+                        newItems = newItems.set(item.id, item);
+                    });
+
+                    return { ...currentValue, items: newItems, sorting: updatedTableState.sorting };
+                });
+            }
+            return updatedTableState;
+        });
+    }, [setValue]);
+
+    const dataTableFocusManager = useDataTableFocusManager<ProjectTask['id']>({}, []);
+
+    const searchHandler = useCallback(
+        (val: string | undefined) => setTableState((currentTableState) => ({
+            ...currentTableState,
+            search: val,
+        })),
+        [],
+    );
+
+    useEffect(() => {
+        if (tableState.sorting !== value.sorting) {
+            setState((state) => {
+                if (state.sorting !== value.sorting) {
+                    return { ...state, sorting: value.sorting };
+                }
+                return state;
+            });
+        }
+    }, [setTableState, value.sorting, tableState.sorting]);
+
+    const getItemTemporaryOrder = (item: ProjectTask) => item.tempOrder;
+
+    const { tree, treeWithoutPatch, ...restProps } = useTree<ProjectTask, number>(
+        {
+            type: 'lazy',
+            api: (rq, ctx) => {
+                const filter = { parentId: ctx?.parentId };
+                return svc.api.demo.projectTasks({ ...rq, filter });
+            },
+            dataSourceState: tableState,
+            setDataSourceState: setTableState,
+            getId: (i) => i.id,
+            getParentId: (i) => i.parentId,
+            getChildCount: (task) => task.childCount,
+            backgroundReload: true,
+            patch: value.items,
+
+            getNewItemPosition: () => PatchOrdering.TOP,
+            getItemTemporaryOrder,
+            sortBy: (item, sorting) => {
+                return item[sorting.field as keyof ProjectTask] ?? '';
+            },
+
+            isDeleted: (item) => item.isDeleted,
+        },
+        [],
+    );
+
+    // Insert new/exiting top/bottom or above/below relative to other task
+    const insertTask = useCallback((
+        position: DropPosition,
+        relativeTask: ProjectTask | null = null,
+        existingTask: ProjectTask | null = null,
+    ) => {
+        const task: ProjectTask = existingTask ? { ...existingTask } : { id: lastId--, name: '' };
+
+        if (position === 'inside') {
+            task.parentId = relativeTask.id;
+            position = 'top';
+            relativeTask = null;
+        } else if (relativeTask) {
+            task.parentId = relativeTask.parentId;
+        }
+
+        const originalListIds = treeWithoutPatch.getItems(task.parentId).ids;
+        const currentListIds = tree.getItems(task.parentId).ids;
+
+        const getIndex = (list: number[], id: number) => {
+            return list.indexOf(id);
+        };
+
+        const getOrderByIndex = (index: number) => {
+            const id = currentListIds[index];
+            const item = tree.getById(id) as ProjectTask;
+
+            // If item is not in patch, it's order is implied as numberToOrder() of it's original index (before any patch applied)
+            if (!item.tempOrder) {
+                const originalIndex = getIndex(originalListIds, id);
+                return indexToOrder(originalIndex);
+            } else {
+                return item.tempOrder;
+            }
+        };
+
+        let relativeToIndex: number;
+        if (relativeTask) {
+            relativeToIndex = getIndex(currentListIds, relativeTask.id);
+        } else {
+            relativeToIndex = position === 'top' ? 0 : currentListIds.length - 1;
+        }
+
+        const indexAbove = position === 'top' ? relativeToIndex - 1 : relativeToIndex;
+        const indexBelow = position === 'bottom' ? relativeToIndex + 1 : relativeToIndex;
+        const orderAbove = indexAbove >= 0 ? getOrderByIndex(indexAbove) : null;
+        const orderBelow = indexBelow < currentListIds.length ? getOrderByIndex(indexBelow) : null;
+
+        task.tempOrder = getOrderBetween(orderAbove, orderBelow);
+
+        setValue((currentValue) => {
+            return {
+                ...currentValue,
+                items: currentValue.items.set(task.id, task),
+            };
+        });
+
+        setTableState((currentTableState) => {
+            return {
+                ...currentTableState,
+                folded: position === 'inside'
+                    ? { ...currentTableState.folded, [`${task.parentId}`]: false }
+                    : currentTableState.folded,
+                selectedId: task.id,
+            };
+        });
+
+        dataTableFocusManager?.focusRow(task.id);
+    }, [setValue, setTableState, dataTableFocusManager, tree, treeWithoutPatch]);
+
+    const deleteTask = useCallback((task: Task) => {
+        setValue((currentValue) => ({
+            ...currentValue, items: currentValue.items.set(task.id, { ...task, isDeleted: true }),
+        }));
+    }, [setValue]);
+
+    const handleCanAcceptDrop = useCallback((params: AcceptDropParams<ProjectTask & { isTask: boolean }, Task>) => {
+        if (!params.srcData.isTask || params.srcData.id === params.dstData.id) {
+            return null;
+        } else {
+            return { bottom: true, top: true, inside: true };
+        }
+    }, []);
+
+    const handleDrop = useCallback(
+        (params: DropParams<ProjectTask, Task>) => insertTask(params.position, params.dstData, params.srcData),
+        [insertTask],
+    );
+
+    // console.log(value.items);
+    const { rows, listProps } = useDataRows({
+        tree,
+        ...restProps,
+        getRowOptions: (task) => ({
+            ...lens.prop('items').key(task.id).toProps(), // pass IEditable to each row to allow editing
+            // checkbox: { isVisible: true },
+            isSelectable: true,
+            dnd: {
+                srcData: { ...task, isTask: true },
+                dstData: { ...task, isTask: true },
+                canAcceptDrop: handleCanAcceptDrop,
+                onDrop: handleDrop,
+            },
+        }),
+    });
+
+    const columns = useMemo(
+        () => getColumns({ insertTask, deleteTask }),
+        [insertTask, deleteTask],
+    );
+
+    const selectedItem = useMemo(() => {
+        if (tableState.selectedId !== undefined) {
+            return tree.getById(tableState.selectedId) as ProjectTask;
+        }
+        return undefined;
+    }, [tableState.selectedId, value.items]);
+
+    const deleteSelectedItem = useCallback(() => {
+        if (selectedItem === undefined) return;
+
+        const prevRows = [...rows];
+        deleteTask(selectedItem);
+        const index = prevRows.findIndex((task) => task.id === selectedItem.id);
+        const newSelectedIndex = index === prevRows.length - 1
+            ? (prevRows.length - 2)
+            : (index + 1);
+
+        setTableState((state) => ({
+            ...state,
+            selectedId: newSelectedIndex >= 0 ? prevRows[newSelectedIndex].id : undefined,
+        }));
+    }, [deleteTask, rows, selectedItem, setTableState]);
+
+    const keydownHandler = useCallback((event: KeyboardEvent) => {
+        if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.code === 'Enter') {
+            event.preventDefault();
+            insertTask('top', selectedItem);
+            return;
+        }
+
+        if ((event.metaKey || event.ctrlKey) && event.code === 'Enter') {
+            event.preventDefault();
+            insertTask('bottom', selectedItem);
+            return;
+        }
+
+        if ((event.metaKey || event.ctrlKey) && event.code === 'Backspace') {
+            event.preventDefault();
+            deleteSelectedItem();
+            return;
+        }
+    }, [insertTask, selectedItem, deleteSelectedItem]);
+
+    useEffect(() => {
+        document.addEventListener('keydown', keydownHandler);
+        return () => {
+            document.removeEventListener('keydown', keydownHandler);
+        };
+    }, [keydownHandler]);
+
+    const getKeybindingWithControl = (tooltip: string, keybindingWithoutControl: string) => {
+        const controlKey = navigator.platform.indexOf('Mac') === 0 ? '⌘' : 'Ctrl';
+        return (
+            <>
+                { tooltip }
+                {' '}
+                <br />
+                { `(${controlKey} + ${keybindingWithoutControl})` }
+            </>
+        );
+    };
+
+    return (
+        <Panel cx={ css.container }>
+            <FlexRow spacing="18" padding="24" vPadding="18" borderBottom={ true } background="surface-main">
+                <FlexCell width="auto">
+                    <Tooltip content={ getKeybindingWithControl('Add new task', 'Enter') } placement="bottom">
+                        <Button size="30" icon={ add } caption="Add Task" onClick={ () => insertTask('bottom') } />
+                    </Tooltip>
+                </FlexCell>
+                <FlexCell width="auto">
+                    <Tooltip content={ getKeybindingWithControl('Add new task below', 'Enter') } placement="bottom">
+                        <IconButton size="24" icon={ insertAfter } onClick={ () => insertTask('bottom', selectedItem) } />
+                    </Tooltip>
+                </FlexCell>
+                <FlexCell width="auto">
+                    <Tooltip content={ getKeybindingWithControl('Add new task above', 'Shift + Enter') } placement="bottom">
+                        <IconButton size="24" icon={ insertBefore } onClick={ () => insertTask('top', selectedItem) } />
+                    </Tooltip>
+                </FlexCell>
+                <FlexCell width="auto">
+                    <Tooltip content={ getKeybindingWithControl('Delete task', 'Backspace') } placement="bottom">
+                        <IconButton size="24" icon={ deleteLast } onClick={ () => deleteSelectedItem() } isDisabled={ selectedItem === undefined } />
+                    </Tooltip>
+                </FlexCell>
+                <FlexSpacer />
+                <FlexCell cx={ css.search } width={ 295 }>
+                    <SearchInput value={ tableState.search } onValueChange={ searchHandler } placeholder="Search" debounceDelay={ 1000 } />
+                </FlexCell>
+                <div className={ css.divider } />
+                <FlexCell width="auto">
+                    <IconButton size="18" icon={ undoIcon } onClick={ undo } isDisabled={ !canUndo } />
+                </FlexCell>
+                <FlexCell width="auto">
+                    <IconButton size="18" icon={ redoIcon } onClick={ redo } isDisabled={ !canRedo } />
+                </FlexCell>
+                <FlexCell width="auto">
+                    <Button size="30" caption="Cancel" onClick={ revert } isDisabled={ !isChanged } />
+                </FlexCell>
+                <FlexCell width="auto">
+                    <Button size="30" color="accent" caption="Save" onClick={ save } isDisabled={ !isChanged } />
+                </FlexCell>
+            </FlexRow>
+            <DataTable
+                headerTextCase="upper"
+                rows={ rows }
+                columns={ columns }
+                value={ tableState }
+                onValueChange={ setTableState }
+                dataTableFocusManager={ dataTableFocusManager }
+                showColumnsConfig
+                allowColumnsResizing
+                allowColumnsReordering
+                { ...listProps }
+            />
+        </Panel>
+    );
+}
diff --git a/app/src/sandbox/editableTable/RowKebabButton.tsx b/app/src/sandbox/editableTable/RowKebabButton.tsx
new file mode 100644
index 0000000000..8d6d4114d3
--- /dev/null
+++ b/app/src/sandbox/editableTable/RowKebabButton.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { DataRowProps, DropdownBodyProps } from '@epam/uui-core';
+import {
+    DropdownMenuBody, DropdownMenuButton, Dropdown, IconButton,
+} from '@epam/uui';
+import { ReactComponent as MoreIcon } from '@epam/assets/icons/common/navigation-more_vert-18.svg';
+import { ColumnsProps, Task } from './types';
+
+export interface RowKebabProps extends ColumnsProps {
+    row: DataRowProps<Task, number>;
+}
+
+export function RowKebabButton({ row, insertTask, deleteTask }: RowKebabProps) {
+    const renderBody = React.useCallback((props: DropdownBodyProps) => {
+        return (
+            <DropdownMenuBody { ...props } rawProps={ { style: { maxWidth: '250px' } } }>
+                <DropdownMenuButton
+                    caption="Add Task above"
+                    onClick={ () => {
+                        insertTask('top', row.value);
+                        props.onClose();
+                    } }
+                />
+                <DropdownMenuButton
+                    caption="Add Task below"
+                    onClick={ () => {
+                        insertTask('bottom', row.value);
+                        props.onClose();
+                    } }
+                />
+                <DropdownMenuButton
+                    caption="Add Sub-Task"
+                    onClick={ () => {
+                        insertTask('inside', row.value);
+                        props.onClose();
+                    } }
+                />
+                <DropdownMenuButton
+                    caption="Delete"
+                    onClick={ () => {
+                        deleteTask(row.value);
+                        props.onClose();
+                    } }
+                />
+            </DropdownMenuBody>
+        );
+    }, [insertTask, row, deleteTask]);
+
+    return (
+        <Dropdown renderBody={ renderBody } renderTarget={ (props) => <IconButton icon={ MoreIcon } { ...props } /> } />
+    );
+}
diff --git a/app/src/sandbox/editableTable/columns.tsx b/app/src/sandbox/editableTable/columns.tsx
new file mode 100644
index 0000000000..d534c97eb1
--- /dev/null
+++ b/app/src/sandbox/editableTable/columns.tsx
@@ -0,0 +1,175 @@
+import { Task, ColumnsProps } from './types';
+import { ProjectTask } from '@epam/uui-docs';
+import { resources, statuses } from './demoData';
+import React from 'react';
+import { TextArea, PickerToggler, TextInput, DataTableCell, NumericInput, PickerInput,
+    DatePicker, DataPickerRow, PickerItem, IconContainer } from '@epam/uui';
+import { ArrayDataSource, DataColumnProps, DataQueryFilter } from '@epam/uui-core';
+import { ReactComponent as statusIcon } from '@epam/assets/icons/common/radio-point-10.svg';
+
+import { RowKebabButton } from './RowKebabButton';
+import css from './ProjectTableDemo.module.scss';
+
+const resourceDataSource = new ArrayDataSource({ items: resources });
+const statusDataSource = new ArrayDataSource({ items: statuses });
+
+export function getColumns(columnsProps: ColumnsProps) {
+    const columns: DataColumnProps<ProjectTask, number, DataQueryFilter<Task>>[] = [
+        {
+            key: 'name',
+            caption: 'Name',
+            width: 300,
+            fix: 'left',
+            isSortable: true,
+            renderCell: (props) => (
+                <DataTableCell
+                    { ...props.rowLens.prop('name').toProps() }
+                    renderEditor={ (props) => <TextInput { ...props } /> }
+                    { ...props }
+                />
+            ),
+        },
+        {
+            key: 'estimate',
+            textAlign: 'right',
+            caption: 'Estimate',
+            info: 'Estimate in man/days',
+            width: 120,
+            isSortable: true,
+            renderCell: (props) => (
+                <DataTableCell
+                    { ...props.rowLens.prop('estimate').toProps() }
+                    renderEditor={ (props) => <NumericInput { ...props } formatOptions={ { maximumFractionDigits: 1 } } /> }
+                    { ...props }
+                />
+            ),
+        },
+        {
+            key: 'status',
+            caption: 'Status',
+            width: 160,
+            minWidth: 150,
+            renderCell: (props) => (
+                <DataTableCell
+                    { ...props.rowLens.prop('status').toProps() }
+                    size="24"
+                    renderEditor={ (props) => (
+                        <PickerInput
+                            valueType="id"
+                            placeholder="Add Status"
+                            dataSource={ statusDataSource }
+                            selectionMode="single"
+                            minBodyWidth={ 150 }
+                            renderRow={ (props) => (
+                                <DataPickerRow
+                                    { ...props }
+                                    padding="12"
+                                    renderItem={ (item) => (
+                                        <PickerItem
+                                            title={ item.name }
+                                            icon={ () => <IconContainer icon={ statusIcon } style={ { fill: item.color } } /> }
+                                            { ...props }
+                                        />
+                                    ) }
+                                />
+                            ) }
+                            renderToggler={ (togglerProps) => {
+                                const row = togglerProps.selection?.[0];
+                                const fill = row?.value?.color && togglerProps.value && row?.value?.name?.includes(togglerProps.value)
+                                    ? row?.value?.color
+                                    : '#E1E3EB';
+                        
+                                return (
+                                    <PickerToggler
+                                        { ...props }
+                                        { ...togglerProps }
+                                        icon={ () => <IconContainer icon={ statusIcon } style={ { fill: fill, marginBottom: '0' } } cx={ css.statusIcon } /> }
+                                        iconPosition="left"
+                                    />
+                                );
+                            } }
+                            { ...props }
+                        />
+                    ) }
+                    { ...props }
+                />
+            ),
+        },
+        {
+            key: 'startDate',
+            caption: 'Start date',
+            width: 150,
+            renderCell: (props) => (
+                <DataTableCell
+                    { ...props.rowLens.prop('startDate').toProps() }
+                    renderEditor={ (props) => <DatePicker format="MMM D, YYYY" placeholder="" { ...props } /> }
+                    { ...props }
+                />
+            ),
+        },
+        {
+            key: 'dueDate',
+            caption: 'Due date',
+            width: 150,
+            renderCell: (props) => (
+                <DataTableCell
+                    { ...props.rowLens.prop('dueDate').toProps() }
+                    renderEditor={ (props) => <DatePicker format="MMM D, YYYY" placeholder="" { ...props } /> }
+                    { ...props }
+                />
+            ),
+        },
+        {
+            key: 'teams',
+            caption: 'Teams',
+            width: 220,
+            renderCell: (props) => (
+                <DataTableCell
+                    { ...props.rowLens.prop('resources').toProps() }
+                    renderEditor={ (props) => (
+                        <PickerInput
+                            valueType="id"
+                            selectionMode="multi"
+                            emptyValue={ undefined }
+                            dataSource={ resourceDataSource }
+                            renderRow={ (props) => (
+                                <DataPickerRow
+                                    { ...props }
+                                    renderItem={ (item) => (
+                                        <PickerItem
+                                            title={ item.name }
+                                            subtitle={ item.fullName }
+                                            { ...props }
+                                        />
+                                    ) }
+                                />
+                            ) }
+                            placeholder=""
+                            { ...props }
+                        />
+                    ) }
+                    { ...props }
+                />
+            ),
+        },
+        {
+            key: 'description',
+            caption: 'Description',
+            width: 200,
+            grow: 1,
+            renderCell: (props) => (
+                <DataTableCell { ...props.rowLens.prop('description').toProps() } renderEditor={ (props) => <TextArea { ...props } autoSize={ true } /> } { ...props } />
+            ),
+        },
+        {
+            key: 'actions',
+            render: (_, row) => <RowKebabButton row={ row } { ...columnsProps } />,
+            width: 54,
+            fix: 'right',
+            alignSelf: 'center',
+            allowResizing: false,
+        },
+    ];
+
+    return columns;
+}
diff --git a/app/src/sandbox/editableTable/demoData.ts b/app/src/sandbox/editableTable/demoData.ts
new file mode 100644
index 0000000000..939b9ee696
--- /dev/null
+++ b/app/src/sandbox/editableTable/demoData.ts
@@ -0,0 +1,13 @@
+import { Resource, Status } from './types';
+
+export const resources: Resource[] = [
+    { id: 1, name: 'FED', fullName: 'Front-end developer' }, { id: 2, name: 'BED', fullName: 'Back-end developer' }, { id: 3, name: 'QA', fullName: 'Quality assurance engineer' }, { id: 4, name: 'UXD', fullName: 'UX designer' }, { id: 5, name: 'BA', fullName: 'Business analyst' },
+];
+
+export const statuses: Status[] = [
+    { id: 1, name: 'Planned', color: '#848484' },
+    { id: 2, name: 'In Progress', color: '#009ECC' },
+    { id: 3, name: 'Blocked', color: '#FCAA00' },
+    { id: 4, name: 'At Risk', color: '#FA4B4B' },
+    { id: 5, name: 'Complete', color: '#67A300' },
+];
diff --git a/app/src/sandbox/editableTable/index.ts b/app/src/sandbox/editableTable/index.ts
new file mode 100644
index 0000000000..ab2a2d3024
--- /dev/null
+++ b/app/src/sandbox/editableTable/index.ts
@@ -0,0 +1 @@
+export * from './ProjectTableDemo';
diff --git a/app/src/sandbox/editableTable/types.ts b/app/src/sandbox/editableTable/types.ts
new file mode 100644
index 0000000000..f6445d07d5
--- /dev/null
+++ b/app/src/sandbox/editableTable/types.ts
@@ -0,0 +1,34 @@
+import { DropPosition } from '@epam/uui-core';
+
+export interface Task {
+    id: number;
+    parentId?: number;
+    name: string;
+    estimate?: number;
+    resources?: number[];
+    startDate?: string;
+    dueDate?: string;
+    status?: string;
+    description?: string;
+    order?: string;
+}
+
+export interface Resource {
+    id: number;
+    name: string;
+    fullName: string;
+}
+
+export interface Status {
+    id: number;
+    name: string;
+    color?: string;
+}
+
+export type InsertTaskCallback = (position: DropPosition, relativeTask?: Task | null, existingTask?: Task | null) => void;
+export type DeleteTaskCallback = (task: Task) => void;
+
+export interface ColumnsProps {
+    insertTask: InsertTaskCallback;
+    deleteTask: DeleteTaskCallback;
+}
diff --git a/app/src/sandbox/productsTable/ProductsTableDemo.tsx b/app/src/sandbox/productsTable/ProductsTableDemo.tsx
index 9afd1766ff..1e67525aac 100644
--- a/app/src/sandbox/productsTable/ProductsTableDemo.tsx
+++ b/app/src/sandbox/productsTable/ProductsTableDemo.tsx
@@ -1,15 +1,16 @@
+import React, { useCallback } from 'react';
 import { DataTable, useForm, Panel, Button, FlexCell, FlexRow, FlexSpacer } from '@epam/loveship';
-import React from 'react';
-import { Metadata, useList, useUuiContext, UuiContexts } from '@epam/uui-core';
+import { DataSourceState, ItemsMap, Metadata, useLazyDataSource, useUuiContext, UuiContexts } from '@epam/uui-core';
 import { Product } from '@epam/uui-docs';
 import type { TApi } from '../../data';
 import { productColumns } from './columns';
 import { ReactComponent as undoIcon } from '@epam/assets/icons/common/content-edit_undo-18.svg';
 import { ReactComponent as redoIcon } from '@epam/assets/icons/common/content-edit_redo-18.svg';
+import { ReactComponent as add } from '@epam/assets/icons/common/action-add-12.svg';
 import css from './ProductsTableDemo.module.scss';
 
 interface FormState {
-    items: Record<number, Product>;
+    items: ItemsMap<number, Product>;
 }
 
 const metadata: Metadata<FormState> = {
@@ -27,13 +28,14 @@ const metadata: Metadata<FormState> = {
     },
 };
 
-let savedValue: FormState = { items: {} };
+let savedValue: FormState = { items: ItemsMap.fromObject<number, Product>({}, { getId: (product) => product.ProductID }) };
+let lastId = -1;
 
 export function ProductsTableDemo() {
     const svc = useUuiContext<TApi, UuiContexts>();
 
     const {
-        lens, save, isChanged, revert, undo, canUndo, redo, canRedo,
+        lens, save, isChanged, revert, undo, canUndo, redo, canRedo, value: updatedRows, setValue,
     } = useForm<FormState>({
         value: savedValue,
         onSave: async (value) => {
@@ -43,33 +45,44 @@ export function ProductsTableDemo() {
         getMetadata: () => metadata,
     });
 
-    const [tableState, setTableState] = React.useState({});
+    const [tableState, setTableState] = React.useState<DataSourceState>({});
 
-    const { rows, listProps } = useList(
-        {
-            type: 'lazy',
-            api: svc.api.demo.products,
-            getId: (i) => i.ProductID,
-            getRowOptions: (product) => ({ ...lens.prop('items').prop(product.ProductID).default(product).toProps() }),
-            listState: tableState,
-            setListState: setTableState,
-            backgroundReload: true,
-        },
-        [],
-    );
+    const insertTask = useCallback(() => {
+        const product: Product = { ProductID: lastId-- } as Product;
+
+        setValue((currentValue) => {
+            return { ...currentValue, items: currentValue.items.set(product.ProductID, product) };
+        });
+    }, [setValue]);
+
+    const dataSource = useLazyDataSource({
+        api: svc.api.demo.products,
+        patch: updatedRows.items,
+        getId: (i) => i.ProductID,
+        getRowOptions: (product) => ({ ...lens.prop('items').key(product.ProductID).default(product).toProps() }),
+        backgroundReload: true,
+    }, []);
+    
+    const view = dataSource.useView(tableState, setTableState, {});
 
     return (
         <Panel cx={ [css.container, css.uuiThemeLoveship] }>
+            <FlexRow spacing="18" padding="24" vPadding="18" borderBottom={ true }>
+                <FlexCell width="auto">
+                    <Button size="30" icon={ add } caption="Add Task" onClick={ () => insertTask() } />
+                </FlexCell>
+            </FlexRow>
             <DataTable
                 headerTextCase="upper"
-                getRows={ () => rows }
+                getRows={ view.getVisibleRows }
                 columns={ productColumns }
                 value={ tableState }
                 onValueChange={ setTableState }
                 showColumnsConfig
                 allowColumnsResizing
                 allowColumnsReordering
-                { ...listProps }
+                { ...view.getListProps() }
+
             />
             {isChanged && (
                 <FlexRow spacing="12" margin="12">
diff --git a/app/src/sandbox/reactQueryLocationsTable/LocationsTable.module.scss b/app/src/sandbox/reactQueryLocationsTable/LocationsTable.module.scss
new file mode 100644
index 0000000000..e91912f657
--- /dev/null
+++ b/app/src/sandbox/reactQueryLocationsTable/LocationsTable.module.scss
@@ -0,0 +1,6 @@
+.container {
+    height: calc(100vh - 60px);
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+}
diff --git a/app/src/sandbox/reactQueryLocationsTable/LocationsTable.tsx b/app/src/sandbox/reactQueryLocationsTable/LocationsTable.tsx
new file mode 100644
index 0000000000..b26dac5438
--- /dev/null
+++ b/app/src/sandbox/reactQueryLocationsTable/LocationsTable.tsx
@@ -0,0 +1,152 @@
+import React, { useMemo, useState } from 'react';
+import { DataSourceState, DataColumnProps, useUuiContext, useDataRows, LazyDataSourceApi,
+    useFoldingService, useLazyFetchingAdvisor, DataRowOptions, ITreeParams,
+    CascadeSelection, Tree as UUITree } from '@epam/uui-core';
+import { Text, DataTable, Panel } from '@epam/uui';
+import { Location } from '@epam/uui-docs';
+import css from './LocationsTable.module.scss';
+import { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Tree } from './Tree';
+import { useCascadeSelection } from './useCascadeSelection';
+
+type LocationsQueryKey = [string, DataSourceState<Record<string, any>, any>];
+const LOCATIONS_QUERY = 'locations';
+
+const treeParams: ITreeParams<Location, string> = {
+    getId: ({ id }) => id,
+    getParentId: ({ parentId }) => parentId,
+    getChildCount: ({ childCount }) => childCount,
+};
+
+export function LocationsTable() {
+    const svc = useUuiContext();
+    const [tableState, setTableState] = useState<DataSourceState>({
+        topIndex: 0,
+        visibleCount: 20,
+    });
+    const locationsColumns: DataColumnProps<Location>[] = useMemo(
+        () => [
+            {
+                key: 'name',
+                caption: 'Name',
+                render: (location) => (
+                    <Text color="primary" fontSize="14">
+                        {location.name}
+                    </Text>
+                ),
+                isSortable: true,
+                width: 300,
+                minWidth: 165,
+                grow: 1,
+            },
+            {
+                key: 'countryName',
+                caption: 'Country',
+                render: (location) => (
+                    <Text color="primary" fontSize="14">
+                        {location.countryName ?? ''}
+                    </Text>
+                ),
+                isSortable: true,
+                width: 300,
+                isFilterActive: (filter) => filter.country && filter.country.$in && !!filter.country.$in.length,
+            },
+            {
+                key: 'population',
+                caption: 'Population',
+                info: 'Number of this population in the country at the time of the last census.',
+                render: (location) => (
+                    <Text color="primary" fontSize="14">
+                        {location.population}
+                    </Text>
+                ),
+                width: 136,
+                isSortable: true,
+                textAlign: 'right',
+            },
+        ],
+        [],
+    );
+    
+    const itemsMap = useMemo(() => new Map(), []);
+    const blankTree = useMemo(() => Tree.blank(treeParams, itemsMap), []);
+
+    const api: LazyDataSourceApi<Location, string, unknown> = (request, ctx) => {
+        const filter = { parentId: ctx?.parentId };
+        return svc.api.demo.locations({ ...request, filter });
+    };
+    
+    const { isFolded } = useFoldingService<Location, string>({
+        getId: ({ id }) => id,
+        dataSourceState: tableState, 
+        setDataSourceState: setTableState,
+    });
+
+    const queryClient = useQueryClient();
+
+    const { shouldFetch, shouldReload, shouldLoad, shouldRefetch } = useLazyFetchingAdvisor({
+        dataSourceState: tableState,
+        backgroundReload: true,
+    });
+
+    const { data: tree = blankTree, isFetching } = useQuery<Tree, Error, Tree, LocationsQueryKey>({
+        queryKey: [LOCATIONS_QUERY, tableState],
+        queryFn: async ({ queryKey: [, dataSourceState] }) => {
+            const prevTree = queryClient.getQueryData<Tree>([LOCATIONS_QUERY]) ?? blankTree;
+            const { loadedItems, byParentId, nodeInfoById } = await UUITree.load<Location, string>({
+                tree: prevTree,
+                api,
+                getChildCount: (l) => l.childCount,
+                isFolded,
+                dataSourceState,
+            });
+
+            return prevTree.update(loadedItems, byParentId, nodeInfoById);
+        },
+        placeholderData: shouldReload ? undefined : keepPreviousData,
+        enabled: shouldFetch || shouldLoad || shouldRefetch || shouldReload,
+    });
+
+    const rowOptions: DataRowOptions<Location, string> = {
+        // To make some row `pinned`, it is required to define `pin` function.
+        // Parents and elements of the same level can be pinned.
+        pin: (location) => location.value.type !== 'city',
+        checkbox: { isVisible: true },
+    };
+
+    const cascadeSelection: CascadeSelection = 'implicit';
+    const cascadeSelectionService = useCascadeSelection({
+        api,
+        dataSourceState: tableState,
+        rowOptions,
+        isFolded,
+        cascadeSelection,
+        itemsMap,
+        ...treeParams,
+    });
+
+    const { rows, listProps } = useDataRows({
+        tree,
+        cascadeSelection,
+        dataSourceState: tableState,
+        setDataSourceState: setTableState,
+        rowOptions,
+        isFetching: shouldFetch && !shouldLoad && isFetching,
+        isLoading: (shouldLoad || shouldReload) && isFetching,
+        ...treeParams,
+        ...cascadeSelectionService,
+    });
+
+    return (
+        <Panel shadow cx={ css.container }>
+            <DataTable
+                value={ tableState }
+                onValueChange={ setTableState }
+                { ...listProps }
+                rows={ rows }
+                headerTextCase="upper"
+                columns={ locationsColumns }
+            />
+        </Panel>
+    );
+}
diff --git a/app/src/sandbox/reactQueryLocationsTable/Tree.ts b/app/src/sandbox/reactQueryLocationsTable/Tree.ts
new file mode 100644
index 0000000000..aa1050ae9d
--- /dev/null
+++ b/app/src/sandbox/reactQueryLocationsTable/Tree.ts
@@ -0,0 +1,67 @@
+import { ITree, NOT_FOUND_RECORD,
+    ITreeNodeInfo, ITreeParams, ITreeItemsInfo, ITreeNodeStatus, IMap } from '@epam/uui-core';
+import { Location } from '@epam/uui-docs';
+
+export class Tree implements ITree<Location, string> {
+    constructor(
+        protected _params: ITreeParams<Location, string>,
+        protected _itemsMap: IMap<string, Location> = new Map(),
+        protected _byParentId: IMap<string, string[]> = new Map(),
+        protected _nodeInfoById: IMap<string, ITreeNodeInfo> = new Map(),
+    ) {}
+
+    public getParams() {
+        return this._params;
+    }
+
+    public getItems(parentId?: string): ITreeItemsInfo<string> {
+        const ids = this._byParentId.get(parentId) ?? [];
+        const { count, totalCount } = this._nodeInfoById.get(parentId) ?? {};
+
+        let status: ITreeNodeStatus = count === undefined ? 'PARTIALLY_LOADED' : 'EMPTY';
+        if (count !== 0 && ids.length === count) {
+            status = 'FULLY_LOADED';
+        }
+        const parent = this._itemsMap.get(parentId);
+        let assumedCountInfo: { assumedCount?: number } = {};
+        if (parent && 'childCount' in parent) {
+            assumedCountInfo = { assumedCount: parent.childCount };
+        }
+        return { ids, count, totalCount, status, ...assumedCountInfo };
+    }
+
+    getById(id: string): Location | typeof NOT_FOUND_RECORD {
+        return this.itemsMap.has(id) ? this.itemsMap.get(id) : NOT_FOUND_RECORD;
+    }
+
+    public static blank(params: ITreeParams<Location, string>, itemsMap?: IMap<string, Location>) {
+        return new Tree(params, itemsMap);
+    }
+
+    public get itemsMap() {
+        return this._itemsMap;
+    }
+
+    public update(items: Location[], newByParentId: IMap<string, string[]>, newNodeInfoById: IMap<string, ITreeNodeInfo>) {
+        items.forEach((item) => {
+            const id = this.getParams().getId(item);
+            this._itemsMap.set(id, item);
+        });
+
+        const byParentId = newByParentId.size ? new Map(this._byParentId) : this._byParentId;
+        for (const [parentId, childrenIds] of newByParentId) {
+            byParentId.set(parentId, childrenIds);
+        }
+
+        const nodeInfoById = newNodeInfoById.size ? new Map(this._nodeInfoById) : this._nodeInfoById;
+        for (const [id, nodeInfo] of newNodeInfoById) {
+            nodeInfoById.set(id, nodeInfo);
+        }
+
+        if (!items.length && byParentId === this._byParentId && nodeInfoById === this._nodeInfoById) {
+            return this;
+        }
+
+        return new Tree(this.getParams(), this._itemsMap, byParentId, nodeInfoById);
+    }
+}
diff --git a/app/src/sandbox/reactQueryLocationsTable/index.tsx b/app/src/sandbox/reactQueryLocationsTable/index.tsx
new file mode 100644
index 0000000000..871bd4aa30
--- /dev/null
+++ b/app/src/sandbox/reactQueryLocationsTable/index.tsx
@@ -0,0 +1,13 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+import { LocationsTable } from './LocationsTable';
+
+const queryClient = new QueryClient();
+
+export function ReactQueryLocationsTable() {
+    return (
+        <QueryClientProvider client={ queryClient }>
+            <LocationsTable />
+        </QueryClientProvider>
+    );
+}
diff --git a/app/src/sandbox/reactQueryLocationsTable/useCascadeSelection.ts b/app/src/sandbox/reactQueryLocationsTable/useCascadeSelection.ts
new file mode 100644
index 0000000000..f3a80f0f3a
--- /dev/null
+++ b/app/src/sandbox/reactQueryLocationsTable/useCascadeSelection.ts
@@ -0,0 +1,81 @@
+import { CascadeSelection, DataRowOptions, DataSourceState, IMap, ITree, LazyDataSourceApi, ITreeLoadResult,
+    ITreeParams, useCascadeSelectionService, Tree as UUITree } from '@epam/uui-core';
+import { useQueryClient } from '@tanstack/react-query';
+import { Location } from '@epam/uui-docs';
+import { Tree } from './Tree';
+import { useCallback, useMemo } from 'react';
+
+export interface UseCascadeSelectionProps<TItem, TId> extends ITreeParams<Location, string> {
+    api: LazyDataSourceApi<Location, string, unknown>,
+    cascadeSelection?: CascadeSelection;
+    getRowOptions?: (item: TItem, index?: number) => DataRowOptions<TItem, TId>;
+    rowOptions?: DataRowOptions<TItem, TId>;
+    dataSourceState: DataSourceState<any, string>;
+    isFolded: (item: Location) => boolean;
+    itemsMap?: IMap<TId, Location>;
+}
+type LocationsSelectionKey = [string, DataSourceState<Record<string, any>, any>, (item: Location) => boolean, CascadeSelection];
+
+const LOCATIONS_SELECTION_QUERY = 'locations-selection';
+
+const isTree = <TItem, TId>(tree: ITree<TItem, TId> | ITreeLoadResult<TItem, TId>): tree is ITree<TItem, TId> => {
+    return tree instanceof Tree;
+};
+
+export function useCascadeSelection({
+    api,
+    getId,
+    getParentId,
+    complexIds,
+    cascadeSelection = false,
+    getRowOptions,
+    rowOptions,
+    dataSourceState,
+    isFolded,
+    itemsMap,
+}: UseCascadeSelectionProps<Location, string>) {
+    const queryClient = useQueryClient();
+    const blankTree = useMemo(() => Tree.blank({ getId, getParentId, complexIds }, itemsMap), []);
+
+    const loadMissingRecordsOnCheck = useCallback(async (id: string, isChecked: boolean, isRoot: boolean) => {
+        return await queryClient.fetchQuery<Tree, Error, Tree, LocationsSelectionKey>({
+            queryKey: [LOCATIONS_SELECTION_QUERY, dataSourceState, isFolded, cascadeSelection],
+            queryFn: async ({ queryKey: [, _dataSourceState, _isFolded, _cascadeSelection] }) => {
+                const prevTree = queryClient.getQueryData<Tree>([LOCATIONS_SELECTION_QUERY]) ?? blankTree;
+
+                const result = await UUITree.loadMissingOnCheck<Location, string, unknown>({
+                    checkedId: id,
+                    isChecked,
+                    isRoot,
+                    tree: prevTree,
+                    api,
+                    getChildCount: (l) => l.childCount,
+                    cascadeSelection: _cascadeSelection,
+                    isFolded: _isFolded,
+                    dataSourceState: _dataSourceState,
+                });
+
+                if (isTree(result)) {
+                    return result as Tree;
+                }
+
+                const { loadedItems, byParentId, nodeInfoById } = result;
+                const newTree = prevTree.update(loadedItems, byParentId, nodeInfoById);
+                queryClient.setQueryData([LOCATIONS_SELECTION_QUERY], newTree);
+
+                return newTree;
+            },
+            initialData: () => queryClient.getQueryData([LOCATIONS_SELECTION_QUERY]),
+        });
+    }, [api, blankTree, cascadeSelection, dataSourceState, isFolded, queryClient]);
+
+    const cascadeSelectionService = useCascadeSelectionService({
+        tree: blankTree,
+        cascadeSelection,
+        getRowOptions,
+        rowOptions,
+        loadMissingRecordsOnCheck,
+    });
+
+    return cascadeSelectionService;
+}
diff --git a/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.tsx b/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.tsx
index dab2c0fbd5..374e7b3de5 100644
--- a/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.tsx
+++ b/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.tsx
@@ -10,7 +10,6 @@ import {
     useArrayDataSource,
     DataTableCellProps,
     RenderCellProps,
-    useList,
 } from '@epam/uui-core';
 import { useForm } from '@epam/promo';
 import * as promo from '@epam/promo';
@@ -282,20 +281,20 @@ export default function TableCellsStylesSandbox() {
         [skinName],
     );
 
-    const { rows, listProps } = useList(
+    const dataSource = useArrayDataSource(
         {
-            type: 'array',
-            listState: tableState,
-            setListState: setTableState,
             items,
             getId: ({ id: listId }) => listId,
-            getRowOptions: (_: Item, index: number) => ({
-                ...lens.prop('items').index(index).toProps(),
-            }),
         },
         [],
     );
 
+    const view = dataSource.useView(tableState, setTableState, {
+        getRowOptions: (_: Item, index: number) => ({
+            ...lens.prop('items').index(index).toProps(),
+        }),
+    });
+
     const renderRow = useCallback(
         (props: DataTableRowProps<Item, number>) => {
             return <skin.DataTableRow { ...props } />;
@@ -303,7 +302,7 @@ export default function TableCellsStylesSandbox() {
         [skinName],
     );
 
-    // Render the table, passing the prepared data to it in form of getVisibleRows callback, list props (e.g. items counts)
+    // Render the table, passing the prepared data to it in form of getRows callback, list props (e.g. items counts)
     return (
         <skin.Panel key={ skinName } cx={ [css.wrapper, skinName !== 'uui' && css[`uui-theme-${skinName}`]] }>
             <skin.FlexRow>
@@ -318,8 +317,8 @@ export default function TableCellsStylesSandbox() {
                 </skin.FlexCell>
             </skin.FlexRow>
             <skin.DataTable
-                { ...listProps }
-                getRows={ () => rows }
+                { ...view.getListProps() }
+                getRows={ view.getVisibleRows }
                 value={ tableState }
                 onValueChange={ setTableState }
                 columns={ columns }
diff --git a/app/src/sandbox/tablePaged/DemoTablePaged.module.scss b/app/src/sandbox/tablePaged/DemoTablePaged.module.scss
index 3e04124449..aaea4b8852 100644
--- a/app/src/sandbox/tablePaged/DemoTablePaged.module.scss
+++ b/app/src/sandbox/tablePaged/DemoTablePaged.module.scss
@@ -1,20 +1,27 @@
 @use '~@epam/assets/theme/theme_promo' as *;
 
 .container {
+    overflow: hidden;
+    display: flex;
+    position: relative;
+}
+
+.apply {
+    width: 200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+.wrapper {
     display: flex;
     flex-direction: column;
-    height: calc(100vh - 60px);
+    height: calc(100vh - 96px);
     transition: all 500ms;
     flex-basis: auto;
     min-width: 0;
     flex-grow: 1;
 
-    &.uui-theme-promo {
-        :global {
-            @include theme-promo();
-        }
-    }
-
     :global(.uui-table-row) {
         .detailed-icon {
             visibility: hidden;
@@ -26,10 +33,4 @@
             }
         }
     }
-}
-
-.apply {
-    width: 200px;
-    margin-left: auto;
-    margin-right: auto;
-}
+}
\ No newline at end of file
diff --git a/app/src/sandbox/tablePaged/DemoTablePaged.tsx b/app/src/sandbox/tablePaged/DemoTablePaged.tsx
index 8dddbb8fbf..6bc47e6e4b 100644
--- a/app/src/sandbox/tablePaged/DemoTablePaged.tsx
+++ b/app/src/sandbox/tablePaged/DemoTablePaged.tsx
@@ -2,15 +2,18 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { Person } from '@epam/uui-docs';
 import { FlexCell } from '@epam/uui-components';
-import { DataRowOptions, LazyDataSourceApi, useTableState, useList } from '@epam/uui-core';
+import { DataRowOptions, LazyDataSourceApi, useTableState, useLazyDataSource } from '@epam/uui-core';
 import { DataTable, FlexRow, Paginator, FlexSpacer, Button } from '@epam/promo';
 import { svc } from '../../services';
 import { getFilters } from './filters';
 import { personColumns } from './columns';
 import css from './DemoTablePaged.module.scss';
+import { InfoSidebarPanel } from './InfoSidebarPanel';
 
 export function DemoTablePaged() {
     const filters = useMemo(getFilters, []);
+    const [isInfoPanelOpened, setIsInfoPanelOpened] = useState(false);
+    const closeInfoPanel = useCallback(() => setIsInfoPanelOpened(false), []);
 
     const { tableState, setTableState } = useTableState<Person>({
         columns: personColumns,
@@ -20,79 +23,84 @@ export function DemoTablePaged() {
         setTableState({ ...tableState, page: 1, pageSize: 100 });
     }, []);
 
-    const [totalCount, setTotalCount] = useState(0);
-
     const api: LazyDataSourceApi<Person, number, Person> = useCallback(async (request) => {
         const result = await svc.api.demo.personsPaged({
             filter: request.filter,
             page: request.page,
             pageSize: request.pageSize,
         });
-        setTotalCount(result.totalCount);
+
         result.count = result.items.length;
-        result.totalCount = result.items.length;
         result.from = 0;
         return result;
     }, []);
 
     const applyFilter = useCallback(() => {
-        setTableState({ ...tableState, scrollTo: { index: 0 } });
-    }, [tableState]);
+        setTableState((state) => ({ ...state, scrollTo: { index: 0 } }));
+    }, [setTableState]);
 
     // applying filter after parsing initial filter data from url
     useEffect(() => {
         applyFilter();
-    }, []);
+    }, [applyFilter]);
 
     const rowOptions: DataRowOptions<Person, number> = {
         checkbox: { isVisible: true },
         isSelectable: true,
         onClick(rowProps) {
             rowProps.onSelect(rowProps);
+            setIsInfoPanelOpened(true);
         },
     };
 
-    const { rows, listProps } = useList(
-        {
-            type: 'lazy',
-            listState: tableState,
-            setListState: setTableState,
-            api,
-            rowOptions,
-            getId: ({ id }) => id,
-            isFoldedByDefault: () => true,
-            backgroundReload: true,
-        },
-        [api],
-    );
+    const dataSource = useLazyDataSource({
+        api,
+        rowOptions,
+        getId: ({ id }) => id,
+        isFoldedByDefault: () => true,
+        backgroundReload: true, 
+    }, []);
+
+    const view = dataSource.useView(tableState, setTableState, {});
+
+    const panelInfo = tableState.selectedId && (view.getById(tableState.selectedId, 0).value);
+
+    const listProps = view.getListProps();
 
     return (
         <div className={ cx(css.container, css.uuiThemePromo) }>
-            <DataTable
-                headerTextCase="upper"
-                getRows={ () => rows }
-                columns={ personColumns }
-                filters={ filters }
-                showColumnsConfig
-                value={ tableState }
-                onValueChange={ setTableState }
-                allowColumnsResizing
-                { ...listProps }
-            />
-
-            <FlexRow size="36" padding="12" background="gray5">
-                <FlexCell width="auto">
-                    <Button caption="Apply filter" onClick={ applyFilter } cx={ css.apply } />
-                </FlexCell>
-                <FlexSpacer />
-                <Paginator
-                    value={ tableState.page }
-                    onValueChange={ (page: number) => setTableState({ ...tableState, page, scrollTo: { index: 0 } }) }
-                    totalPages={ Math.ceil(totalCount / tableState.pageSize) }
-                    size="30"
+            <div className={ cx(css.wrapper) }>
+                <DataTable
+                    headerTextCase="upper"
+                    getRows={ view.getVisibleRows }
+                    columns={ personColumns }
+                    filters={ filters }
+                    showColumnsConfig
+                    value={ tableState }
+                    onValueChange={ setTableState }
+                    allowColumnsResizing
+                    { ...listProps }
                 />
-                <FlexSpacer />
-            </FlexRow>
+                <FlexRow size="36" padding="12" background="gray5">
+                    <FlexCell width="auto">
+                        <Button caption="Apply filter" onClick={ applyFilter } cx={ css.apply } />
+                    </FlexCell>
+                    <FlexSpacer />
+                    <Paginator
+                        value={ tableState.page }
+                        onValueChange={ (page: number) => setTableState({ ...tableState, page, scrollTo: { index: 0 } }) }
+                        totalPages={ Math.ceil(listProps.totalCount / tableState.pageSize) }
+                        size="30"
+                    />
+                    <FlexSpacer />
+                </FlexRow>
+            </div>
+            <InfoSidebarPanel
+                data={ panelInfo }
+                isVisible={ isInfoPanelOpened }
+                onClose={ closeInfoPanel }
+                onSave={ async () => { view.reload(); } }
+            />
         </div>
     );
 }
diff --git a/app/src/sandbox/tablePaged/InfoSidebarPanel/InfoRow.tsx b/app/src/sandbox/tablePaged/InfoSidebarPanel/InfoRow.tsx
new file mode 100644
index 0000000000..c0560762e4
--- /dev/null
+++ b/app/src/sandbox/tablePaged/InfoSidebarPanel/InfoRow.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { FlexCell, FlexRow, Text } from '@epam/uui';
+import css from './InfoSidebarPanel.module.scss';
+
+interface InfoRowProps {
+    title: string;
+    value: any;
+}
+
+export function InfoRow({ title, value }: InfoRowProps) {
+    return (
+        <FlexRow padding="24">
+            <FlexCell shrink={ 0 } width={ 162 }>
+                <Text color="secondary">{title}</Text>
+            </FlexCell>
+            <Text cx={ css.noWrap }>{value}</Text>
+        </FlexRow>
+    );
+}
diff --git a/app/src/sandbox/tablePaged/InfoSidebarPanel/InfoSidebarPanel.module.scss b/app/src/sandbox/tablePaged/InfoSidebarPanel/InfoSidebarPanel.module.scss
new file mode 100644
index 0000000000..ec2a57ce09
--- /dev/null
+++ b/app/src/sandbox/tablePaged/InfoSidebarPanel/InfoSidebarPanel.module.scss
@@ -0,0 +1,60 @@
+@use '~@epam/promo/assets/styles/fonts' as *;
+@use '~@epam/promo/assets/styles/colors' as *;
+
+@keyframes show-info-panel {
+    0% {
+        transform: translate3d(100%, 0, 0);
+        margin-left: -360px;
+    }
+
+    100% {
+        transform: translate3d(0, 0, 0);
+        margin-left: 0;
+    }
+}
+
+@keyframes hide-info-panel {
+    0% {
+        transform: translate3d(0, 0, 0);
+        margin-left: 0;
+    }
+
+    100% {
+        transform: translate3d(100%, 0, 0);
+        margin-left: -360px;
+    }
+}
+
+body {
+    &:global(.full-screen) {
+        .wrapper {
+            height: 100vh;
+        }
+    }
+}
+
+.wrapper {
+    display: flex;
+    height: calc(100vh - 102px);
+    width: 360px;
+    border-left: 1px solid var(--uui-divider);
+
+    .no-wrap {
+        white-space: nowrap;
+    }
+}
+
+.info-sidebar-panel-wrapper {
+    width: 360px;
+    margin-left: -360px;
+
+    &:global(.show) {
+        animation: show-info-panel 500ms;
+        animation-fill-mode: forwards;
+    }
+
+    &:global(.hide) {
+        animation: hide-info-panel 500ms;
+        animation-fill-mode: forwards;
+    }
+}
diff --git a/app/src/sandbox/tablePaged/InfoSidebarPanel/InfoSidebarPanel.tsx b/app/src/sandbox/tablePaged/InfoSidebarPanel/InfoSidebarPanel.tsx
new file mode 100644
index 0000000000..3104aa27a8
--- /dev/null
+++ b/app/src/sandbox/tablePaged/InfoSidebarPanel/InfoSidebarPanel.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+    FlexCell, FlexRow, FlexSpacer, IconButton, Panel, Text,
+} from '@epam/uui';
+import { ReactComponent as CrossIcon } from '@epam/assets/icons/common/navigation-close-24.svg';
+import { cx } from '@epam/uui-core';
+import { Person } from '@epam/uui-docs';
+import { PersonTableRecord } from '../types';
+import css from './InfoSidebarPanel.module.scss';
+import { PersonInfo } from './PersonInfo';
+
+interface SidebarPanelProps {
+    data: PersonTableRecord;
+    isVisible: boolean;
+    onClose(): void;
+    onSave: (state: Person) => Promise<void>;
+}
+
+export function InfoSidebarPanel({ data, isVisible, onClose, onSave }: SidebarPanelProps) {
+    if (!data || data.__typename !== 'Person') {
+        return null;
+    }
+
+    return (
+        <div className={ cx(css.infoSidebarPanelWrapper, isVisible ? 'show' : 'hide') }>
+            <Panel cx={ css.wrapper }>
+                <FlexRow borderBottom padding="24">
+                    <Text size="48" fontWeight="600">
+                        Detailed Information
+                    </Text>
+                    <FlexSpacer />
+                    <FlexCell shrink={ 0 } width="auto">
+                        <IconButton icon={ CrossIcon } onClick={ onClose } />
+                    </FlexCell>
+                </FlexRow>
+                <PersonInfo data={ data } onSave={ onSave } />
+            </Panel>
+        </div>
+    );
+}
diff --git a/app/src/sandbox/tablePaged/InfoSidebarPanel/PersonInfo.tsx b/app/src/sandbox/tablePaged/InfoSidebarPanel/PersonInfo.tsx
new file mode 100644
index 0000000000..1689460eb6
--- /dev/null
+++ b/app/src/sandbox/tablePaged/InfoSidebarPanel/PersonInfo.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Badge, BadgeProps, FlexCell, FlexRow, ScrollBars, Text, TextInput, useForm } from '@epam/uui';
+import { Person } from '@epam/uui-docs';
+import { InfoRow } from './InfoRow';
+import { Button } from '@epam/promo';
+
+interface PersonInfoProps {
+    data: Person;
+    onSave: (state: Person) => Promise<void>;
+}
+
+type FormState = Person;
+
+export function PersonInfo({ data, onSave }: PersonInfoProps) {
+    const {
+        lens, save,
+    } = useForm<FormState>({
+        value: data,
+        onSave,
+    });
+
+    return (
+        <ScrollBars>
+            <FlexRow padding="24">
+                <FlexCell shrink={ 0 } width={ 162 }>
+                    <Text color="secondary">Name</Text>
+                </FlexCell>
+                <TextInput { ...lens.prop('name').toProps() } />
+            </FlexRow>
+            <InfoRow title="Status" value={ <Badge size="24" fill="outline" indicator caption={ data.profileStatus } color={ data.profileStatus.toLowerCase() as BadgeProps['color'] } /> } />
+            <InfoRow title="Job Title" value={ data.jobTitle } />
+            <InfoRow title="Title Level" value={ data.titleLevel } />
+            <InfoRow title="Office" value={ data.officeAddress } />
+            <InfoRow title="City" value={ data.cityName } />
+            <InfoRow title="Country" value={ data.countryName } />
+            <InfoRow title="Manager" value={ data.managerName } />
+            <InfoRow title="Hire date" value={ new Date(data.hireDate).toLocaleDateString() } />
+            <InfoRow title="Related NPR" value={ data.relatedNPR ? 'Completed' : 'Uncompleted' } />
+            <InfoRow title="Department" value={ data.departmentName } />
+            <InfoRow title="Email" value={ data.email } />
+            <InfoRow title="Modified" value={ new Date(data.modifiedDate).toLocaleDateString() } />
+            <InfoRow title="Notes" value={ data.notes || '-' } />
+            <InfoRow title="Primary skill" value={ data.primarySkill } />
+            <InfoRow title="Production category" value={ data.productionCategory ? 'true' : 'false' } />
+            <InfoRow title="UID" value={ data.uid } />
+            <InfoRow title="Birth date" value={ new Date(data.birthDate).toLocaleDateString() } />
+            
+            <Button caption="Save" onClick={ save } />
+        </ScrollBars>
+    );
+}
diff --git a/app/src/sandbox/tablePaged/InfoSidebarPanel/index.ts b/app/src/sandbox/tablePaged/InfoSidebarPanel/index.ts
new file mode 100644
index 0000000000..19254e1608
--- /dev/null
+++ b/app/src/sandbox/tablePaged/InfoSidebarPanel/index.ts
@@ -0,0 +1 @@
+export { InfoSidebarPanel } from './InfoSidebarPanel';
diff --git a/app/src/sandbox/tables/PersonsTableDemo.tsx b/app/src/sandbox/tables/PersonsTableDemo.tsx
index 2e2cc95e11..8a08495b39 100644
--- a/app/src/sandbox/tables/PersonsTableDemo.tsx
+++ b/app/src/sandbox/tables/PersonsTableDemo.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FlexRow, FlexCell, FlexSpacer, Text, PickerInput, Button, SearchInput, DataTable, DataTableRow } from '@epam/loveship';
 import { Person } from '@epam/uui-docs';
-import { DataSourceState, useArrayDataSource, useList, LazyDataSourceApiRequest, LazyDataSourceApiResponse, Lens, DataColumnProps, LazyDataSourceApi } from '@epam/uui-core';
+import { DataSourceState, useArrayDataSource, LazyDataSourceApiRequest, LazyDataSourceApiResponse, Lens, DataColumnProps, LazyDataSourceApi, useTree, useDataRows } from '@epam/uui-core';
 import { PersonTableFilter, PersonTableRecord, PersonTableRecordId, PersonTableRecordType, PersonsApiResponse, PersonsSummary, PersonsTableState } from './types';
 import { svc } from '../../services';
 import { getColumns } from './columns';
@@ -123,11 +123,11 @@ export function PersonsTableDemo() {
         }
     };
 
-    const { rows, listProps, reload } = useList<PersonTableRecord, PersonTableRecordId, PersonTableFilter>(
+    const tree = useTree<PersonTableRecord, PersonTableRecordId, PersonTableFilter>(
         {
             type: 'lazy',
-            listState: value,
-            setListState: onValueChange,
+            dataSourceState: value,
+            setDataSourceState: onValueChange,
             api,
             getId: (i) => [i.__typename, i.id],
             complexIds: true,
@@ -160,7 +160,8 @@ export function PersonsTableDemo() {
         },
         [value.filter?.groupBy],
     );
-
+    const { rows, listProps } = useDataRows(tree);
+    
     return (
         <div className={ cx(css.container, css.uuiThemeLoveship) }>
             <FlexRow spacing="12" padding="24" vPadding="12" borderBottom={ true }>
@@ -182,11 +183,11 @@ export function PersonsTableDemo() {
                     />
                 </FlexCell>
                 <FlexCell width="auto">
-                    <Button caption="Reload" onClick={ () => reload() } size="30" />
+                    <Button caption="Reload" onClick={ () => tree.reload() } size="30" />
                 </FlexCell>
             </FlexRow>
             <DataTable
-                getRows={ () => rows }
+                rows={ rows }
                 columns={ personColumns as DataColumnProps<PersonTableRecord, PersonTableRecordId, any>[] }
                 value={ value }
                 onValueChange={ onValueChange }
diff --git a/app/src/sandbox/tokens/palette/components/paletteTable/paletteTable.tsx b/app/src/sandbox/tokens/palette/components/paletteTable/paletteTable.tsx
index dfecee86d8..6c57cb328b 100644
--- a/app/src/sandbox/tokens/palette/components/paletteTable/paletteTable.tsx
+++ b/app/src/sandbox/tokens/palette/components/paletteTable/paletteTable.tsx
@@ -1,221 +1,221 @@
-import React, { useMemo, useState } from 'react';
-import {
-    Blocker,
-    DataTableHeaderRow,
-    DataTableRow,
-    FiltersPanel, FlexCell,
-    FlexRow,
-    Panel, PickerInput,
-    ScrollBars, SearchInput,
-} from '@epam/uui';
-import {
-    DataTableRowProps,
-    DataTableState,
-    useArrayDataSource,
-    useColumnsConfig,
-    useTableState,
-} from '@epam/uui-core';
-import {
-    getColumns,
-    getFiltersConfig,
-    getSortBy,
-} from './tableColumns';
-import {
-    ITokenRow,
-    TLoadThemeTokensParams, TLoadThemeTokensResult, TThemeTokenValueType,
-    TTokensLocalFilter,
-} from '../../types/types';
-import { getTotals } from '../../utils/totalsUtils';
-import { TokensSummary } from './tokensSummary';
-//
-import css from './paletteTable.module.scss';
-import { convertLocalTokens } from './localTokensConverter';
-import { DEFAULT_LOCAL_FILTER } from '../../constants';
-
-const TOP_INDENT = '135px'; // 60px header + 75px summary/filter area
-
-type PaletteTableProps = {
-    grouped: boolean,
-    params: TLoadThemeTokensParams,
-    onChangeParams: (updater: ((prevParams: TLoadThemeTokensParams) => TLoadThemeTokensParams)) => void,
-    result: TLoadThemeTokensResult,
-};
-
-export function PaletteTable(props: PaletteTableProps) {
-    const { params, result, grouped } = props;
-    const { tokens, loading, uuiTheme } = result;
-    const { valueType, filter } = params;
-
-    const filtersConfig = useMemo(() => {
-        return getFiltersConfig(getTotals(tokens));
-    }, [tokens]);
-
-    const defaultColumns = useMemo(() => {
-        return getColumns({ uuiTheme, valueType, filter });
-    }, [filter, uuiTheme, valueType]);
-
-    const [value, onValueChange] = useState<DataTableState<TTokensLocalFilter>>({
-        topIndex: 0,
-        visibleCount: Number.MAX_SAFE_INTEGER,
-        filter: DEFAULT_LOCAL_FILTER,
-    });
-
-    const { tableState, setTableState } = useTableState<TTokensLocalFilter>({
-        onValueChange,
-        filters: filtersConfig,
-        columns: defaultColumns,
-        value,
-    });
-
-    const items: ITokenRow[] = useMemo(() => {
-        return convertLocalTokens({
-            tokens,
-            grouped,
-            localFilter: tableState.filter,
-        });
-    }, [grouped, tokens, tableState.filter]);
-
-    const tokensDs = useArrayDataSource<ITokenRow, string, TTokensLocalFilter>(
-        {
-            items,
-            getId: (item) => {
-                return item.id;
-            },
-            sortBy: getSortBy(),
-            getParentId: (item) => {
-                if (grouped) {
-                    return item.parentId;
-                }
-            },
-        },
-        [items],
-    );
-    const tokensDsView = tokensDs.getView(tableState, setTableState, {
-        isFoldedByDefault: () => false,
-    });
-    const { columns, config: columnsConfig } = useColumnsConfig(defaultColumns, tableState.columnsConfig || {});
-    const renderRow = (rowProps: DataTableRowProps<ITokenRow, string>) => {
-        return (
-            <DataTableRow
-                // cx={ cx }
-                key={ rowProps.id }
-                { ...rowProps }
-                columns={ columns }
-                indent={ Math.min(rowProps.indent || 0, 1) }
-            />
-        );
-    };
-
-    const handleChangeValueType = (newValueType: TThemeTokenValueType) => {
-        props.onChangeParams((prev) => {
-            return {
-                ...prev,
-                valueType: newValueType,
-            };
-        });
-    };
-
-    return (
-        <Panel background="surface-main" shadow>
-            <FlexRow
-                padding="12"
-                vPadding="24"
-                rawProps={ { style: { flexWrap: 'nowrap', gap: '3px', paddingBottom: 0 } } }
-            >
-                <ParamsFilters params={ props.params } onChangeParams={ props.onChangeParams } />
-                <FiltersPanel<TTokensLocalFilter>
-                    filters={ filtersConfig }
-                    tableState={ tableState }
-                    setTableState={ setTableState }
-                />
-                <TokensSummary
-                    uuiTheme={ uuiTheme }
-                    expectedValueType={ params.valueType }
-                    onChangeExpectedValueType={ handleChangeValueType }
-                />
-            </FlexRow>
-            <div>
-                <Blocker isEnabled={ loading } cx={ css.blocker } />
-                <ScrollBars style={ { height: `calc(100vh - ${TOP_INDENT})`, marginBottom: '0px' } }>
-                    <div>
-                        <div className={ css.stickyHeader }>
-                            <DataTableHeaderRow
-                                columns={ columns }
-                                allowColumnsResizing={ false }
-                                value={ { ...tableState, columnsConfig } }
-                                onValueChange={ setTableState }
-                            />
-                        </div>
-                        { tokensDsView.getVisibleRows().map(renderRow) }
-                    </div>
-                </ScrollBars>
-            </div>
-        </Panel>
-    );
-}
-
-function ParamsFilters(props: {
-    params: TLoadThemeTokensParams,
-    onChangeParams: (updater: ((prevParams: TLoadThemeTokensParams) => TLoadThemeTokensParams)) => void,
-}) {
-    const handleChangeFilterPath = (newPath: string) => {
-        props.onChangeParams((prev) => {
-            return {
-                ...prev,
-                filter: {
-                    ...prev.filter,
-                    path: newPath,
-                },
-            };
-        });
-    };
-    const handleChangeFilterPublished = (newPublished: 'yes' | 'no' | undefined) => {
-        props.onChangeParams((prev) => {
-            return {
-                ...prev,
-                filter: {
-                    ...prev.filter,
-                    published: newPublished,
-                },
-            };
-        });
-    };
-    const dataSource = useArrayDataSource(
-        {
-            items: [
-                {
-                    id: 'yes',
-                    label: 'Published',
-                },
-                {
-                    id: 'no',
-                    label: 'Not published',
-                },
-            ],
-        },
-        [],
-    );
-    return (
-        <>
-            <FlexCell style={ { width: '150px', flexBasis: 'auto' } }>
-                <SearchInput
-                    placeholder="Filter 'Path'"
-                    value={ props.params.filter.path }
-                    onValueChange={ handleChangeFilterPath }
-                />
-            </FlexCell>
-            <FlexCell style={ { width: '150px', flexBasis: 'auto' } }>
-                <PickerInput
-                    placeholder="Filter 'Published'"
-                    dataSource={ dataSource }
-                    value={ props.params.filter.published }
-                    onValueChange={ handleChangeFilterPublished }
-                    getName={ (item) => item.label }
-                    entityName="Published"
-                    selectionMode="single"
-                    valueType="id"
-                />
-            </FlexCell>
-        </>
-    );
-}
+import React, { useMemo, useState } from 'react';
+import {
+    Blocker,
+    DataTableHeaderRow,
+    DataTableRow,
+    FiltersPanel, FlexCell,
+    FlexRow,
+    Panel, PickerInput,
+    ScrollBars, SearchInput,
+} from '@epam/uui';
+import {
+    DataTableRowProps,
+    DataTableState,
+    useArrayDataSource,
+    useColumnsConfig,
+    useTableState,
+} from '@epam/uui-core';
+import {
+    getColumns,
+    getFiltersConfig,
+    getSortBy,
+} from './tableColumns';
+import {
+    ITokenRow,
+    TLoadThemeTokensParams, TLoadThemeTokensResult, TThemeTokenValueType,
+    TTokensLocalFilter,
+} from '../../types/types';
+import { getTotals } from '../../utils/totalsUtils';
+import { TokensSummary } from './tokensSummary';
+//
+import css from './paletteTable.module.scss';
+import { convertLocalTokens } from './localTokensConverter';
+import { DEFAULT_LOCAL_FILTER } from '../../constants';
+
+const TOP_INDENT = '135px'; // 60px header + 75px summary/filter area
+
+type PaletteTableProps = {
+    grouped: boolean,
+    params: TLoadThemeTokensParams,
+    onChangeParams: (updater: ((prevParams: TLoadThemeTokensParams) => TLoadThemeTokensParams)) => void,
+    result: TLoadThemeTokensResult,
+};
+
+export function PaletteTable(props: PaletteTableProps) {
+    const { params, result, grouped } = props;
+    const { tokens, loading, uuiTheme } = result;
+    const { valueType, filter } = params;
+
+    const filtersConfig = useMemo(() => {
+        return getFiltersConfig(getTotals(tokens));
+    }, [tokens]);
+
+    const defaultColumns = useMemo(() => {
+        return getColumns({ uuiTheme, valueType, filter });
+    }, [filter, uuiTheme, valueType]);
+
+    const [value, onValueChange] = useState<DataTableState<TTokensLocalFilter>>({
+        topIndex: 0,
+        visibleCount: Number.MAX_SAFE_INTEGER,
+        filter: DEFAULT_LOCAL_FILTER,
+    });
+
+    const { tableState, setTableState } = useTableState<TTokensLocalFilter>({
+        onValueChange,
+        filters: filtersConfig,
+        columns: defaultColumns,
+        value,
+    });
+
+    const items: ITokenRow[] = useMemo(() => {
+        return convertLocalTokens({
+            tokens,
+            grouped,
+            localFilter: tableState.filter,
+        });
+    }, [grouped, tokens, tableState.filter]);
+
+    const tokensDs = useArrayDataSource<ITokenRow, string, TTokensLocalFilter>(
+        {
+            items,
+            getId: (item) => {
+                return item.id;
+            },
+            sortBy: getSortBy(),
+            getParentId: (item) => {
+                if (grouped) {
+                    return item.parentId;
+                }
+            },
+        },
+        [items],
+    );
+    const tokensDsView = tokensDs.useView(tableState, setTableState, {
+        isFoldedByDefault: () => false,
+    });
+    const { columns, config: columnsConfig } = useColumnsConfig(defaultColumns, tableState.columnsConfig || {});
+    const renderRow = (rowProps: DataTableRowProps<ITokenRow, string>) => {
+        return (
+            <DataTableRow
+                // cx={ cx }
+                key={ rowProps.id }
+                { ...rowProps }
+                columns={ columns }
+                indent={ Math.min(rowProps.indent || 0, 1) }
+            />
+        );
+    };
+
+    const handleChangeValueType = (newValueType: TThemeTokenValueType) => {
+        props.onChangeParams((prev) => {
+            return {
+                ...prev,
+                valueType: newValueType,
+            };
+        });
+    };
+
+    return (
+        <Panel background="surface-main" shadow>
+            <FlexRow
+                padding="12"
+                vPadding="24"
+                rawProps={ { style: { flexWrap: 'nowrap', gap: '3px', paddingBottom: 0 } } }
+            >
+                <ParamsFilters params={ props.params } onChangeParams={ props.onChangeParams } />
+                <FiltersPanel<TTokensLocalFilter>
+                    filters={ filtersConfig }
+                    tableState={ tableState }
+                    setTableState={ setTableState }
+                />
+                <TokensSummary
+                    uuiTheme={ uuiTheme }
+                    expectedValueType={ params.valueType }
+                    onChangeExpectedValueType={ handleChangeValueType }
+                />
+            </FlexRow>
+            <div>
+                <Blocker isEnabled={ loading } cx={ css.blocker } />
+                <ScrollBars style={ { height: `calc(100vh - ${TOP_INDENT})`, marginBottom: '0px' } }>
+                    <div>
+                        <div className={ css.stickyHeader }>
+                            <DataTableHeaderRow
+                                columns={ columns }
+                                allowColumnsResizing={ false }
+                                value={ { ...tableState, columnsConfig } }
+                                onValueChange={ setTableState }
+                            />
+                        </div>
+                        { tokensDsView.getVisibleRows().map(renderRow) }
+                    </div>
+                </ScrollBars>
+            </div>
+        </Panel>
+    );
+}
+
+function ParamsFilters(props: {
+    params: TLoadThemeTokensParams,
+    onChangeParams: (updater: ((prevParams: TLoadThemeTokensParams) => TLoadThemeTokensParams)) => void,
+}) {
+    const handleChangeFilterPath = (newPath: string) => {
+        props.onChangeParams((prev) => {
+            return {
+                ...prev,
+                filter: {
+                    ...prev.filter,
+                    path: newPath,
+                },
+            };
+        });
+    };
+    const handleChangeFilterPublished = (newPublished: 'yes' | 'no' | undefined) => {
+        props.onChangeParams((prev) => {
+            return {
+                ...prev,
+                filter: {
+                    ...prev.filter,
+                    published: newPublished,
+                },
+            };
+        });
+    };
+    const dataSource = useArrayDataSource(
+        {
+            items: [
+                {
+                    id: 'yes',
+                    label: 'Published',
+                },
+                {
+                    id: 'no',
+                    label: 'Not published',
+                },
+            ],
+        },
+        [],
+    );
+    return (
+        <>
+            <FlexCell style={ { width: '150px', flexBasis: 'auto' } }>
+                <SearchInput
+                    placeholder="Filter 'Path'"
+                    value={ props.params.filter.path }
+                    onValueChange={ handleChangeFilterPath }
+                />
+            </FlexCell>
+            <FlexCell style={ { width: '150px', flexBasis: 'auto' } }>
+                <PickerInput
+                    placeholder="Filter 'Published'"
+                    dataSource={ dataSource }
+                    value={ props.params.filter.published }
+                    onValueChange={ handleChangeFilterPublished }
+                    getName={ (item) => item.label }
+                    entityName="Published"
+                    selectionMode="single"
+                    valueType="id"
+                />
+            </FlexCell>
+        </>
+    );
+}
diff --git a/app/src/sandbox/tokens/palette/components/paletteTable/tokensSummary.tsx b/app/src/sandbox/tokens/palette/components/paletteTable/tokensSummary.tsx
index af09caaafe..67f4430159 100644
--- a/app/src/sandbox/tokens/palette/components/paletteTable/tokensSummary.tsx
+++ b/app/src/sandbox/tokens/palette/components/paletteTable/tokensSummary.tsx
@@ -19,7 +19,7 @@ export function TokensSummary(props: TokensSummaryProps) {
         [TThemeTokenValueType.direct]: 'Direct',
         [TThemeTokenValueType.chain]: 'Chain of aliases',
     };
-    const expectedValueDs = useArrayDataSource<{ id: TThemeTokenValueType, name: string }, string, never>(
+    const expectedValueDs = useArrayDataSource<{ id: TThemeTokenValueType, name: string }, string, any>(
         {
             items: Object.values(TThemeTokenValueType).map((id) => ({ id, name: MODE_LABELS[id] })),
         },
diff --git a/changelog.md b/changelog.md
index 4b789b0fb4..2ba07f3e51 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,41 @@
+# 5.x.x - xx.xx.2024
+
+**What's New**
+
+* [useTree]: useTree hook is added.
+  * [Features]:
+    * [BaseListViewProps.showSelectedOnly]: The flow of rendering selected rows was changed. Previously, there was a separate flow of rendering selected rows, with using the `IDataSourceView.getSelectedRows` method. Currently, a new property, `showSelectedOnly`, was added. If this feature is turned on, selected rows are returned from `IDataSourceView.getVisibleRows`.
+    * [Patch items in Lazy/Async/Array dataSources]: the possibility to add/move/delete items from Array/Async/Lazy DataSources was added. To provide this functionality, three options were added:
+      * [BaseListViewProps.patch]: To add/move/delete some item from the existing dataset, it is required to pass that item via the `patch` map.
+      * [BaseListViewProps.isDeleted]: To enable deleting of the items, it is required to specify getter of deleting state.
+      * [BaseListViewProps.fixItemBetweenSortings]: If enabled, positions of items between sorting changes are fixed.
+      * [BaseListViewProps.getNewItemPosition]: To specify the position an item to be moved, `getNewItemPosition` function may be provided. If not provided, new items will be placed at the top of the list. It can return a various of position configurations:
+        * `PatchOrdering.TOP` - moves an element to the top of the children list;
+        * `PatchOrdering.BOTTOM` - moves an element to the bottom of the children list;
+        * By default, all new elements are placed to the top of the children list;
+        * If `BaseListViewProps.getItemTemporaryOrder` returns some value for current item, that item is placed to the specific place and will not be included to the list of top/bottom children.
+      * [BaseListViewProps.getItemTemporaryOrder]: To provide specific position for the item, it should be returned from `BaseListViewProps.getItemTemporaryOrder` function. This order can be placed to the patched item and generated by using `getOrderBetween` of the previous item temporary order or index and next item temporary order or index.
+      * [BaseListViewProps.sortBy]: Items positions are frozen in the list while editing and reset on sorting change. To provide the correct sorting functionality for patched items (especially in LazyDataSources), it is required to provide access to the values of the fields, sorting is performed.
+    * [ItemsMap]: immutable map with support of complex Ids was added. It should be used as an input of `patch` property, described above.
+    * [useForm]: support of immutable/mutable maps was added.
+    * [DataTableProps]: `rows` prop was added, along with `getRows`.
+  * [Required actions]:
+    * [IDataSource.useView]: `onValueChange` type was changed. Currently, it should support a state update callback, instead of a new state value.
+    * [ITableState.setTableState]: `setTableState` should handle both, a new state value and a state update callback.
+  * [Breaking changes]:
+    * `IDataSource.getView` is deprecated. Use `IDataSource.useView` instead.
+    * `useList` is deprecated. Use `IDataSource.useView` instead.
+    * `ArrayListView` is deprecated. Use `ArrayDataSource.useView` instead.
+    * `AsyncListView` is deprecated. Use `AsyncDataSource.useView` instead.
+    * `LazyListView` is deprecated. Use `LazyDataSource.useView` instead.
+    * `IDataSource.unsubscribeView` is deprecated. This functionality is built in `IDataSourceView.useView` hook.
+    * `IDataSourceView.activate` is deprecated. This functionality is built in `IDataSourceView.useView` hook.
+    * `IDataSourceView.deactivate` is deprecated. This functionality is built in `IDataSourceView.useView` hook.
+    * `IDataSourceView.getSelectedRows` is deprecated. Pass `showSelectedOnly = true` to `IDataSourceView.useView` options and access selected rows via `IDataSourceView.getVisibleRows()`.
+    * `IDataSourceView.loadData` is deprecated.
+    * `IDataSourceView._forceUpdate` is deprecated.
+    * `LazyListViewProps.legacyLoadDataBehavior` is deprecated.
+
 # 5.7.1 - 29.03.2024
 
 **What's New**
@@ -61,7 +99,6 @@
 * [Badge]: small style tweaks according to the design
 
 # 5.6.2 - 15.03.2024
-
 **What's Fixed**
 * [PickerInput]: fixed toggler blur in case searchPosition = 'none' i18n
 * [ColumnsConfigurationModal]: small visual tweaks
diff --git a/extra/src/ideas/useList.tsx b/extra/src/ideas/useList.tsx
index 0aae2b5217..aa55e8b8d4 100644
--- a/extra/src/ideas/useList.tsx
+++ b/extra/src/ideas/useList.tsx
@@ -8,10 +8,10 @@ import {
     DataTableState,
     IDataSourceView,
     IEditable,
+    ITree,
     LazyDataSourceApi,
     LazyListViewProps,
     Metadata,
-    Tree,
     useForm,
     useTableState,
 } from '@epam/uui-core';
@@ -40,7 +40,7 @@ type UseListProps<TItem, TId, TFilter> =
     //
     // We also need to pass metadata and validationState along with the value. It seems like we are forced to use IEditable here.
     // Let's try to use IEditable directly:
-    (Partial<IEditable<TItem[]>> | Partial<IEditable<Tree<TItem, TId>>>);
+    (Partial<IEditable<TItem[]>> | Partial<IEditable<ITree<TItem, TId>>>);
 
 interface UseListApi<TItem, TId, TFilter = DataQueryFilter<TItem>>
     extends IDataSourceView<TItem, TId, TFilter>,
diff --git a/next-app/pages/arrayTable.tsx b/next-app/pages/arrayTable.tsx
index 731f20fa6a..7702e1ae04 100644
--- a/next-app/pages/arrayTable.tsx
+++ b/next-app/pages/arrayTable.tsx
@@ -86,7 +86,7 @@ const ArrayTable = () => {
                 <Panel shadow>
                     <DataTable
                         { ...view.getListProps() }
-                        getRows={ view.getVisibleRows }
+                        getRows={ view.getRows }
                         value={ value }
                         onValueChange={ onValueChange }
                         columns={ tableColumns }
diff --git a/public/docs/content/DragAndDrop-stateManagement.json b/public/docs/content/DragAndDrop-stateManagement.json
index a9be916bc6..9be0f8f769 100644
--- a/public/docs/content/DragAndDrop-stateManagement.json
+++ b/public/docs/content/DragAndDrop-stateManagement.json
@@ -1,348 +1,249 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "uui-richTextEditor-header-3",
+    "children": [
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-3",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "State management, GetOrderBetween helper",
-            "marks": []
-          }
-        ]
-      },
+        "text": "State management, GetOrderBetween helper"
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Note, that Drag-n-Drop in UUI doesn't manage the state itself. It only signals you that something is dragged into something. It's up to library user to define how to store its state and update it to react to user's actions.",
-            "marks": []
-          }
-        ]
-      },
+        "text": "Note, that Drag-n-Drop in UUI doesn't manage the state itself. It only signals you that something is dragged into something. It's up to library user to define how to store its state and update it to react to user's actions."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "In case of a basic reorderable list of items, you'd need to store items in a specific order, update this order, and save changes to a server via API.",
-            "marks": []
-          }
-        ]
-      },
+        "text": "In case of a basic re-orderable list of items, you'd need to store items in a specific order, update this order, and save changes to a server via API."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "The most straightforward way, is to store items in a plain array - in order they are placed. However, arrays of items are really hard to save to server - you need to always save the whole array (instead of a single item), and server-side code needs to read the entire array from DB to compare it to the new one before saving.",
-            "marks": []
-          }
-        ]
-      },
+        "text": "The most straightforward way, is to store items in a plain array - in order they are placed. However, arrays of items are really hard to save to server - you need to always save the whole array (instead of a single item), and server-side code needs to read the entire array from DB to compare it to the new one before saving."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "To overcome these issues, we recommend the following approach:",
-            "marks": []
-          }
-        ]
-      },
+        "text": "To overcome these issues, we recommend the following approach:"
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "unordered-list",
+    "children": [
       {
-        "object": "block",
-        "type": "unordered-list",
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "block",
-            "type": "list-item",
             "data": {},
-            "nodes": [
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "store items as you wish, in any order (in array, or Map<TId, TItem>, in useState, redux, or in any other way)",
-                    "marks": []
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "object": "block",
-            "type": "list-item",
-            "data": {},
-            "nodes": [
-              {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "each item should have an ",
-                    "marks": []
-                  },
-                  {
-                    "object": "text",
-                    "text": "order: string",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-code",
-                        "data": {}
-                      }
-                    ]
-                  },
-                  {
-                    "object": "text",
-                    "text": " field",
-                    "marks": []
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "object": "block",
-            "type": "list-item",
-            "data": {},
-            "nodes": [
-              {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "before rendering an items, sort them alphabetically, according to their 'order' field",
-                    "marks": []
-                  }
-                ]
+                "text": "store items as you wish, in any order (in array, or Map<TId, TItem>, in useState, redux, or in any other way)"
               }
             ]
           }
         ]
       },
       {
-        "object": "block",
-        "type": "paragraph",
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "text",
-            "text": "To insert/reorder items, UUI provides ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "getOrderBetween",
-            "marks": [
+            "data": {},
+            "type": "list-item-child",
+            "children": [
+              {
+                "text": "each item should have an "
+              },
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
+                "text": "order: string",
+                "uui-richTextEditor-code": true
+              },
+              {
+                "text": " field"
               }
             ]
-          },
-          {
-            "object": "text",
-            "text": " helper. This helper returns a string value, which is alphabetically between two strings e.g. :",
-            "marks": []
           }
         ]
       },
       {
-        "object": "block",
-        "type": "paragraph",
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "text",
-            "text": "getOrderBetween('a', 'c') == 'b'",
-            "marks": [
+            "data": {},
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
+                "text": "before rendering items, sort them alphabetically, according to their 'order' field"
               }
             ]
           }
         ]
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "To insert/reorder items, UUI provides "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "getOrderBetween('aa', 'ab') == 'abs'",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          }
-        ]
+        "text": "getOrderBetween",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "getOrderBetween('aa', 'abs') == 'abh'",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          }
-        ]
+        "text": " helper. This helper returns a string value, which is alphabetically between two strings, e.g. :"
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "getOrderBetween('a', 'c') == 'b'",
+        "uui-richTextEditor-code": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "getOrderBetween('aa', 'ab') == 'abs'",
+        "uui-richTextEditor-code": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "getOrderBetween('aa', 'abs') == 'abh'",
+        "uui-richTextEditor-code": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Then, to move or insert items, use the following:"
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "movedItem.order = getOrderBetween(prevItem.order, nextItem.order)",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Then, to move or insert items, use the following:",
-            "marks": []
-          }
-        ]
+        "text": ".  - to insert an item between the other two"
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "getOrderBetween(null, firstItem)",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "movedItem.order = getOrderBetween(prevItem.order, nextItem.order)",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ".  - to insert an item between the other two",
-            "marks": []
-          }
-        ]
+        "text": " - gets order for the first item"
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "getOrderBetween(lastItem, null)",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "getOrderBetween(null, firstItem)",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " - gets order for the first item",
-            "marks": []
-          }
-        ]
+        "text": " - get order for the last one."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Note that, for all actions, only a single item needs to be updated and saved to the server. "
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Also, this approach maps well to relational Databases at back-end - all you need is an 'order: varchar' column, just like any other column."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "If you have existing items in certain sequence, you can generate their initial orders with the "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "getOrderBetween(lastItem, null)",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " - get order for the last one.",
-            "marks": []
-          }
-        ]
+        "text": "indexToOrder",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Note that, for all actions, only a single item needs to be updated and saved the server. ",
-            "marks": []
-          }
-        ]
+        "text": " helper. You can then move or insert new items with "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Also, this approach maps well to relational Databases at backend - all you need is an 'order: varchar' column, just like any other column.",
-            "marks": []
-          }
-        ]
+        "text": "getOrderBetween",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Nevertheless, UUI doesn't force you to use getOrderBetween approach. You can store items in a plain array, or in any other way, if it's suits you.",
-            "marks": []
-          }
-        ]
+        "text": "."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Nevertheless, UUI doesn't force you to use getOrderBetween approach. You can store items in a plain array, or in any other way, if it's suits you."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-dataSources-DataSourceViewertsx.json b/public/docs/content/examples-dataSources-DataSourceViewertsx.json
index 0306483a08..878d42767a 100644
--- a/public/docs/content/examples-dataSources-DataSourceViewertsx.json
+++ b/public/docs/content/examples-dataSources-DataSourceViewertsx.json
@@ -124,7 +124,7 @@
                   },
                   {
                     "object": "text",
-                    "text": "getVisibleRows",
+                    "text": "getRows",
                     "marks": [
                       {
                         "object": "mark",
diff --git a/public/docs/content/examples-tables-StyledColumns.json b/public/docs/content/examples-tables-StyledColumns.json
index b058273a81..02ae07024b 100644
--- a/public/docs/content/examples-tables-StyledColumns.json
+++ b/public/docs/content/examples-tables-StyledColumns.json
@@ -1,240 +1,133 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
-      {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "UUI DataTable column use several properties to configure its width:  ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "width",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "(in pixels), ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "grow",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " (like in FlexBox, to configure how much column grows to occupy spare space), and ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "minWidth",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "(used only to limit the column width during resizing). ",
-            "marks": []
-          }
-        ]
-      },
-      {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "To align column content, you can use ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "textAlign",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ", ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "alignSelf",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " and ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "justifyContent",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " props. However, only ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "textAlign",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " property will affect header content, so use it instead of ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "justifyContent",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ", for simple cases when you need to align both ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "–",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "color": "rgb(32, 33, 36)",
-                    "font-family": null,
-                    "font-size": "14px",
-                    "font-style": null,
-                    "font-variant-ligatures": "normal",
-                    "font-variant-caps": "normal",
-                    "font-weight": "400",
-                    "letter-spacing": "normal",
-                    "orphans": "2",
-                    "text-align": "left",
-                    "text-indent": "0px",
-                    "text-transform": "none",
-                    "white-space": "normal",
-                    "widows": "2",
-                    "word-spacing": "0px",
-                    "-webkit-text-stroke-width": "0px",
-                    "background-color": null,
-                    "text-decoration-thickness": "initial",
-                    "text-decoration-style": "initial",
-                    "text-decoration-color": "initial",
-                    "display": "inline !important",
-                    "float": "none",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "color": "rgb(32, 33, 36)",
-                    "font-family": null,
-                    "font-size": "14px",
-                    "font-style": null,
-                    "font-variant-ligatures": "normal",
-                    "font-variant-caps": "normal",
-                    "font-weight": "400",
-                    "letter-spacing": "normal",
-                    "orphans": "2",
-                    "text-align": "left",
-                    "text-indent": "0px",
-                    "text-transform": "none",
-                    "white-space": "normal",
-                    "widows": "2",
-                    "word-spacing": "0px",
-                    "-webkit-text-stroke-width": "0px",
-                    "background-color": null,
-                    "text-decoration-thickness": "initial",
-                    "text-decoration-style": "initial",
-                    "text-decoration-color": "initial",
-                    "display": "inline !important",
-                    "float": "none",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "header and column content.",
-            "marks": []
-          }
-        ]
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "UUI DataTable column use several properties to configure its width:  "
+      },
+      {
+        "text": "width",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": "(in pixels), "
+      },
+      {
+        "text": "grow",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " (like in FlexBox, to configure how much column grows to occupy spare space), and "
+      },
+      {
+        "text": "minWidth",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": "(used only to limit the column width during resizing). "
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "To align column content, you can use "
+      },
+      {
+        "text": "textAlign",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": ", "
+      },
+      {
+        "text": "alignSelf",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " and "
+      },
+      {
+        "text": "justifyContent",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " props. However, only "
+      },
+      {
+        "text": "textAlign",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " property will affect header content, so use it instead of "
+      },
+      {
+        "text": "justifyContent",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": ", for simple cases when you need to align both "
+      },
+      {
+        "text": "–",
+        "color": "rgb(32, 33, 36)",
+        "font-family": null,
+        "font-size": "14px",
+        "font-style": null,
+        "font-variant-ligatures": "normal",
+        "font-variant-caps": "normal",
+        "font-weight": "400",
+        "letter-spacing": "normal",
+        "orphans": "2",
+        "text-align": "left",
+        "text-indent": "0px",
+        "text-transform": "none",
+        "white-space": "normal",
+        "widows": "2",
+        "word-spacing": "0px",
+        "-webkit-text-stroke-width": "0px",
+        "background-color": null,
+        "text-decoration-thickness": "initial",
+        "text-decoration-style": "initial",
+        "text-decoration-color": "initial",
+        "display": "inline !important",
+        "float": "none",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " ",
+        "color": "rgb(32, 33, 36)",
+        "font-family": null,
+        "font-size": "14px",
+        "font-style": null,
+        "font-variant-ligatures": "normal",
+        "font-variant-caps": "normal",
+        "font-weight": "400",
+        "letter-spacing": "normal",
+        "orphans": "2",
+        "text-align": "left",
+        "text-indent": "0px",
+        "text-transform": "none",
+        "white-space": "normal",
+        "widows": "2",
+        "word-spacing": "0px",
+        "-webkit-text-stroke-width": "0px",
+        "background-color": null,
+        "text-decoration-thickness": "initial",
+        "text-decoration-style": "initial",
+        "text-decoration-color": "initial",
+        "display": "inline !important",
+        "float": "none",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": "header and column content."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/docsGenOutput/docsGenOutput.d.ts b/public/docs/docsGenOutput/docsGenOutput.d.ts
index 78f2ecfa6b..3e76da5ebb 100644
--- a/public/docs/docsGenOutput/docsGenOutput.d.ts
+++ b/public/docs/docsGenOutput/docsGenOutput.d.ts
@@ -181,8 +181,8 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' |
 '@epam/uui-core:TableFiltersConfig' |
 '@epam/uui-core:TextInputCoreProps' |
 '@epam/uui-core:TooltipCoreProps' |
-'@epam/uui-core:TreeNodeInfo' |
-'@epam/uui-core:TreeParams' |
+'@epam/uui-core:ITreeNodeInfo' |
+'@epam/uui-core:ITreeParams' |
 '@epam/uui-core:UseFormProps' |
 '@epam/uui-core:UseTableStateHookParams' |
 '@epam/uui-core:UseUuiErrorOptions' |
diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
index ccbf105919..6053465c6b 100644
--- a/public/docs/docsGenOutput/docsGenOutput.json
+++ b/public/docs/docsGenOutput/docsGenOutput.json
@@ -14277,7 +14277,7 @@
       "    getConfig(): IDataSourceViewConfig;",
       "    getById(id: TId, index: number): DataRowProps<TItem, TId>;",
       "    getListProps(): DataSourceListProps;",
-      "    getVisibleRows(): DataRowProps<TItem, TId>[];",
+      "    getRows(): DataRowProps<TItem, TId>[];",
       "    getSelectedRows(range?: VirtualListRange): DataRowProps<TItem, TId>[];",
       "    getSelectedRowsCount(): number;",
       "    reload(): void;",
@@ -14333,8 +14333,8 @@
       "required": true
      },
      {
-      "uid": "getVisibleRows",
-      "name": "getVisibleRows",
+      "uid": "getRows",
+      "name": "getRows",
       "typeValue": {
        "raw": "() => DataRowProps<TItem, TId>[]"
       },
@@ -19951,9 +19951,9 @@
       "    getParents(id: TId): TItem[];",
       "    getPathById(id: TId): DataRowPathItem<TId, TItem>[];",
       "    getPathItem(item: TItem): DataRowPathItem<TId, TItem>;",
-      "    getNodeInfo(id: TId): TreeNodeInfo;",
+      "    getNodeInfo(id: TId): ITreeNodeInfo;",
       "    isFlatList(): boolean;",
-      "    patch(items: TItem[], isDeletedProp?: keyof TItem, comparator?: ItemsComparator<TItem>): ITree<TItem, TId>;",
+      "    patch(items: TItem[], isDeleted?: () => boolean, comparator?: ItemsComparator<TItem>): ITree<TItem, TId>;",
       "    mergeItems(tree: ITree<TItem, TId>): ITree<TItem, TId>;",
       "    cascadeSelection(currentSelection: TId[], selectedId: TId | undefined, isSelected: boolean, options?: {",
       "        isSelectable?: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;",
@@ -19962,7 +19962,7 @@
       "    load<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, value: Readonly<DataSourceState>, withNestedChildren?: boolean): Promise<ITree<TItem, TId>>;",
       "    loadMissing<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, value: Readonly<DataSourceState>): Promise<ITree<TItem, TId>>;",
       "    loadMissingIdsAndParents<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, idsToLoad: TId[]): Promise<ITree<TItem, TId>>;",
-      "    getTotalRecursiveCount(): number;",
+      "    getTotalCount(): number;",
       "    forEach(action: (item: TItem, id: TId, parentId: TId, stop: () => void) => void, options?: {",
       "        direction?: 'bottom-up' | 'top-down';",
       "        parentId?: TId;",
@@ -20102,7 +20102,7 @@
       "uid": "getNodeInfo",
       "name": "getNodeInfo",
       "typeValue": {
-       "raw": "(id: TId) => TreeNodeInfo"
+       "raw": "(id: TId) => ITreeNodeInfo"
       },
       "editor": {
        "type": "func"
@@ -20124,7 +20124,7 @@
       "uid": "patch",
       "name": "patch",
       "typeValue": {
-       "raw": "(items: TItem[], isDeletedProp?: keyof TItem | undefined, comparator?: ItemsComparator<TItem> | undefined) => ITree<TItem, TId>"
+       "raw": "(items: TItem[], isDeleted?: () => boolean, comparator?: ItemsComparator<TItem> | undefined) => ITree<TItem, TId>"
       },
       "editor": {
        "type": "func"
@@ -20187,8 +20187,8 @@
       "required": true
      },
      {
-      "uid": "getTotalRecursiveCount",
-      "name": "getTotalRecursiveCount",
+      "uid": "getTotalCount",
+      "name": "getTotalCount",
       "typeValue": {
        "raw": "() => number"
       },
@@ -21275,7 +21275,7 @@
       "comment": {
        "raw": [
         "This option is added for the purpose of supporting legacy behavior of fetching data",
-        " on `getVisibleRows` and `getListProps`, not to break users' own implementation of dataSources.",
+        " on `getRows` and `getListProps`, not to break users' own implementation of dataSources.",
         " @default true"
        ],
        "tags": {
@@ -21546,7 +21546,7 @@
       "    flattenSearchResults?: boolean;",
       "    /**",
       "     * This option is added for the purpose of supporting legacy behavior of fetching data",
-      "     * on `getVisibleRows` and `getListProps`, not to break users' own implementation of dataSources.",
+      "     * on `getRows` and `getListProps`, not to break users' own implementation of dataSources.",
       "     * @default true",
       "     */",
       "    legacyLoadDataBehavior?: boolean;",
@@ -21667,7 +21667,7 @@
       "comment": {
        "raw": [
         "This option is added for the purpose of supporting legacy behavior of fetching data",
-        " on `getVisibleRows` and `getListProps`, not to break users' own implementation of dataSources.",
+        " on `getRows` and `getListProps`, not to break users' own implementation of dataSources.",
         " @default true"
        ],
        "tags": {
@@ -27341,12 +27341,12 @@
     "propsFromUnion": false
    }
   },
-  "@epam/uui-core:TreeNodeInfo": {
+  "@epam/uui-core:ITreeNodeInfo": {
    "summary": {
     "module": "@epam/uui-core",
     "typeName": {
-     "name": "TreeNodeInfo",
-     "nameFull": "TreeNodeInfo"
+     "name": "ITreeNodeInfo",
+     "nameFull": "ITreeNodeInfo"
     },
     "src": "uui-core/src/data/processing/views/tree/ITree.ts",
     "exported": true
@@ -27354,9 +27354,9 @@
    "details": {
     "kind": 264,
     "typeValue": {
-     "raw": "TreeNodeInfo",
+     "raw": "ITreeNodeInfo",
      "print": [
-      "interface TreeNodeInfo {",
+      "interface ITreeNodeInfo {",
       "    count?: number;",
       "    totalCount?: number;",
       "}"
@@ -27389,12 +27389,12 @@
     "propsFromUnion": false
    }
   },
-  "@epam/uui-core:TreeParams": {
+  "@epam/uui-core:ITreeParams": {
    "summary": {
     "module": "@epam/uui-core",
     "typeName": {
-     "name": "TreeParams",
-     "nameFull": "TreeParams<TItem, TId>"
+     "name": "ITreeParams",
+     "nameFull": "ITreeParams<TItem, TId>"
     },
     "src": "uui-core/src/data/processing/views/tree/ITree.ts",
     "exported": true
@@ -27402,9 +27402,9 @@
    "details": {
     "kind": 264,
     "typeValue": {
-     "raw": "TreeParams<TItem, TId>",
+     "raw": "ITreeParams<TItem, TId>",
      "print": [
-      "interface TreeParams<TItem, TId> {",
+      "interface ITreeParams<TItem, TId> {",
       "    getId?(item: TItem): TId;",
       "    getParentId?(item: TItem): TId | undefined;",
       "    complexIds?: boolean;",
diff --git a/server/api/testDataApis.js b/server/api/testDataApis.js
index f3f16e0495..bd4ee033d1 100644
--- a/server/api/testDataApis.js
+++ b/server/api/testDataApis.js
@@ -206,4 +206,15 @@ router.post('/offices', async (req, res) => {
     res.json(result);
 });
 
+router.post('/todos', async (req, res) => {
+    const data = await helpers.getData('todos');
+    res.json(data);
+});
+
+router.post('/projectTasks', async (req, res) => {
+    const data = await helpers.getProjectTasks();
+    const result = filterAndSort(req.body, data.projectTasks, 'ProjectTasks');
+    res.json(result);
+});
+
 module.exports = router;
diff --git a/server/data/projectTasks.json b/server/data/projectTasks.json
new file mode 100644
index 0000000000..0effd4522b
--- /dev/null
+++ b/server/data/projectTasks.json
@@ -0,0 +1,57 @@
+[
+  {"id":1,"name":"Infrastructure", "childCount": 2},
+  {"id":101,"name":"Devops","parentId":1, "childCount": 5},
+  {"id":10101,"name":"GIT Repository init","parentId":101},
+  {"id":10102,"name":"CI - build code, publish artifacts","parentId":101},
+  {"id":10103,"name":"Test instances - Dev, QA, UAT","parentId":101},
+  {"id":10104,"name":"API connection & secrets management","parentId":101},
+  {"id":10105,"name":"Production instance","parentId":101},
+  {"id":102,"name":"Frontend","parentId":1, "childCount": 2},
+  {"id":10201,"name":"Init CRA project","parentId":102},
+  {"id":10202,"name":"Decide and document coding practices and processes","parentId":102},
+  {"id":2,"name":"Shared services", "childCount": 4},
+  {"id":201,"name":"Authentication","parentId":2},
+  {"id":202,"name":"Integration with API","parentId":2},
+  {"id":203,"name":"Routing","parentId":2},
+  {"id":204,"name":"Localization","parentId":2},
+  {"id":3,"name":"UUI Customization", "childCount": 4},
+  {"id":301,"name":"Color palette","parentId":3},
+  {"id":302,"name":"Core color tokens","parentId":3},
+  {"id":303,"name":"Components tuning","parentId":3},
+  {"id":304,"name":"Custom components modifiers","parentId":3},
+  {"id":4,"name":"Shared Components","childCount": 14},
+  {"id":401,"name":"Accordion (foldable panel/section)","parentId":4},
+  {"id":402,"name":"Alert","parentId":4},
+  {"id":403,"name":"Attribute/Value section","parentId":4},
+  {"id":404,"name":"Breadcrumbs","parentId":4},
+  {"id":405,"name":"Dashboard Cards Elements","parentId":4},
+  {"id":406,"name":"Forms headers/sub-headers","parentId":4},
+  {"id":407,"name":"Icons","parentId":4},
+  {"id":408,"name":"Masked input","parentId":4},
+  {"id":409,"name":"Master-detail screen","parentId":4},
+  {"id":410,"name":"Common Modal windows (e.g. confirmation)","parentId":4},
+  {"id":411,"name":"Stepper","parentId":4},
+  {"id":412,"name":"In-form Tables","parentId":4},
+  {"id":413,"name":"User card","parentId":4},
+  {"id":414,"name":"Top-level navigation","parentId":4},
+  {"id":5,"name":"Pages Template Components","childCount": 6},
+  {"id":501,"name":"Page layout components","parentId":5},
+  {"id":502,"name":"Master-detail","parentId":5},
+  {"id":503,"name":"Full-screen table","parentId":5},
+  {"id":504,"name":"Full-screen form","parentId":5},
+  {"id":505,"name":"Dashboard","parentId":5},
+  {"id":506,"name":"Catalog","parentId":5},
+  {"id":6,"name":"Pages","childCount": 7},
+  {"id":601,"name":"Home","parentId":6},
+  {"id":602,"name":"Catalog","parentId":6},
+  {"id":603,"name":"Product Details","parentId":6},
+  {"id":604,"name":"Favorites","parentId":6},
+  {"id":605,"name":"Comparison","parentId":6},
+  {"id":606,"name":"Check-out form","parentId":6},
+  {"id":607,"name":"Admin area","parentId":6, "childCount": 5},
+  {"id":60701,"name":"Products List","parentId":607},
+  {"id":60702,"name":"Product Form","parentId":607},
+  {"id":60703,"name":"Sales report","parentId":607},
+  {"id":60704,"name":"Marketing dashboard","parentId":607},
+  {"id":60705,"name":"Categories list editor","parentId":607}
+]
diff --git a/server/data/todos.json b/server/data/todos.json
new file mode 100644
index 0000000000..8f57db83a6
--- /dev/null
+++ b/server/data/todos.json
@@ -0,0 +1,34 @@
+[
+  {
+    "id": 0,
+    "isDone": false,
+    "name": "Complete data sources re-work",
+    "comments": "The plan is to unite all dataSources into a single \"useList\" hook"
+  },
+  {
+    "id": 1,
+    "isDone": true,
+    "name": "Implement editable cells"
+  },
+  {
+    "id": 2,
+    "name": "Find better ways to add/remove rows",
+    "dueDate": "01-09-2022",
+    "priority": 2
+  },
+  {
+    "id": 3,
+    "name": "Finalize the \"Project\" table demo",
+    "comments": "We first need to build the add/remove rows helpers, and rows drag-n-drop"
+  },
+  {
+    "id": 4,
+    "isDone": true,
+    "name": "Complete cells replication"
+  },
+  {
+    "id": 5,
+    "name": "Better rows drag-n-drop support",
+    "comments": "With state-management helpers, and tree/hierarchy support"
+  }
+]
\ No newline at end of file
diff --git a/server/helpers/generateTestData.js b/server/helpers/generateTestData.js
index 4db03fd392..7bd1c28f0d 100644
--- a/server/helpers/generateTestData.js
+++ b/server/helpers/generateTestData.js
@@ -1,4 +1,5 @@
 const { Chance } = require('chance'); // https://chancejs.com/
+const { getOrderBetween } = require('./getOrderBetween');
 const { getData } = require('./getData');
 
 const cache = {};
@@ -140,10 +141,21 @@ const getPersons = cached('persons', async () => {
     return result;
 });
 
+const getProjectTasks = cached('projectTasks', async () => {
+    const projectTasks = await getData('projectTasks');
+    projectTasks.forEach((t, index) => {
+        const prevTask = projectTasks[index - 1];
+        t.parentId = t.parentId === undefined || t.parentId === null ? null : t.parentId;
+        t.order = getOrderBetween(prevTask?.order, null);
+    });
+    return { projectTasks };
+});
+
 module.exports = {
     getCities,
     getLocationTree,
     getPersons,
+    getProjectTasks,
 };
 
 const profileStatuses = [
diff --git a/server/helpers/getOrderBetween.js b/server/helpers/getOrderBetween.js
new file mode 100644
index 0000000000..6357e5a531
--- /dev/null
+++ b/server/helpers/getOrderBetween.js
@@ -0,0 +1,46 @@
+const { trimEnd } = require('lodash');
+
+function getOrderBetween(inputA, inputB) {
+    // => uui utils
+    const radix = 36;
+    const aValue = inputA == null ? '0' : inputA;
+    const a = trimEnd(aValue, '0');
+    const b = trimEnd(inputB || 'z', '0');
+
+    const throwError = () => {
+        throw new Error(`getOrderBetween: can't find values between ${inputA} and ${inputB}`);
+    };
+
+    if (a >= b) {
+        throwError();
+    }
+
+    let result = '';
+    let n = 0;
+
+    while (true) {
+        const aChar = a[n];
+        const bChar = b[n];
+        let defaultAChar = 'a';
+        if (inputA == null || bChar == null || bChar < 'a') {
+            defaultAChar = '0';
+        }
+        const aDigit = parseInt(aChar || defaultAChar, radix);
+        const bDigit = parseInt(bChar || 'z', radix);
+
+        const midDigit = Math.floor((aDigit + bDigit) / 2);
+        result += midDigit.toString(radix);
+
+        if (aDigit !== midDigit) {
+            break;
+        }
+
+        n++;
+    }
+
+    return result;
+}
+
+module.exports = {
+    getOrderBetween,
+};
diff --git a/test-utils/index.ts b/test-utils/index.ts
index 2ee25cab91..c9c1747b98 100644
--- a/test-utils/index.ts
+++ b/test-utils/index.ts
@@ -9,6 +9,10 @@ export const setupJsDom = setupJsDomAll.setupJsDom as (global?: any, params?: {
 export * from './src/extensions/testingLibraryReactExt';
 // Utility function to mock adaptive panel items width
 export { mockAdaptivePanelLayout } from './src/mocks/adaptivePanelMockUtils';
+
+// Utility function to create mocked dataSources
+export * from './src/mocks/dataSources';
+
 // mocks
 export { mockReactPortalsForSnapshots } from './src/mocks/reactPortalsMockUtils';
 export { SvgMock } from './src/mocks/svgrMock';
diff --git a/test-utils/src/mocks/dataSources/asyncDataSourceMock.ts b/test-utils/src/mocks/dataSources/asyncDataSourceMock.ts
new file mode 100644
index 0000000000..25427bc2f1
--- /dev/null
+++ b/test-utils/src/mocks/dataSources/asyncDataSourceMock.ts
@@ -0,0 +1,9 @@
+import { AsyncDataSource, AsyncDataSourceProps } from '@epam/uui-core';
+
+type Props<TItem, TId, TFilter> = Omit<AsyncDataSourceProps<TItem, TId, TFilter>, 'api'>;
+
+export function getAsyncDataSourceMock<TItem extends { id: string }, TId, TFilter>(data: TItem[], props: Props<TItem, TId, TFilter>) {
+    const api = () => Promise.resolve(data);
+    const apiMock = jest.fn().mockImplementation(api);
+    return { dataSource: new AsyncDataSource({ ...props, api: apiMock }), apiMock };
+}
diff --git a/test-utils/src/mocks/dataSources/index.ts b/test-utils/src/mocks/dataSources/index.ts
new file mode 100644
index 0000000000..d512655393
--- /dev/null
+++ b/test-utils/src/mocks/dataSources/index.ts
@@ -0,0 +1,2 @@
+export * from './asyncDataSourceMock';
+export * from './lazyDataSourceMock';
diff --git a/test-utils/src/mocks/dataSources/lazyDataSourceMock.ts b/test-utils/src/mocks/dataSources/lazyDataSourceMock.ts
new file mode 100644
index 0000000000..112748680f
--- /dev/null
+++ b/test-utils/src/mocks/dataSources/lazyDataSourceMock.ts
@@ -0,0 +1,44 @@
+import { DataQueryFilter, LazyDataSource, LazyDataSourceApi, LazyDataSourceProps, runDataQuery } from '@epam/uui-core';
+import { delay } from '../../rendering/timerUtils';
+
+type Props<TItem, TId, TFilter> = Omit<LazyDataSourceProps<TItem, TId, TFilter>, 'api'> & {
+    api?: LazyDataSourceProps<TItem, TId, TFilter>['api'];
+};
+
+export const getApiMock = <TItem extends { id: string }, TId, TFilter>(
+    data: TItem[],
+    api?: LazyDataSourceApi<TItem, TId, TFilter> | undefined,
+    delayTime: number = undefined,
+) => {
+    const currentApi: LazyDataSourceApi<TItem, TId, TFilter> = api === undefined
+        ? (request, ctx) => {
+            let query;
+            if (ctx?.parent) {
+                query = { ...request, filter: { parentId: ctx.parentId, ...request?.filter } as DataQueryFilter<TItem> };
+            } else {
+                if (request.search) {
+                    query = request;
+                } else {
+                    query = { ...request, filter: { parentId: { isNull: true }, ...request?.filter } as DataQueryFilter<TItem> };
+                }
+            }
+            return Promise.resolve(runDataQuery(data, query));
+        }
+        : api;
+
+    const apiMock = jest.fn().mockImplementation(
+        delayTime === undefined
+            ? currentApi
+            : async (request, ctx) => {
+                await delay(delayTime);
+                return await currentApi(request, ctx);
+            },
+    );
+
+    return apiMock;
+};
+
+export function getLazyDataSourceMock<TItem extends { id: string }, TId, TFilter>(data: TItem[], props: Props<TItem, TId, TFilter>, delayTime?: number) {
+    const apiMock = getApiMock(data, props.api, delayTime);
+    return { dataSource: new LazyDataSource({ ...props, api: apiMock }), apiMock };
+}
diff --git a/test-utils/src/testObjects/Picker.ts b/test-utils/src/testObjects/Picker.ts
index e61c851506..69d5cfc6de 100644
--- a/test-utils/src/testObjects/Picker.ts
+++ b/test-utils/src/testObjects/Picker.ts
@@ -1,4 +1,4 @@
-import { fireEvent, within, screen, waitFor } from '../extensions/testingLibraryReactExt';
+import { fireEvent, within, screen, waitFor, waitForElementToBeRemoved } from '../extensions/testingLibraryReactExt';
 
 export interface OptionConfig {
     editMode?: string;
@@ -119,4 +119,13 @@ export class PickerTestObject {
             () => expect(this.getOptions({ editMode, busy: false }).length).toBeGreaterThan(0),
         );
     }
+
+    static querySpinner(props: { editMode?: string } = {}) {
+        const dialog = within(this.getDialog(props.editMode));
+        return dialog.queryByLabelText('Loading');
+    }
+
+    public static async waitForSpinnerToHide(editMode?: string) {
+        return await waitForElementToBeRemoved(this.querySpinner({ editMode }));
+    }
 }
diff --git a/tsconfig.json b/tsconfig.json
index c53392ac48..dafe227b6e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,8 @@
     },
     "baseUrl": ".",
     "isolatedModules": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "stripInternal": true
   },
   "exclude": [
     "node_modules",
diff --git a/uui-build/config/bundleSizeBaseLine.json b/uui-build/config/bundleSizeBaseLine.json
index db00c08c8a..841fff41e9 100644
--- a/uui-build/config/bundleSizeBaseLine.json
+++ b/uui-build/config/bundleSizeBaseLine.json
@@ -1,6 +1,6 @@
 {
   "version": "5.6.1",
-  "timestamp": "2024-03-05",
+  "timestamp": "2024-03-11",
   "sizes": {
     "templateApp": {
       "css": 283944,
@@ -36,15 +36,15 @@
     },
     "@epam/uui-core": {
       "css": 0,
-      "js": 280218
+      "js": 318874
     },
     "@epam/uui-db": {
       "css": 0,
       "js": 43327
     },
     "@epam/uui-docs": {
-      "css": 3612,
-      "js": 175560
+      "css": 3096,
+      "js": 194058
     },
     "@epam/uui-editor": {
       "css": 12940,
diff --git a/uui-components/src/layout/Blocker.tsx b/uui-components/src/layout/Blocker.tsx
index 2dae75f0c0..922a1c9e52 100644
--- a/uui-components/src/layout/Blocker.tsx
+++ b/uui-components/src/layout/Blocker.tsx
@@ -43,7 +43,7 @@ export const Blocker = forwardRef<HTMLDivElement, BlockerProps>((props, ref) =>
             <TransitionGroup>
                 {isEnter && (
                     <CSSTransition in={ isEnter } nodeRef={ transitionRef } classNames={ uuiBlocker } timeout={ { enter: 2000, exit: 1000 } }>
-                        <div ref={ transitionRef } className={ uuiBlocker.blocker }>
+                        <div ref={ transitionRef } className={ uuiBlocker.blocker } role="alert" aria-label="Loading">
                             {!props.hideSpinner && props.renderSpinner && props.renderSpinner(props)}
                         </div>
                     </CSSTransition>
diff --git a/uui-components/src/layout/Tree.tsx b/uui-components/src/layout/Tree.tsx
index f56b1b0828..8935f47dff 100644
--- a/uui-components/src/layout/Tree.tsx
+++ b/uui-components/src/layout/Tree.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IHasCX, IHasChildren, IEditable, useArrayDataSource, DataSourceState, DataRowProps } from '@epam/uui-core';
+import { IHasCX, IHasChildren, useArrayDataSource, DataSourceState, DataRowProps, SetDataSourceState } from '@epam/uui-core';
 
 export interface TreeListItem {
     id: string;
@@ -8,11 +8,21 @@ export interface TreeListItem {
     name?: string;
 }
 
-export interface TreeProps<TItem extends TreeListItem> extends IHasCX, IHasChildren, IEditable<DataSourceState> {
+export interface TreeProps<TItem extends TreeListItem> extends IHasCX, IHasChildren {
     items: TreeListItem[];
     renderRow(row: DataRowProps<TItem, string>): void;
     getSearchFields?(item: TItem): string[];
     search?: string;
+
+    /**
+     * DataSource state.
+     */
+    value: DataSourceState<any, TItem['id']>;
+    
+    /**
+     * DataSource state update handler.
+     */
+    onValueChange: SetDataSourceState<any, TItem['id']>;
 }
 
 export function Tree<TItem extends TreeListItem>(props: TreeProps<TItem>) {
diff --git a/uui-components/src/pickers/KeyboardUtils.tsx b/uui-components/src/pickers/KeyboardUtils.tsx
index ac47805e16..20bb981529 100644
--- a/uui-components/src/pickers/KeyboardUtils.tsx
+++ b/uui-components/src/pickers/KeyboardUtils.tsx
@@ -16,10 +16,9 @@ export const handleDataSourceKeyboard = (params: DataSourceKeyboardParams, e: Re
 
     switch (e.key) {
         case 'Backspace': {
-            const selectedRowsCount = params.listView.getSelectedRowsCount();
-            const selectedRows = params.listView.getSelectedRows({ topIndex: selectedRowsCount - 1, visibleCount: 1 });
-            if (params.searchPosition === 'input' && !value.search && value.checked && selectedRows.length > 0) {
-                const lastSelection = selectedRows[selectedRows.length - 1];
+            if (params.searchPosition === 'input' && !value.search && value.checked && value.checked.length > 0) {
+                const lastSelectionId = value.checked[value.checked.length - 1];
+                const lastSelection = params.listView.getById(lastSelectionId, null);
                 lastSelection.onCheck(lastSelection);
             }
             break;
diff --git a/uui-components/src/pickers/bindingHelpers.ts b/uui-components/src/pickers/bindingHelpers.ts
index f46133d36e..ae3b379d41 100644
--- a/uui-components/src/pickers/bindingHelpers.ts
+++ b/uui-components/src/pickers/bindingHelpers.ts
@@ -24,6 +24,7 @@ interface PickerBindingHelper<TItem, TId> {
 }
 
 class ArrayBindingHelper<TItem, TId> implements PickerBindingHelper<TItem, TId> {
+    emptyValueArray: any[] = [];
     dataSourceStateToValue(dsState: DataSourceState<any, TId>, props: PickerBaseProps<TId, TItem>, dataSource: IDataSource<TItem, TId, any>) {
         if (props.valueType === 'entity') {
             return dsState.checked?.map((id) => dataSource && dataSource.getById(id));
@@ -37,7 +38,7 @@ class ArrayBindingHelper<TItem, TId> implements PickerBindingHelper<TItem, TId>
         props: PickerBaseProps<TId, TItem>,
         dataSource: IDataSource<TItem, TId, any>,
     ): DataSourceState<any, TId> {
-        let checked = value;
+        let checked = (Array.isArray(value) && value) || this.emptyValueArray;
         if (props.valueType === 'entity') {
             checked = value?.map((entity: any) => {
                 dataSource && dataSource.setItem(entity);
diff --git a/uui-components/src/pickers/hooks/usePicker.ts b/uui-components/src/pickers/hooks/usePicker.ts
index 1d8cbbcf27..3098cb91bf 100644
--- a/uui-components/src/pickers/hooks/usePicker.ts
+++ b/uui-components/src/pickers/hooks/usePicker.ts
@@ -25,19 +25,27 @@ export function usePicker<TItem, TId, TProps extends PickerBaseProps<TItem, TId>
         isFoldedByDefault,
         sortBy,
         cascadeSelection,
+        showSelectedOnly,
     } = props;
 
-    const handleDataSourceValueChange = (newDataSourceState: DataSourceState) => {
-        if (showSelected && (!newDataSourceState.checked?.length || newDataSourceState.search)) {
+    const handleDataSourceValueChange = (newDataSourceState: React.SetStateAction<DataSourceState<any, TId>>) => {
+        let dsState: DataSourceState;
+        if (typeof newDataSourceState === 'function') {
+            dsState = newDataSourceState(dataSourceState);
+        } else {
+            dsState = newDataSourceState;
+        }
+
+        if (showSelected && (!dsState.checked?.length || dsState.search)) {
             setShowSelected(false);
         }
 
-        if (newDataSourceState.search !== dataSourceState.search) {
-            newDataSourceState.focusedIndex = 0;
+        if (dsState.search !== dataSourceState.search) {
+            dsState.focusedIndex = 0;
         }
 
-        setDataSourceState(newDataSourceState);
-        const newValue = dataSourceStateToValue(props, newDataSourceState, dataSource);
+        setDataSourceState(dsState);
+        const newValue = dataSourceStateToValue(props, dsState, dataSource);
 
         if (!isEqual(value, newValue)) {
             handleSelectionValueChange(newValue);
@@ -106,7 +114,7 @@ export function usePicker<TItem, TId, TProps extends PickerBaseProps<TItem, TId>
 
         handleDataSourceValueChange({
             ...dataSourceState,
-            selectedId: emptyValue,
+            selectedId: emptyValue as undefined,
         });
     };
 
@@ -126,15 +134,9 @@ export function usePicker<TItem, TId, TProps extends PickerBaseProps<TItem, TId>
         ...(cascadeSelection ? { cascadeSelection } : {}),
         ...(props.getRowOptions ? { getRowOptions: props.getRowOptions } : {}),
         backgroundReload: true,
+        showSelectedOnly,
     }, [dataSource]);
 
-    const getSelectedRows = (visibleCount?: number) => {
-        if (hasSelection()) {
-            return view.getSelectedRows({ visibleCount });
-        }
-        return [];
-    };
-
     const getListProps = (): DataSourceListProps => {
         const listProps = view.getListProps();
         if (showSelected) {
@@ -166,6 +168,19 @@ export function usePicker<TItem, TId, TProps extends PickerBaseProps<TItem, TId>
         selectionMode,
     });
 
+    const getSelectedRows = (itemsToTake: number) => {
+        const dsState = getDataSourceState();
+        let checked = [];
+        if (props.selectionMode === 'single') {
+            checked = dsState.selectedId !== null && dsState.selectedId !== undefined ? [dsState.selectedId] : [];
+        } else {
+            checked = dsState.checked ?? [];
+        }
+        return checked
+            .slice(0, itemsToTake)
+            .map((id, index) => view.getById(id, index));
+    };
+
     return {
         context,
         dataSourceState,
@@ -174,11 +189,11 @@ export function usePicker<TItem, TId, TProps extends PickerBaseProps<TItem, TId>
         getEntityName,
         isSingleSelect,
         getSelectedIdsArray,
+        getSelectedRows,
         getDataSourceState,
         getRowOptions,
         clearSelection,
         hasSelection,
-        getSelectedRows,
         view,
         getListProps,
         getFooterProps,
diff --git a/uui-components/src/pickers/hooks/usePickerInput.ts b/uui-components/src/pickers/hooks/usePickerInput.ts
index 3c8baaa204..d8eeaa2464 100644
--- a/uui-components/src/pickers/hooks/usePickerInput.ts
+++ b/uui-components/src/pickers/hooks/usePickerInput.ts
@@ -26,12 +26,30 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
     const pickerInputState = usePickerInputState({
         dataSourceState: { visibleCount: initialRowsVisible },
     });
+
     const {
         opened, setOpened, isSearchChanged, setIsSearchChanged,
-        dataSourceState, setDataSourceState, showSelected, setShowSelected,
+        dataSourceState, setDataSourceState, setShowSelected,
     } = pickerInputState;
 
-    const picker = usePicker<TItem, TId, UsePickerInputProps<TItem, TId, TProps>>(props, pickerInputState);
+    const defaultShouldShowBody = () => {
+        const searchPosition = props.searchPosition || 'input';
+        const isOpened = opened && !props.isDisabled;
+
+        if (props.minCharsToSearch && props.editMode !== 'modal' && searchPosition === 'input') {
+            const isEnoughSearchLength = dataSourceState.search
+                ? dataSourceState.search.length >= props.minCharsToSearch
+                : false;
+            return isEnoughSearchLength && isOpened;
+        }
+        return isOpened;
+    };
+
+    const shouldShowBody = () => (props.shouldShowBody ?? defaultShouldShowBody)();
+
+    const showSelectedOnly = !shouldShowBody() || pickerInputState.showSelected;
+
+    const picker = usePicker<TItem, TId, UsePickerInputProps<TItem, TId, TProps>>({ ...props, showSelectedOnly }, pickerInputState);
     const {
         context,
         view,
@@ -42,8 +60,8 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
         isSingleSelect,
         getListProps,
         getName,
-        getSelectedRows,
         handleSelectionValueChange,
+        getSelectedRows,
     } = picker;
 
     const lens = useMemo(
@@ -126,21 +144,6 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
         clearSelection();
     };
 
-    const defaultShouldShowBody = () => {
-        const searchPosition = props.searchPosition || 'input';
-        const isOpened = opened && !props.isDisabled;
-
-        if (props.minCharsToSearch && props.editMode !== 'modal' && searchPosition === 'input') {
-            const isEnoughSearchLength = dataSourceState.search
-                ? dataSourceState.search.length >= props.minCharsToSearch
-                : false;
-            return isEnoughSearchLength && isOpened;
-        }
-        return isOpened;
-    };
-
-    const shouldShowBody = () => (props.shouldShowBody ?? defaultShouldShowBody)();
-
     const handlePickerInputKeyboard = (
         rows: DataRowProps<TItem, TId>[],
         e: React.KeyboardEvent<HTMLElement>,
@@ -222,14 +225,7 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
     const getRows = () => {
         if (!shouldShowBody()) return [];
 
-        let preparedRows: DataRowProps<TItem, TId>[];
-
-        if (!showSelected) {
-            preparedRows = view.getVisibleRows();
-        } else {
-            const { topIndex, visibleCount } = dataSourceState;
-            preparedRows = view.getSelectedRows({ topIndex, visibleCount });
-        }
+        const preparedRows = view.getVisibleRows();
 
         return preparedRows.map((rowProps) => {
             const newRowProps = { ...rowProps };
@@ -268,11 +264,15 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
         return dataSourceState.search;
     };
 
-    const getTogglerProps = (): PickerTogglerProps<TItem, TId> => {
+    const selectedRows = useMemo(() => {
         const selectedRowsCount = view.getSelectedRowsCount();
         const allowedMaxItems = getMaxItems(props.maxItems);
         const itemsToTake = selectedRowsCount > allowedMaxItems ? allowedMaxItems : selectedRowsCount;
-        const selectedRows = getSelectedRows(itemsToTake);
+        return getSelectedRows(itemsToTake);
+    }, [view, dataSourceState.checked, props.maxItems]);
+
+    const getTogglerProps = (): PickerTogglerProps<TItem, TId> => {
+        const selectedRowsCount = view.getSelectedRowsCount();
         const {
             isDisabled,
             autoFocus,
diff --git a/uui-components/src/pickers/hooks/usePickerList.ts b/uui-components/src/pickers/hooks/usePickerList.ts
index 3d16b1397b..ae555c0b05 100644
--- a/uui-components/src/pickers/hooks/usePickerList.ts
+++ b/uui-components/src/pickers/hooks/usePickerList.ts
@@ -70,7 +70,9 @@ export function usePickerList<TItem, TId, TProps>(props: UsePickerListProps<TIte
     });
 
     const { dataSourceState, visibleIds } = pickerListState;
-    const picker = usePicker<TItem, TId, UsePickerListProps<TItem, TId, TProps>>(props, pickerListState);
+
+    const pickerProps = { ...props, showSelectedOnly: pickerListState.showSelected };
+    const picker = usePicker<TItem, TId, UsePickerListProps<TItem, TId, TProps>>(pickerProps, pickerListState);
     const {
         view,
         getEntityName,
@@ -78,8 +80,22 @@ export function usePickerList<TItem, TId, TProps>(props: UsePickerListProps<TIte
         getDataSourceState,
         isSingleSelect,
         getName,
+        getSelectedRows,
+        handleDataSourceValueChange,
+        getRowOptions,
     } = picker;
 
+    const onlySelectedView = props.dataSource.useView(getDataSourceState(), handleDataSourceValueChange, {
+        rowOptions: getRowOptions(),
+        getSearchFields: props.getSearchFields || ((item: TItem) => [getName(item)]),
+        ...(props.isFoldedByDefault ? { isFoldedByDefault: props.isFoldedByDefault } : {}),
+        ...(props.sortBy ? { sortBy: props.sortBy } : {}),
+        ...(props.cascadeSelection ? { cascadeSelection: props.cascadeSelection } : {}),
+        ...(props.getRowOptions ? { getRowOptions: props.getRowOptions } : {}),
+        backgroundReload: true,
+        showSelectedOnly: true,
+    }, [props.dataSource]);
+
     const getEntityNameForToggler = () => props.entityPluralName || getPluralName();
 
     const getModalTogglerCaption = (totalCount: number, rowsCount: number) => {
@@ -149,16 +165,14 @@ export function usePickerList<TItem, TId, TProps>(props: UsePickerListProps<TIte
                 }
             }
         };
-
-        addRows(view.getSelectedRows(), getMaxTotalItems());
-
+        addRows(getSelectedRows(maxTotalItems), maxTotalItems);
         if (visibleIds && result.length < maxTotalItems) {
             const rows = visibleIds.map((id, n) => view.getById(id, n));
             addRows(rows, maxTotalItems);
         }
+
         if (!props.defaultIds && result.length < maxDefaultItems) {
             const rows = view.getVisibleRows();
-
             addRows(rows, maxDefaultItems);
         }
         return sortRows(result);
@@ -172,6 +186,7 @@ export function usePickerList<TItem, TId, TProps>(props: UsePickerListProps<TIte
         appendLastSelected,
         getSelectedIdsArray,
         view,
+        onlySelectedView,
         buildRowsList,
         getMaxDefaultItems,
         getModalTogglerCaption,
diff --git a/uui-components/src/pickers/hooks/usePickerModal.ts b/uui-components/src/pickers/hooks/usePickerModal.ts
index 6d9e64c4a6..4e8e9ba9ec 100644
--- a/uui-components/src/pickers/hooks/usePickerModal.ts
+++ b/uui-components/src/pickers/hooks/usePickerModal.ts
@@ -36,6 +36,7 @@ export function usePickerModal<TItem, TId>(props: UsePickerModalProps<TItem, TId
 
     const pickerProps: PickerProps<TItem, TId> = {
         ...props,
+        showSelectedOnly: pickerListState.showSelected,
         value: selection,
         onValueChange: setSelection,
     } as PickerProps<TItem, TId>;
@@ -70,10 +71,7 @@ export function usePickerModal<TItem, TId>(props: UsePickerModalProps<TItem, TId
         }
     }, [props.initialValue]);
 
-    const getRows = () => {
-        const { topIndex, visibleCount } = dataSourceState;
-        return showSelected ? view.getSelectedRows({ topIndex, visibleCount }) : view.getVisibleRows();
-    };
+    const getRows = () => view.getVisibleRows();
 
     const getFooterProps = (): PickerFooterProps<TItem, TId> & Partial<IModal<any>> => {
         const footerProps = picker.getFooterProps();
diff --git a/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationActions.test.ts b/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationActions.test.ts
index 5647f68e3d..8315ba76c4 100644
--- a/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationActions.test.ts
+++ b/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationActions.test.ts
@@ -66,7 +66,7 @@ describe('columnsConfigurationActions', () => {
             const { prevConfig, columnsSorted, A } = getTestDataSet1();
             const result = toggleSingleColumnVisibility({ columnKey: A.key, prevConfig, columnsSorted });
             const expected = {
-                1: { isVisible: false, order: 'bh', width: 10 },
+                1: { isVisible: false, order: 'bm', width: 10 },
                 2: { isVisible: true, order: 'b', width: 10 },
                 3: { isVisible: false, order: 'c', width: 10 },
                 4: { fix: 'right', isVisible: true, order: 'd', width: 10 },
@@ -81,7 +81,7 @@ describe('columnsConfigurationActions', () => {
                     fix: 'left', isVisible: true, order: 'a', width: 10,
                 },
                 2: { isVisible: true, order: 'b', width: 10 },
-                3: { isVisible: true, order: 'bh', width: 10 },
+                3: { isVisible: true, order: 'bm', width: 10 },
                 4: { fix: 'right', isVisible: true, order: 'd', width: 10 },
             };
             expect(result).toEqual(expected);
@@ -97,7 +97,7 @@ describe('columnsConfigurationActions', () => {
                     fix: 'left', isVisible: true, order: 'a', width: 10,
                 },
                 2: {
-                    fix: 'left', isVisible: true, order: 'ah', width: 10,
+                    fix: 'left', isVisible: true, order: 'am', width: 10,
                 },
                 3: { isVisible: false, order: 'c', width: 10 },
                 4: { fix: 'right', isVisible: true, order: 'd', width: 10 },
@@ -113,7 +113,7 @@ describe('columnsConfigurationActions', () => {
                     fix: 'left', isVisible: true, order: 'a', width: 10,
                 },
                 2: {
-                    fix: 'right', isVisible: true, order: 'bh', width: 10,
+                    fix: 'right', isVisible: true, order: 'bm', width: 10,
                 },
                 3: { isVisible: false, order: 'c', width: 10 },
                 4: { fix: 'right', isVisible: true, order: 'd', width: 10 },
@@ -125,7 +125,7 @@ describe('columnsConfigurationActions', () => {
             const { prevConfig, columnsSorted, A } = getTestDataSet1();
             const result = toggleSingleColumnPin({ columnKey: A.key, prevConfig, columnsSorted, fix: undefined });
             const expected = {
-                1: { isVisible: true, order: 'ah', width: 10 },
+                1: { isVisible: true, order: 'am', width: 10 },
                 2: { isVisible: true, order: 'b', width: 10 },
                 3: { isVisible: false, order: 'c', width: 10 },
                 4: { fix: 'right', isVisible: true, order: 'd', width: 10 },
@@ -139,7 +139,7 @@ describe('columnsConfigurationActions', () => {
             const expected = {
                 1: { fix: 'left', isVisible: true, order: 'a', width: 10 },
                 2: { isVisible: true, order: 'b', width: 10 },
-                3: { fix: 'left', isVisible: true, order: 'ah', width: 10 },
+                3: { fix: 'left', isVisible: true, order: 'am', width: 10 },
                 4: { fix: 'right', isVisible: true, order: 'd', width: 10 },
             };
             expect(result).toEqual(expected);
diff --git a/uui-core/src/data/forms/shouldCreateUndoCheckpoint.ts b/uui-core/src/data/forms/shouldCreateUndoCheckpoint.ts
index dfae69e586..ad8978ae6b 100644
--- a/uui-core/src/data/forms/shouldCreateUndoCheckpoint.ts
+++ b/uui-core/src/data/forms/shouldCreateUndoCheckpoint.ts
@@ -1,3 +1,40 @@
+import { IMap } from '../../types';
+
+type FieldValue = Object | Array<any> | IMap<string, any>;
+
+const getKeys = (a: FieldValue, b: FieldValue, c: FieldValue) => {
+    if (Array.isArray(a) && Array.isArray(b) && Array.isArray(c)) {
+        return Object.keys({ ...a, ...b, ...c });
+    }
+
+    return Array.from(new Set([...getObjectOrMapKeys(a), ...getObjectOrMapKeys(b), ...getObjectOrMapKeys(c)]));
+};
+
+const getObjectOrMapKeys = (a: Object | IMap<string, any> | any) => {
+    if (typeof a !== 'object') {
+        return [];
+    }
+
+    if (!Array.isArray(a) && Symbol.iterator in a && typeof a[Symbol.iterator] === 'function') {
+        const keys = [];
+        for (const [key] of a) {
+            keys.push(key);
+        }
+
+        return keys;
+    }
+
+    return Object.keys(a);
+};
+
+const getValue = (a: FieldValue, key: keyof Object) => {
+    if (('get' in a && typeof a.get === 'function')) {
+        return a.get(key);
+    }
+
+    return a[key];
+};
+
 /**
  * Determines if useForm should create a new undo checkpoint.
  * c is the new change, a and b are previous checkpoints.
@@ -15,7 +52,7 @@ export function shouldCreateUndoCheckpoint(a: any, b: any, c: any): boolean {
     }
 
     // The field is an object of array - need to recurse thru it
-    if (typeof c === 'object') {
+    if (typeof c === 'object' && typeof b === 'object' && typeof c === 'object') {
         // Ignore that a, b, or c might be an empty array or object and has different structure.
         // If it's type changed, we already exited with 'true' on the first step
         // If some there's a difference between keys, values, array length
@@ -23,8 +60,8 @@ export function shouldCreateUndoCheckpoint(a: any, b: any, c: any): boolean {
         a = a || {};
         b = b || {};
         c = c || {};
-        const keys: any[] = Object.keys({ ...a, ...b, ...c });
-        return keys.some((key) => shouldCreateUndoCheckpoint(a[key], b[key], c[key]));
+        const keys: any[] = getKeys(a, b, c);
+        return keys.some((key) => shouldCreateUndoCheckpoint(getValue(a, key), getValue(b, key), getValue(c, key)));
     }
 
     // The field is scalar (null, undefined, boolean, string, number, NaN)
diff --git a/uui-core/src/data/lenses/LensBuilder.ts b/uui-core/src/data/lenses/LensBuilder.ts
index d2d0eee92d..94df7f5bae 100644
--- a/uui-core/src/data/lenses/LensBuilder.ts
+++ b/uui-core/src/data/lenses/LensBuilder.ts
@@ -1,7 +1,7 @@
 import { IEditable } from '../../types';
 import * as Impl from './lensesImpl';
 import { ILensImpl } from './lensesImpl';
-import { ILens, ArrayElement } from './types';
+import { ILens, ArrayElement, IMapElement } from './types';
 
 export class LensBuilder<TRoot = any, TFocused = any> implements ILens<TFocused> {
     public readonly handleValueChange: (newValue: TFocused) => void = null;
@@ -15,6 +15,10 @@ export class LensBuilder<TRoot = any, TFocused = any> implements ILens<TFocused>
         return this.lens.get(null);
     }
 
+    public key<TId>(id: TId): LensBuilder<TRoot, IMapElement<TFocused>> {
+        return this.compose(Impl.key(id) as any, id);
+    }
+
     public set(value: TFocused) {
         this.lens.set(null, value);
     }
diff --git a/uui-core/src/data/lenses/lensesImpl.tsx b/uui-core/src/data/lenses/lensesImpl.tsx
index 02c73a3890..88285bfbc8 100644
--- a/uui-core/src/data/lenses/lensesImpl.tsx
+++ b/uui-core/src/data/lenses/lensesImpl.tsx
@@ -1,4 +1,5 @@
-import { Metadata } from '../../types';
+import { IImmutableMap, IMap, Metadata } from '../../types';
+import { cloneMap } from '../processing';
 import { blankValidationState } from '../validation';
 import { ValidationState } from './types';
 
@@ -58,6 +59,34 @@ export function prop<TObject, TKey extends keyof TObject>(name: TKey): ILensImpl
     };
 }
 
+export function key<TItem, TId>(id: TId): ILensImpl<IMap<TId, TItem> | IImmutableMap<TId, TItem>, TItem> {
+    return {
+        get(big: IMap<TId, TItem> | IImmutableMap<TId, TItem>) {
+            if (big == null) {
+                return undefined;
+            } else {
+                return big.get(id);
+            }
+        },
+        set(big: IMap<TId, TItem> | IImmutableMap<TId, TItem>, small: TItem) {
+            const newMap = cloneMap(big);
+            return newMap.set(id, small);
+        },
+        getValidationState(big: ValidationState) {
+            const validationStateProps = (big || blankValidationState).validationProps || {};
+            return validationStateProps[id as string];
+        },
+        getMetadata(big: Metadata<IMap<TId, TItem> | IImmutableMap<TId, TItem>>) {
+            const metadata: Metadata<IMap<TId, TItem> | IImmutableMap<TId, TItem>> = big || { all: { props: {} } };
+            const metadataProps = metadata.all;
+            const { isDisabled, isRequired, isReadonly } = metadata;
+            return {
+                ...metadataProps, isDisabled, isReadonly, isRequired,
+            } as any;
+        },
+    };
+}
+
 export function index<TItem>(num: number): ILensImpl<TItem[], TItem> {
     return {
         get(big: TItem[]) {
diff --git a/uui-core/src/data/lenses/types.ts b/uui-core/src/data/lenses/types.ts
index d5960bb375..c3f16cc001 100644
--- a/uui-core/src/data/lenses/types.ts
+++ b/uui-core/src/data/lenses/types.ts
@@ -1,6 +1,14 @@
-import { ICanBeInvalid, IEditable, IHasValidationMessage } from '../../types';
+import { ICanBeInvalid, IEditable, IHasValidationMessage, IImmutableMap, IMap } from '../../types';
 
 export type ArrayElement<ArrayType> = ArrayType extends (infer ElementType)[] ? ElementType : never;
+/**
+ * IMap element, supported by ILens.
+ */
+export type IMapElement<MapType> = MapType extends IMap<any, infer Item>
+    ? Item
+    : MapType extends IImmutableMap<any, infer Item>
+        ? Item
+        : never;
 
 export interface ValidationState extends ICanBeInvalid, IHasValidationMessage {
     /** If T is a complex value (object or array), this property contains validation states of inner items */
@@ -10,6 +18,8 @@ export interface ValidationState extends ICanBeInvalid, IHasValidationMessage {
 export interface ILens<TFocused> {
     /** Get lens value */
     get(): TFocused;
+    /** Get lens value of the IMap or IImmutableMap by provided id. */
+    key<TId>(id: TId): ILens<NonNullable<IMapElement<TFocused>>>;
     /** Set new lens value */
     set(value: TFocused): void;
     /** Updates lens value with returned value from provided callback.
diff --git a/uui-core/src/data/processing/ArrayDataSource.tsx b/uui-core/src/data/processing/ArrayDataSource.tsx
index aff48578e9..70f559ae2a 100644
--- a/uui-core/src/data/processing/ArrayDataSource.tsx
+++ b/uui-core/src/data/processing/ArrayDataSource.tsx
@@ -1,43 +1,42 @@
 import { useEffect, useMemo } from 'react';
-import { IDataSourceView, DataSourceState } from '../../types/dataSources';
+import { IDataSourceView, DataSourceState, SetDataSourceState } from '../../types/dataSources';
 import { BaseDataSource } from './BaseDataSource';
-import { ArrayListView, ArrayListViewProps } from './views';
-import { ITree, NOT_FOUND_RECORD, Tree } from './views/tree';
+import { ArrayListViewProps, useCascadeSelectionService, useDataRows, newMap, ITree, useTree } from './views';
+import { ItemsStorage } from './views/tree/ItemsStorage';
+import { IMap } from '../../types';
+import { RecordStatus } from './views/tree/types';
 
 export interface ArrayDataSourceProps<TItem, TId, TFilter> extends ArrayListViewProps<TItem, TId, TFilter> {}
 
 export class ArrayDataSource<TItem = any, TId = any, TFilter = any> extends BaseDataSource<TItem, TId, TFilter> {
     props: ArrayDataSourceProps<TItem, TId, TFilter>;
     tree: ITree<TItem, TId>;
+
+    itemsStorage: ItemsStorage<TItem, TId>;
+    itemsStatusMap: IMap<TId, RecordStatus>;
+    
     constructor(props: ArrayDataSourceProps<TItem, TId, TFilter>) {
         super(props);
         this.setProps(props);
+        const params = { getId: this.getId, complexIds: props.complexIds };
+        this.itemsStatusMap = newMap(params);
     }
 
     public setProps(props: ArrayDataSourceProps<TItem, TId, TFilter>) {
+        const currentItems = this.props?.items;
         this.props = props;
-        if (this.props.items instanceof Tree) {
-            this.tree = this.props.items;
-        } else {
-            this.tree = Tree.create(
-                {
-                    ...this.props,
-                    // These defaults are added for compatibility reasons.
-                    // We'll require getId and getParentId callbacks in other APIs, including the views.
-                    getId: this.getId,
-                    getParentId: props?.getParentId ?? this.defaultGetParentId,
-                },
-                this.props.items,
-            );
+        if (props.items && currentItems !== props.items) {
+            if (!this.itemsStorage) {
+                this.itemsStorage = new ItemsStorage({
+                    items: [],
+                    params: { getId: this.getId, complexIds: this.props.complexIds },
+                });
+            }
         }
     }
 
-    public getById = (id: TId): TItem | void => {
-        const item = this.tree.getById(id);
-        if (item === NOT_FOUND_RECORD) {
-            return;
-        }
-        return item;
+    public getById = (id: TId): TItem | undefined => {
+        return this.itemsStorage.getItemsMap().get(id);
     };
 
     protected defaultGetParentId = (item: TItem) => {
@@ -48,68 +47,78 @@ export class ArrayDataSource<TItem = any, TId = any, TFilter = any> extends Base
         const id = this.getId(item);
         const prevItem = this.getById(id);
         if (!prevItem) {
-            const items = Array.isArray(this.props.items)
-                ? [...this.props.items, item]
-                : this.props.items.patch([item]);
-            this.setProps({ ...this.props, items });
-        }
-    }
-
-    getView(
-        value: DataSourceState<TFilter, TId>,
-        onValueChange: (val: DataSourceState<TFilter, TId>) => void,
-        options?: Partial<ArrayListViewProps<TItem, TId, TFilter>>,
-    ): IDataSourceView<TItem, TId, TFilter> {
-        const view = this.views.get(onValueChange) as ArrayListView<TItem, TId, TFilter>;
-        const viewProps: ArrayListViewProps<TItem, TId, TFilter> = {
-            ...this.props,
-            items: this.tree,
-            ...options,
-            // These defaults are added for compatibility reasons.
-            // We'll require getId and getParentId callbacks in other APIs, including the views.
-            getId: this.getId,
-            getParentId: options?.getParentId ?? this.props.getParentId ?? this.defaultGetParentId,
-        };
-
-        if (view) {
-            view.update({ value, onValueChange }, viewProps);
-            return view;
-        } else {
-            const newView = new ArrayListView({ value, onValueChange }, viewProps);
-            this.views.set(onValueChange, newView);
-            return newView;
+            this.itemsStorage.setItems([item]);
         }
     }
 
     useView(
         value: DataSourceState<TFilter, TId>,
-        onValueChange: (val: DataSourceState<TFilter, TId>) => void,
+        onValueChange: SetDataSourceState<TFilter, TId>,
         options?: Partial<ArrayListViewProps<TItem, TId, TFilter>>,
         deps: any[] = [],
     ): IDataSourceView<TItem, TId, TFilter> {
-        const viewProps: ArrayListViewProps<TItem, TId, TFilter> = {
-            ...this.props,
-            items: this.tree,
+        const { items, ...restDSProps } = this.props;
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { tree, selectionTree, reload, totalCount, ...restProps } = useTree({
+            type: 'sync',
+            ...restDSProps,
             ...options,
+            
+            items,
+            setItems: this.itemsStorage.setItems,
+            dataSourceState: value,
+            setDataSourceState: onValueChange,
             // These defaults are added for compatibility reasons.
             // We'll require getId and getParentId callbacks in other APIs, including the views.
             getId: this.getId,
             getParentId: options?.getParentId ?? this.props.getParentId ?? this.defaultGetParentId,
-        };
+        }, [...deps, this]);
 
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const view = useMemo(
-            () => new ArrayListView({ value, onValueChange }, viewProps),
-            [...deps, this], // every time, datasource is updated, view should be recreated
-        );
+        useEffect(() => {
+            this.trees.set(tree, reload);
+            return () => { 
+                this.trees.delete(tree);
+            };
+        }, [tree, reload]);
 
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => {
-            const unsubscribe = this.subscribe(view);
-            return () => { unsubscribe(); };
-        }, [...deps, this]);
+        const cascadeSelectionService = useCascadeSelectionService({
+            tree: selectionTree,
+            cascadeSelection: restProps.cascadeSelection,
+            getRowOptions: restProps.getRowOptions,
+            rowOptions: restProps.rowOptions,
+            getItemStatus: restProps.getItemStatus,
+        });
 
-        view.update({ value, onValueChange }, viewProps);
-        return view;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { rows, listProps, selectAll, getById, getSelectedRowsCount, clearAllChecked } = useDataRows({
+            tree,
+            ...restProps,
+            ...cascadeSelectionService,
+        });
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useMemo(() => ({
+            getVisibleRows: () => rows,
+            getListProps: () => ({ ...listProps, totalCount }),
+            selectAll,
+            getConfig: () => restProps,
+            reload,
+            getById,
+            getSelectedRowsCount,
+            clearAllChecked,
+        }), [
+            rows,
+            listProps,
+            selectAll,
+            restProps,
+            totalCount,
+            reload,
+            getById,
+            getSelectedRowsCount,
+            clearAllChecked,
+        ]);
     }
 }
diff --git a/uui-core/src/data/processing/AsyncDataSource.tsx b/uui-core/src/data/processing/AsyncDataSource.tsx
index 1c36cf39db..49231d10c5 100644
--- a/uui-core/src/data/processing/AsyncDataSource.tsx
+++ b/uui-core/src/data/processing/AsyncDataSource.tsx
@@ -1,8 +1,9 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ArrayDataSource, ArrayDataSourceProps } from './ArrayDataSource';
-import { BaseArrayListViewProps } from './views/ArrayListView';
-import { DataSourceState, IDataSourceView } from '../../types';
-import { AsyncListView, AsyncListViewProps } from './views/AsyncListView';
+import { DataSourceState, IDataSourceView, SetDataSourceState } from '../../types';
+import { useCascadeSelectionService, useDataRows, useTree, newMap } from './views';
+import { ItemsStorage } from './views/tree/ItemsStorage';
+import { AsyncListViewProps } from './views/types';
 
 export interface AsyncDataSourceProps<TItem, TId, TFilter> extends AsyncListViewProps<TItem, TId, TFilter> {}
 
@@ -21,85 +22,104 @@ export class AsyncDataSource<TItem = any, TId = any, TFilter = any> extends Arra
         // We'll receive items=null on updates (because we inherit ArrayDataSource, but nobody would actually pass items there - they are expected to come from API)
         // so this tweak is required to not reset items on any update
         props.items = newProps.items || this.props.items;
+
         super.setProps(props);
+        if (newProps.items && newProps.items !== this.props.items) {
+            this.itemsStorage.setItems(newProps.items, { reset: true });
+        }
     }
 
     reload() {
-        super.reload();
         this.setProps({ ...this.props, items: [] });
+        const params = { getId: this.getId, complexIds: this.props.complexIds };
+        this.itemsStorage = new ItemsStorage({ items: [], params });
+        this.itemsStatusMap = newMap(params);
+        super.reload();
     }
 
-    private loadViewData(view: AsyncListView<TItem, TId, TFilter>) {
-        if (!view.isLoaded) {
-            view.loadData().then((loadedItems) => {
-                if (loadedItems !== undefined) {
-                    this.setProps({ ...this.props, items: loadedItems }); 
-                    this.updateViews();
-                }
-            });
-        }
-    }
-
-    getView(
-        value: DataSourceState<any, TId>,
-        onValueChange: (val: DataSourceState<any, TId>) => any,
-        options?: Partial<BaseArrayListViewProps<TItem, TId, TFilter>>,
-    ): IDataSourceView<TItem, TId, TFilter> {
-        const view = this.views.get(onValueChange) as AsyncListView<TItem, TId, TFilter>;
-        const { items, ...props } = this.props;
-        const viewProps: AsyncListViewProps<TItem, TId, TFilter> = {
-            ...props,
-            ...options,
-            api: this.api,
-            // These defaults are added for compatibility reasons.
-            // We'll require getId and getParentId callbacks in other APIs, including the views.
-            getId: this.getId,
-            getParentId: options?.getParentId ?? this.props.getParentId ?? this.defaultGetParentId,
-        };
-
-        if (view) {
-            view.update({ value, onValueChange }, viewProps);
-            this.loadViewData(view);
-
-            return view;
-        } else {
-            const newView = new AsyncListView({ value, onValueChange }, viewProps);
-            this.views.set(onValueChange, newView);
-            return newView;
-        }
-    }
-    
     useView(
         value: DataSourceState<TFilter, TId>,
-        onValueChange: (val: DataSourceState<TFilter, TId>) => void,
+        onValueChange: SetDataSourceState<any, TId>,
         options?: Partial<AsyncListViewProps<TItem, TId, TFilter>>,
         deps: any[] = [],
     ): IDataSourceView<TItem, TId, TFilter> {
-        const viewProps: AsyncListViewProps<TItem, TId, TFilter> = {
-            ...this.props,
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [itemsMap, setItemsMap] = useState(this.itemsStorage.getItemsMap());
+        
+        const { items, ...props } = { ...this.props, ...options };
+        
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { tree, reload, selectionTree, totalCount, ...restProps } = useTree({
+            type: 'async',
             api: this.api,
-            ...options,
-            // These defaults are added for compatibility reasons.
-            // We'll require getId and getParentId callbacks in other APIs, including the views.
+            ...props,
+            itemsMap,
+            setItems: this.itemsStorage.setItems,
+            itemsStatusMap: this.itemsStatusMap,
+            isLoaded: this.props.items.length > 0,
             getId: this.getId,
             getParentId: options?.getParentId ?? this.props.getParentId ?? this.defaultGetParentId,
-        };
+            dataSourceState: value,
+            setDataSourceState: onValueChange,
+        }, [...deps, this]);
 
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const view = useMemo(
-            () => new AsyncListView({ value, onValueChange }, viewProps),
-            [...deps, this], // every time, datasource is updated, view should be recreated
-        );
+        useEffect(() => {
+            const unsubscribe = this.itemsStorage.subscribe((newItemsMap) => {
+                if (itemsMap !== newItemsMap) {
+                    setItemsMap(newItemsMap);
+                }
+            });
+            
+            return () => {
+                unsubscribe();
+            };
+        }, [this.itemsStorage]);
 
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
-            const unsubscribe = this.subscribe(view);
-            return () => { unsubscribe(); };
-        }, [...deps, this]); // every time, datasource is updated, view should be resubscribed
+            this.trees.set(tree, reload);
+            return () => { 
+                this.trees.delete(tree);
+            };
+        }, [tree, reload]);
 
-        view.update({ value, onValueChange }, viewProps);
-        this.loadViewData(view);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const cascadeSelectionService = useCascadeSelectionService({
+            tree: selectionTree,
+            cascadeSelection: restProps.cascadeSelection,
+            getRowOptions: restProps.getRowOptions,
+            rowOptions: restProps.rowOptions,
+            getItemStatus: restProps.getItemStatus,
+        });
 
-        return view;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { rows, listProps, selectAll, getById, getSelectedRowsCount, clearAllChecked } = useDataRows({
+            tree,
+            ...restProps,
+            ...cascadeSelectionService,
+        });
+    
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useMemo(() => ({
+            getVisibleRows: () => rows,
+            getListProps: () => ({ ...listProps, totalCount }),
+            selectAll,
+            getConfig: () => restProps,
+            reload,
+            getById,
+            getSelectedRowsCount,
+            clearAllChecked,
+        }), [
+            rows,
+            listProps,
+            selectAll,
+            restProps,
+            totalCount,
+            reload,
+            getById,
+            getSelectedRowsCount,
+            clearAllChecked,
+        ]);
     }
 }
diff --git a/uui-core/src/data/processing/BaseDataSource.tsx b/uui-core/src/data/processing/BaseDataSource.tsx
index a6bfa85d77..74be9e3da0 100644
--- a/uui-core/src/data/processing/BaseDataSource.tsx
+++ b/uui-core/src/data/processing/BaseDataSource.tsx
@@ -1,46 +1,30 @@
 import {
-    BaseListViewProps, DataSourceState, IDataSource, IDataSourceView,
+    BaseListViewProps, DataSourceState, IDataSource, IDataSourceView, SetDataSourceState,
 } from '../../types/dataSources';
+import { ITree } from './views';
 
 export abstract class BaseDataSource<TItem, TId, TFilter = any> implements IDataSource<TItem, TId, TFilter> {
-    protected views = new Map<any, IDataSourceView<TItem, TId, TFilter>>();
-    private subscriptions = new Map<IDataSourceView<TItem, TId, TFilter>, () => void>();
+    protected trees = new Map<ITree<TItem, TId>, () => void>();
 
     constructor(public props: BaseListViewProps<TItem, TId, TFilter>) {}
 
     abstract getById(id: TId): TItem | void;
     abstract setItem(item: TItem): void;
-    abstract getView(
-        value: DataSourceState<TFilter, TId>,
-        onValueChange: (val: DataSourceState<TFilter, TId>) => void,
-        options?: Partial<BaseListViewProps<TItem, TId, TFilter>>
-    ): IDataSourceView<TItem, TId, TFilter>;
 
     abstract useView(
         value: DataSourceState<TFilter, TId>,
-        onValueChange: (val: DataSourceState<TFilter, TId>) => void,
+        onValueChange: SetDataSourceState<TFilter, TId>,
         options?: Partial<BaseListViewProps<TItem, TId, TFilter>>,
         deps?: any[],
     ): IDataSourceView<TItem, TId, TFilter>;
 
-    protected updateViews = () => {
-        this.views.forEach((view) => view._forceUpdate());
-        this.subscriptions.forEach((onUpdate) => onUpdate());
-    };
-
     public abstract setProps(newProps: BaseListViewProps<TItem, TId, TFilter>): void;
-    public unsubscribeView(onValueChange: (val: any) => void) {
-        this.views.delete(onValueChange);
-    }
 
     public destroy() {
-        this.views.forEach((view) => view.deactivate());
-        this.views.clear();
-        this.subscriptions.forEach((_, view) => view.deactivate());
-        this.subscriptions.clear();
+        this.trees.clear();
     }
 
-    public getId = (item: TItem & { id?: TId }) => {
+    public getId = (item: TItem & { id?: TId }): TId => {
         if (item == null) return null;
 
         const id = this.props.getId?.(item) || item.id;
@@ -51,18 +35,8 @@ export abstract class BaseDataSource<TItem, TId, TFilter = any> implements IData
 
         return id;
     };
-    
-    protected subscribe(view: IDataSourceView<TItem, TId, TFilter>) {
-        view.activate();
-        this.subscriptions.set(view, view._forceUpdate);
-        return () => {
-            this.subscriptions.delete(view);
-            view.deactivate();
-        };
-    }
-    
-    protected reload() {
-        this.views.forEach((view) => view.reload());
-        this.subscriptions.forEach((_, view) => view.reload());
+
+    protected reload() { 
+        this.trees.forEach((reload) => reload());
     }
 }
diff --git a/uui-core/src/data/processing/LazyDataSource.tsx b/uui-core/src/data/processing/LazyDataSource.tsx
index 09300cdfa0..1c3e1f06d5 100644
--- a/uui-core/src/data/processing/LazyDataSource.tsx
+++ b/uui-core/src/data/processing/LazyDataSource.tsx
@@ -1,21 +1,26 @@
-import { useEffect, useMemo } from 'react';
-import { LazyListView, LazyListViewProps, NOT_FOUND_RECORD } from './views';
-import { ListApiCache } from './ListApiCache';
+import { useEffect, useMemo, useState } from 'react';
+import { LazyListViewProps, useCascadeSelectionService, useDataRows, useTree, newMap } from './views';
 import { BaseDataSource } from './BaseDataSource';
-import { DataSourceState } from '../../types';
+import { DataSourceState, IDataSourceView, IMap, SetDataSourceState } from '../../types';
+import { ItemsStorage } from './views/tree/ItemsStorage';
+import { RecordStatus } from './views/tree/types';
 
 export interface LazyDataSourceProps<TItem, TId, TFilter> extends LazyListViewProps<TItem, TId, TFilter> {}
 
 export class LazyDataSource<TItem = any, TId = any, TFilter = any> extends BaseDataSource<TItem, TId, TFilter> {
     props: LazyDataSourceProps<TItem, TId, TFilter>;
-    cache: ListApiCache<TItem, TId, TFilter> = null;
+    itemsStatusMap: IMap<TId, RecordStatus> = null;
+    itemsStorage: ItemsStorage<TItem, TId>;
+
     constructor(props: LazyDataSourceProps<TItem, TId, TFilter>) {
         super(props);
         this.props = {
             ...props,
             flattenSearchResults: props.flattenSearchResults ?? true,
         };
-        this.initCache();
+        const params = { getId: this.getId, complexIds: this.props.complexIds };
+        this.itemsStorage = new ItemsStorage({ items: [], params });
+        this.itemsStatusMap = newMap(params);
     }
 
     public setProps(props: LazyDataSourceProps<TItem, TId, TFilter>) {
@@ -27,77 +32,103 @@ export class LazyDataSource<TItem = any, TId = any, TFilter = any> extends BaseD
     }
 
     public getById = (id: TId): TItem | void => {
-        const item = this.cache.byId(id);
-        if (item === NOT_FOUND_RECORD) {
-            return;
-        }
-        return item;
+        const map = this.itemsStorage.getItemsMap();
+        return map.has(id) ? map.get(id) : null;
     };
 
-    private initCache() {
-        this.cache = new ListApiCache({
-            api: this.props.api,
-            getId: this.getId,
-            onUpdate: this.updateViews,
-        });
-    }
-
     setItem(item: TItem) {
-        this.cache.setItem(item);
+        this.itemsStorage.setItems([item]);
     }
 
     public clearCache() {
-        this.initCache();
+        const params = { getId: this.getId, complexIds: this.props.complexIds };
+        this.itemsStorage = new ItemsStorage({ items: [], params });
+        this.itemsStatusMap = newMap(params);
         super.reload();
     }
 
-    public getView = <TState extends DataSourceState<any, TId>>(
-        value: TState,
-        onValueChange: (value: TState) => void,
-        props?: Partial<LazyListViewProps<TItem, TId, TFilter>>,
-    ): LazyListView<TItem, TId, TFilter> => {
-        const view = this.views.get(onValueChange) as LazyListView<TItem, TId, TFilter>;
-        const viewProps: LazyListViewProps<TItem, TId, TFilter> = {
-            ...this.props,
-            getId: this.getId,
-            ...props,
-        };
-
-        if (view) {
-            view.update({ value, onValueChange }, viewProps);
-            return view;
-        } else {
-            const newView = new LazyListView({ value, onValueChange }, viewProps, this.cache);
-            this.views.set(onValueChange, newView);
-            return newView;
-        }
-    };
-
     useView<TState extends DataSourceState<any, TId>>(
         value: TState,
-        onValueChange: (val: TState) => void,
+        onValueChange: SetDataSourceState<any, TId>,
         props?: Partial<LazyListViewProps<TItem, TId, TFilter>>,
         deps: any[] = [],
-    ): LazyListView<TItem, TId, TFilter> {
-        const viewProps: LazyListViewProps<TItem, TId, TFilter> = {
+    ): IDataSourceView<TItem, TId, TFilter> {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [itemsMap, setItemsMap] = useState(this.itemsStorage.getItemsMap());
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { tree, selectionTree, reload, totalCount, loadMissingRecordsOnCheck, ...restProps } = useTree({
+            type: 'lazy',
             ...this.props,
+            itemsMap,
+            itemsStatusMap: this.itemsStatusMap,
+            setItems: this.itemsStorage.setItems,
+            dataSourceState: value,
+            setDataSourceState: onValueChange as React.Dispatch<React.SetStateAction<DataSourceState<any, TId>>>,
+            // These defaults are added for compatibility reasons.
+            // We'll require getId and getParentId callbacks in other APIs, including the views.
             getId: this.getId,
             ...props,
-        };
+        }, [...deps, this]);
 
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const view = useMemo(
-            () => new LazyListView({ value, onValueChange }, viewProps, this.cache),
-            [...deps, this], // every time, datasource is updated, view should be recreated
-        );
+        useEffect(() => {
+            const unsubscribe = this.itemsStorage.subscribe((newItemsMap) => {
+                if (itemsMap !== newItemsMap) {
+                    setItemsMap(newItemsMap);
+                }
+            });
 
+            return () => {
+                unsubscribe();
+            };
+        }, [this.itemsStorage]);
+        
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
-            const unsubscribe = this.subscribe(view);
-            return () => { unsubscribe(); };
-        }, [...deps, this]); // every time, datasource is updated, view should be resubscribed
+            this.trees.set(tree, reload);
+            return () => { 
+                this.trees.delete(tree);
+            };
+        }, [tree, reload]);
 
-        view.update({ value, onValueChange }, viewProps);
-        return view;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const cascadeSelectionService = useCascadeSelectionService({
+            tree: selectionTree,
+            cascadeSelection: restProps.cascadeSelection,
+            getRowOptions: restProps.getRowOptions,
+            rowOptions: restProps.rowOptions,
+            getItemStatus: restProps.getItemStatus,
+            loadMissingRecordsOnCheck,
+        });
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { rows, listProps, selectAll, getById, getSelectedRowsCount, clearAllChecked } = useDataRows({
+            tree,
+            ...restProps,
+            ...cascadeSelectionService,
+        });
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useMemo(() => ({
+            getVisibleRows: () => rows,
+            getListProps: () => ({ ...listProps, totalCount }),
+            selectAll,
+            getConfig: () => restProps,
+            reload,
+            getById,
+            getSelectedRowsCount,
+            clearAllChecked,
+        }), [
+            rows,
+            listProps,
+            selectAll,
+            restProps,
+            totalCount,
+            reload,
+            getById,
+            getSelectedRowsCount,
+            clearAllChecked,
+        ]);
     }
 }
diff --git a/uui-core/src/data/processing/ListApiCache.tsx b/uui-core/src/data/processing/ListApiCache.tsx
deleted file mode 100644
index ed95038134..0000000000
--- a/uui-core/src/data/processing/ListApiCache.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { FAILED, LazyLoadedMap, UNKNOWN } from '../../helpers';
-import { LazyDataSourceApi } from '../../types';
-import { batch } from '../../helpers/batch';
-import { NOT_FOUND_RECORD } from '../processing/views/tree/ITree';
-
-export interface ListApiSettings<TItem, TId, TFilter> {
-    /** Lazy List API used to fetch items */
-    api: LazyDataSourceApi<TItem, TId, TFilter>;
-
-    /** Get ID from an item. Id is expected to be value-type, i.e. can be used as Map's key */
-    getId: (item: TItem) => TId;
-
-    /** Will be called after new data is fetched into the list */
-    onUpdate?: () => void;
-}
-
-export interface ListApiResponse<TItem> {
-    /** Items according to the request. For items that are not fetched yet, null will be returned. */
-    items: TItem[];
-}
-
-/**
- * Caches items by ID, and can request missing items via API.
- */
-export class ListApiCache<TItem, TId, TFilter> {
-    itemsById: LazyLoadedMap<string, TItem>;
-    api: LazyDataSourceApi<TItem, TId, TFilter>;
-    getId: (item: TItem) => TId;
-    onUpdate: () => void;
-    constructor(options: ListApiSettings<TItem, TId, TFilter>) {
-        this.api = options.api;
-        this.getId = options.getId;
-        this.onUpdate = batch(() => options.onUpdate && options.onUpdate());
-        this.itemsById = new LazyLoadedMap((ids) => this.loadByIds(ids), this.onUpdate);
-    }
-
-    /**
-     * Gets item by id. If item is not yet fetched, null be returned, and ID be scheduled for fetch on the next tick.
-     * @param id Item ID
-     * @param fetchIfAbsent Pass false to avoid auto-fetching missing item.
-     */
-    public byId(id: TId, fetchIfAbsent: boolean = true): TItem | typeof NOT_FOUND_RECORD {
-        const item = this.itemsById.get(JSON.stringify(id), fetchIfAbsent);
-        if ((item.status === UNKNOWN && !fetchIfAbsent) || item.status === FAILED) {
-            return NOT_FOUND_RECORD;
-        }
-
-        return item.value;
-    }
-
-    public setItem(item: TItem) {
-        const id = this.getId(item);
-        this.itemsById.set(JSON.stringify(id), item);
-    }
-
-    private loadByIds(keys: string[]) {
-        const ids: TId[] = keys.map((key) => JSON.parse(key));
-        return this.api({ ids }).then((response) => {
-            return response.items.map((item) => [JSON.stringify(this.getId(item)), item] as [string, TItem]);
-        });
-    }
-}
diff --git a/uui-core/src/data/processing/__tests__/ListApiCache.test.tsx b/uui-core/src/data/processing/__tests__/ListApiCache.test.tsx
deleted file mode 100644
index c02f0e7452..0000000000
--- a/uui-core/src/data/processing/__tests__/ListApiCache.test.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ListApiCache, ListApiSettings } from '../ListApiCache';
-import { LazyDataSourceApiRequest, LazyDataSourceApiResponse } from '../../../types';
-import { delay } from '@epam/uui-test-utils';
-
-interface TestItem {
-    id: number;
-    name: string;
-    categoryId: number;
-}
-
-interface TestFilter {
-    categoryId?: number;
-    fetchAll?: boolean;
-}
-
-const allItems: TestItem[] = [];
-
-for (let id = 0; id < 100; id++) {
-    allItems.push({ id, name: 'Item' + id, categoryId: id % 2 });
-}
-
-const testApi = (r: LazyDataSourceApiRequest<TestItem, number, TestFilter>) => {
-    let items: TestItem[] = allItems;
-
-    if (r.ids) {
-        items = items.filter((i) => r.ids.indexOf(i.id) >= 0);
-    }
-
-    return Promise.resolve<LazyDataSourceApiResponse<TestItem>>({ items });
-};
-
-describe('ListApiCache', () => {
-    const apiFn = jest.fn(testApi);
-    const updateFn = jest.fn(() => null);
-    const apiSettings: ListApiSettings<TestItem, number, TestFilter> = {
-        api: apiFn,
-        getId: (i: TestItem) => i.id,
-        onUpdate: updateFn,
-    };
-
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it('Performs reads by id with batching', async () => {
-        const cache = new ListApiCache(apiSettings);
-        expect(cache.byId(0)).toBe(null);
-        expect(cache.byId(10)).toBe(null);
-
-        await delay();
-
-        expect(updateFn).toBeCalled();
-        expect(cache.byId(0)).toEqual(allItems[0]);
-        expect(cache.byId(10)).toEqual(allItems[10]);
-        expect(apiFn.mock.calls.length).toBe(1);
-    });
-});
diff --git a/uui-core/src/data/processing/__tests__/arrayDataSource.test.ts b/uui-core/src/data/processing/__tests__/arrayDataSource.test.ts
index d3427d002d..158d343a42 100644
--- a/uui-core/src/data/processing/__tests__/arrayDataSource.test.ts
+++ b/uui-core/src/data/processing/__tests__/arrayDataSource.test.ts
@@ -140,12 +140,12 @@ describe('ArrayDataSource', () => {
         const search3List = viewSearchFirst3.getListProps();
 
         expect(depAList.rowsCount).toEqual(1);
-        expect(depAList.totalCount).toEqual(7);
+        expect(depAList.totalCount).toEqual(3);
 
         expect(depAllList.rowsCount).toEqual(2);
         expect(depAllList.totalCount).toEqual(7);
 
         expect(search3List.rowsCount).toEqual(2);
-        expect(search3List.totalCount).toEqual(7);
+        expect(search3List.totalCount).toEqual(2);
     });
 });
diff --git a/uui-core/src/data/processing/__tests__/mocks/arrayLocationsDS.ts b/uui-core/src/data/processing/__tests__/mocks/arrayLocationsDS.ts
new file mode 100644
index 0000000000..e5eaec6470
--- /dev/null
+++ b/uui-core/src/data/processing/__tests__/mocks/arrayLocationsDS.ts
@@ -0,0 +1,16 @@
+import { demoData } from '@epam/uui-docs';
+import { DataQueryFilter } from '../../../../types';
+import { ArrayDataSource, ArrayDataSourceProps } from '../../ArrayDataSource';
+import { LocationItem } from './types';
+
+type Props<TItem, TId, TFilter> = Partial<ArrayDataSourceProps<TItem, TId, TFilter>>;
+
+export function getArrayLocationsDS(props: Props<LocationItem, string, DataQueryFilter<LocationItem>>) {
+    return new ArrayDataSource({
+        items: demoData.locations,
+        getId: ({ id }) => id,
+        getParentId: ({ parentId }) => parentId,
+
+        ...props,
+    });
+}
diff --git a/uui-core/src/data/processing/__tests__/mocks/asyncLocationsDS.ts b/uui-core/src/data/processing/__tests__/mocks/asyncLocationsDS.ts
new file mode 100644
index 0000000000..7bd0d4478b
--- /dev/null
+++ b/uui-core/src/data/processing/__tests__/mocks/asyncLocationsDS.ts
@@ -0,0 +1,20 @@
+import { demoData } from '@epam/uui-docs';
+import { getAsyncDataSourceMock } from '@epam/uui-test-utils';
+import { DataQueryFilter } from '../../../../types';
+import { AsyncDataSourceProps } from '../../AsyncDataSource';
+import { LocationItem } from './types';
+
+type Props<TItem, TId, TFilter> = Partial<AsyncDataSourceProps<TItem, TId, TFilter>>;
+
+export function getAsyncLocationsDS(props: Props<LocationItem, string, DataQueryFilter<LocationItem>>) {
+    return getAsyncDataSourceMock(
+        demoData.locations,
+        {
+            getId: ({ id }) => id,
+            getParentId: ({ parentId }) => parentId,
+            getSearchFields: ({ name }) => [name],
+
+            ...props,
+        },
+    );
+}
diff --git a/uui-core/src/data/processing/__tests__/mocks/buildSearchTree.ts b/uui-core/src/data/processing/__tests__/mocks/buildSearchTree.ts
new file mode 100644
index 0000000000..70eb1f6e77
--- /dev/null
+++ b/uui-core/src/data/processing/__tests__/mocks/buildSearchTree.ts
@@ -0,0 +1,79 @@
+import { LocationItem } from './types';
+
+interface LocationsTree<TItem, TId> {
+    byId: Map<TId, TItem>;
+    byParentId: Map<TId, TId[]>;
+    list: TItem[];
+}
+
+function getParents(item: LocationItem, fullTree: LocationsTree<LocationItem, LocationItem['id']>, prevParents: LocationItem[] = []) {
+    if (item.parentId === null || item.parentId === undefined) {
+        return prevParents;
+    }
+
+    const parent = fullTree.byId.get(item.parentId);
+    if (!parent) {
+        return prevParents;
+    }
+
+    return getParents(parent, fullTree, [parent, ...prevParents]);
+}
+
+export function buildChildren(id, byParentId) {
+    const children = byParentId.get(id);
+    if (!children) {
+        return null;
+    }
+
+    return children.map((child) => ({
+        children: buildChildren(child.id, byParentId),
+        ...child,
+        childCount: byParentId.get(child.id)?.length ?? 0,
+    }));
+}
+
+function contains(item, children) {
+    return children.some(({ id }) => id === item.id);
+}
+
+export function buildSearchTree(foundItems: LocationItem[], allItems: LocationItem[]): LocationItem[] {
+    const allById = new Map(allItems.map((l) => [l.id, l]));
+    const allByParentId = new Map();
+
+    allItems.forEach((l) => {
+        if (allByParentId.get(l.parentId) == null) {
+            allByParentId.set(l.parentId, []);
+        }
+        allByParentId.get(l.parentId).push(l);
+    });
+    const fullTree = { byId: allById, byParentId: allByParentId, list: allItems };
+
+    const byId = new Map(foundItems.map((l) => [l.id, l]));
+    const byParentId = new Map();
+
+    foundItems.forEach((item) => {
+        if (!byParentId.has(item.parentId)) {
+            byParentId.set(item.parentId, [item]);
+
+            const parents = getParents(item, fullTree);
+            parents.forEach((parent) => {
+                if (!byParentId.has(parent.parentId)) {
+                    byParentId.set(parent.parentId, []);
+                }
+                const children = byParentId.get(parent.parentId);
+                if (!contains(parent, children)) {
+                    children.push(parent);
+                }
+                byId.set(parent.id, parent);
+            });
+            return;
+        }
+
+        const children = byParentId.get(item.parentId);
+        if (!contains(item, children)) {
+            children.push(item);
+        }
+    });
+
+    return buildChildren(null, byParentId) || [];
+}
diff --git a/uui-core/src/data/processing/__tests__/mocks/index.ts b/uui-core/src/data/processing/__tests__/mocks/index.ts
new file mode 100644
index 0000000000..701ac3c4c7
--- /dev/null
+++ b/uui-core/src/data/processing/__tests__/mocks/index.ts
@@ -0,0 +1,4 @@
+export * from './lazyLocationsDS';
+export * from './asyncLocationsDS';
+export * from './arrayLocationsDS';
+export * from './types';
diff --git a/uui-core/src/data/processing/__tests__/mocks/lazyLocationsDS.ts b/uui-core/src/data/processing/__tests__/mocks/lazyLocationsDS.ts
new file mode 100644
index 0000000000..cae5893811
--- /dev/null
+++ b/uui-core/src/data/processing/__tests__/mocks/lazyLocationsDS.ts
@@ -0,0 +1,76 @@
+import { demoData } from '@epam/uui-docs';
+import { getLazyDataSourceMock } from '@epam/uui-test-utils';
+
+import { LazyDataSourceProps } from '../../LazyDataSource';
+import { DataQueryFilter } from '../../../../types';
+import { runDataQuery } from '../../../querying';
+import { buildSearchTree } from './buildSearchTree';
+import { LocationItem } from './types';
+
+type Props<TItem, TId, TFilter> = Partial<LazyDataSourceProps<TItem, TId, TFilter>>;
+
+export function getLazyLocationsDS(props: Props<LocationItem, string, DataQueryFilter<LocationItem>>, delay?: number) {
+    return getLazyDataSourceMock(
+        demoData.locations,
+        {
+            getId: ({ id }) => id,
+            getParentId: ({ parentId }) => parentId,
+            getChildCount: ({ childCount }) => childCount,
+
+            ...props,
+        },
+        delay,
+    );
+}
+
+export function getLazyPagedLocationsDS(props: Props<LocationItem, string, DataQueryFilter<LocationItem>>) {
+    return getLazyLocationsDS({
+        api: async (request, ctx) => {
+            const range = request.page != null || request.pageSize != null ? undefined : request.range;
+            const data = runDataQuery(demoData.locations, ctx?.parent
+                ? { ...request, filter: { parentId: ctx.parentId, ...request.filter } as DataQueryFilter<LocationItem>, range }
+                : { ...request, filter: { parentId: { isNull: true }, ...request.filter } as DataQueryFilter<LocationItem>, range });
+
+            if (request.page != null || request.pageSize != null) {
+                const { page = 1, pageSize = 10 } = request;
+                const from = page - 1;
+                const items = data.items.slice(from * pageSize, (from + 1) * pageSize);
+                return {
+                    items,
+                    totalCount: data.items.length,
+                    count: request.page != null ? items.length : data.items.length,
+                    pageCount: Math.ceil(data.items.length / pageSize),
+                };
+            }
+
+            return data;
+        },
+        ...props,
+    });
+}
+
+export function getLazyTreeSearchLocationsDS(props: Props<LocationItem, string, DataQueryFilter<LocationItem>> = {}) {
+    return getLazyLocationsDS({
+        api: async ({ range, ...request }, ctx) => {
+            const { search } = request;
+            if (search && ctx?.parentId) { // >1 level, search
+                return Promise.resolve({ items: ctx?.parent?.children ?? [] });
+            } else if (search) {
+                const data = runDataQuery(demoData.locations, ctx?.parent
+                    ? { ...request, filter: { parentId: ctx.parentId, ...request.filter } as DataQueryFilter<LocationItem> }
+                    : { ...request, filter: request.filter as DataQueryFilter<LocationItem> });
+
+                const tree = buildSearchTree(data.items, demoData.locations);
+
+                return { items: tree };
+            }
+
+            const query = { ...request, filter: { parentId: ctx?.parentId ?? { isNull: true }, ...request?.filter } as DataQueryFilter<LocationItem> };
+            const data = runDataQuery(demoData.locations, query);
+
+            return { items: data.items };
+        },
+        ...props,
+        flattenSearchResults: false,
+    });
+}
diff --git a/uui-core/src/data/processing/__tests__/mocks/types.ts b/uui-core/src/data/processing/__tests__/mocks/types.ts
new file mode 100644
index 0000000000..9af1047de4
--- /dev/null
+++ b/uui-core/src/data/processing/__tests__/mocks/types.ts
@@ -0,0 +1,5 @@
+import { Location } from '@epam/uui-docs';
+
+export type LocationItem = Omit<Location, 'children'> & {
+    children?: LocationItem[];
+};
diff --git a/uui-core/src/data/processing/hooks/helpers.ts b/uui-core/src/data/processing/hooks/helpers.ts
deleted file mode 100644
index bd91f60ab1..0000000000
--- a/uui-core/src/data/processing/hooks/helpers.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ArrayListView, AsyncListView, LazyListView } from '../views';
-import { DataSourceState, IEditable } from '../../../types';
-import {
-    AsyncListProps, IView, LazyListProps, ListViewProps,
-} from './types';
-
-export const isLazyListViewProps = <TItem, TId, TFilter>(props: ListViewProps<TItem, TId, TFilter>): props is LazyListProps<TItem, TId, TFilter> => props.type === 'lazy';
-
-export const isAsyncListViewProps = <TItem, TId, TFilter>(props: ListViewProps<TItem, TId, TFilter>): props is AsyncListProps<TItem, TId, TFilter> =>
-    props.type === 'async';
-
-export const createView = <TItem, TId, TFilter, Props extends ListViewProps<TItem, TId, TFilter>>(
-    editable: IEditable<DataSourceState<TFilter, TId>>,
-    props: Props,
-): IView<TItem, TId, TFilter, Props> => {
-    if (isLazyListViewProps(props)) {
-        const { type, ...viewProps } = props;
-        return new LazyListView(editable, viewProps) as IView<TItem, TId, TFilter, Props>;
-    }
-
-    if (isAsyncListViewProps(props)) {
-        const { type, ...viewProps } = props;
-        return new AsyncListView(editable, viewProps);
-    }
-
-    const { type, ...viewProps } = props;
-    return new ArrayListView(editable, viewProps);
-};
-
-export const mergePropsWithDefaults = <TItem, TId, TFilter>(props: ListViewProps<TItem, TId, TFilter>): ListViewProps<TItem, TId, TFilter> => {
-    if (isLazyListViewProps(props)) {
-        return {
-            ...props,
-            legacyLoadDataBehavior: props.legacyLoadDataBehavior ?? false,
-        };
-    }
-
-    return props;
-};
diff --git a/uui-core/src/data/processing/hooks/index.ts b/uui-core/src/data/processing/hooks/index.ts
index 2f8694ecd0..0971127f9d 100644
--- a/uui-core/src/data/processing/hooks/index.ts
+++ b/uui-core/src/data/processing/hooks/index.ts
@@ -1,4 +1,3 @@
 export * from './useAsyncDataSource';
 export * from './useArrayDataSource';
 export * from './useLazyDataSource';
-export * from './useList';
diff --git a/uui-core/src/data/processing/hooks/types.ts b/uui-core/src/data/processing/hooks/types.ts
deleted file mode 100644
index fd873602d5..0000000000
--- a/uui-core/src/data/processing/hooks/types.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ArrayListViewProps, AsyncListViewProps, LazyListViewProps } from '../views';
-import { DataSourceState, IDataSourceView, IEditable } from '../../../types';
-
-export type PropsWithType<Props, Type extends string> = Props & { type: Type };
-
-export type LazyListProps<TItem, TId, TFilter> = PropsWithType<LazyListViewProps<TItem, TId, TFilter>, 'lazy'>;
-export type AsyncListProps<TItem, TId, TFilter> = PropsWithType<AsyncListViewProps<TItem, TId, TFilter>, 'async'>;
-export type ArrayListProps<TItem, TId, TFilter> = PropsWithType<ArrayListViewProps<TItem, TId, TFilter>, 'array'>;
-
-export type ListViewProps<TItem, TId, TFilter> = LazyListProps<TItem, TId, TFilter> | AsyncListProps<TItem, TId, TFilter> | ArrayListProps<TItem, TId, TFilter>;
-
-export type UnboxListProps<T extends ListViewProps<any, any, any>> = T extends LazyListProps<infer TItem, infer TId, infer TFilter>
-    ? LazyListProps<TItem, TId, TFilter>
-    : T extends AsyncListProps<infer TItem, infer TId, infer TFilter>
-        ? AsyncListProps<TItem, TId, TFilter>
-        : T extends ArrayListProps<infer TItem, infer TId, infer TFilter>
-            ? ArrayListProps<TItem, TId, TFilter>
-            : never;
-
-export interface IView<TItem, TId, TFilter, Props extends ListViewProps<TItem, TId, TFilter>> extends IDataSourceView<TItem, TId, TFilter> {
-    update(newValue: IEditable<DataSourceState<TFilter, TId>>, props: Props): void;
-}
-
-interface ListState<TId, TFilter> {
-    listState: DataSourceState<TFilter, TId>;
-    setListState: (listState: DataSourceState<TFilter, TId>) => void;
-}
-
-type ListProps<TItem, TId, TFilter> = Exclude<ListViewProps<TItem, TId, TFilter>, 'getId'> & {
-    getId: Exclude<ListViewProps<TItem, TId, TFilter>['getId'], undefined>;
-};
-
-export type UseListProps<TItem, TId, TFilter> = ListProps<TItem, TId, TFilter> &
-ListState<TId, TFilter> & {
-    /**
-         * If data loading has to be postponed, this flag has to be set to false.
-         * Changing the flag to `true` will trigger data loading.
-         * @default true
-         */
-    loadData?: boolean;
-};
-
-export type UseListOptionsProps<TItem, TId, TFilter, TProps extends ListViewProps<TItem, TId, TFilter>> = {
-    view: IView<TItem, TId, TFilter, TProps>;
-    listState: DataSourceState<TFilter, TId>;
-    props: TProps;
-};
diff --git a/uui-core/src/data/processing/hooks/useList.ts b/uui-core/src/data/processing/hooks/useList.ts
deleted file mode 100644
index 0628452f7a..0000000000
--- a/uui-core/src/data/processing/hooks/useList.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { useView } from './useView';
-import { ListViewProps, UnboxListProps, UseListOptionsProps, UseListProps } from './types';
-import { createView, mergePropsWithDefaults } from './helpers';
-
-function useListOptions<TItem, TId, TFilter, TProps extends ListViewProps<TItem, TId, TFilter>>({
-    view, listState, props,
-}: UseListOptionsProps<TItem, TId, TFilter, TProps>) {
-    const deps: unknown[] = [view, listState];
-    if (props.type === 'array') {
-        deps.push(
-            Array.isArray(props.items)
-                ? props.items.length
-                : props.items,
-        );
-    }
-
-    return useMemo(() => view.getListProps(), deps);
-}
-
-export function useList<TItem, TId, TFilter>(
-    { listState, setListState, loadData = true, ...props }: UseListProps<TItem, TId, TFilter>,
-    deps: any[],
-) {
-    const prevLoadDataRef = useRef(false);
-
-    useEffect(() => {
-        prevLoadDataRef.current = loadData;
-    });
-
-    const viewProps = mergePropsWithDefaults(props);
-
-    const view = useView<TItem, TId, TFilter, UnboxListProps<typeof props>>(
-        () => createView({ value: listState, onValueChange: setListState }, viewProps),
-        (current) => {
-            current.update({ value: listState, onValueChange: setListState }, props);
-        },
-        deps,
-    );
-
-    if (loadData) {
-        view.loadData();
-    }
-
-    const rows = view.getVisibleRows();
-    const listProps = useListOptions({ view, props, listState });
-    return {
-        rows,
-        listProps,
-        getSelectedRows: view.getSelectedRows,
-        selectAll: view.selectAll,
-        getById: view.getById,
-        reload: view.reload,
-    };
-}
diff --git a/uui-core/src/data/processing/hooks/useView.ts b/uui-core/src/data/processing/hooks/useView.ts
deleted file mode 100644
index aee9a38ffb..0000000000
--- a/uui-core/src/data/processing/hooks/useView.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { IView, ListViewProps } from './types';
-import { usePrevious } from '../../../hooks';
-
-export function useView<TItem, TId, TFilter, Props extends ListViewProps<TItem, TId, TFilter>>(
-    create: () => IView<TItem, TId, TFilter, Props>,
-    update: (instance: IView<TItem, TId, TFilter, Props>) => void,
-    deps: any[],
-): IView<TItem, TId, TFilter, Props> {
-    const viewRef = useRef<IView<TItem, TId, TFilter, Props>>(null);
-    const prevDeps = usePrevious(deps);
-
-    const isDepsChanged = prevDeps.length !== deps.length || prevDeps.some((devVal, index) => devVal !== deps[index]);
-
-    if (viewRef.current === null || isDepsChanged) {
-        viewRef.current = create();
-    }
-
-    const current = viewRef.current;
-
-    update(current);
-
-    useEffect(() => {
-        current && current.activate();
-        // Value here is memoized in closure at the time of its creation.
-        // So we are not destroying the value we just created above.
-        return () => current && current.deactivate();
-    }, deps);
-
-    return viewRef.current;
-}
diff --git a/uui-core/src/data/processing/index.ts b/uui-core/src/data/processing/index.ts
index 990aea36f0..44cc87d455 100644
--- a/uui-core/src/data/processing/index.ts
+++ b/uui-core/src/data/processing/index.ts
@@ -1,7 +1,6 @@
-export * from './views';
+export * from './views/exposed';
 export * from './hooks';
 export * from './ArrayDataSource';
 export * from './LazyDataSource';
 export * from './BaseDataSource';
 export * from './AsyncDataSource';
-export * from './ListApiCache';
diff --git a/uui-core/src/data/processing/views/ArrayListView.ts b/uui-core/src/data/processing/views/ArrayListView.ts
deleted file mode 100644
index 9832ad2e1a..0000000000
--- a/uui-core/src/data/processing/views/ArrayListView.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import {
-    DataRowProps, SortingOption, IEditable, DataSourceState, DataSourceListProps, IDataSourceView, BaseListViewProps,
-} from '../../../types';
-import { BaseListView } from './BaseListView';
-import { ITree, NOT_FOUND_RECORD, Tree } from './tree';
-
-export interface BaseArrayListViewProps<TItem, TId, TFilter> extends BaseListViewProps<TItem, TId, TFilter> {
-    /** A pure function that gets search value for each item.
-     Default: (item) => item.name.
-     */
-    getSearchFields?(item: TItem): string[];
-    /** A pure function that gets sorting value for current sorting value */
-    sortBy?(item: TItem, sorting: SortingOption): any;
-    /** A pure function that returns filter callback to be applied for each item.
-     * The callback should return true, if item passed the filter.
-     *  */
-    getFilter?(filter: TFilter): (item: TItem) => boolean;
-    /**
-     * Enables sorting of search results by relevance.
-     * - The highest priority has records, which have a full match with a search keyword.
-     * - The lower one has records, which have a search keyword at the 0 position, but not the full match.
-     * - Then, records, which contain a search keyword as a separate word, but not at the beginning.
-     * - And the lowest one - any other match of the search keyword.
-     *
-     * Example:
-     * - `search`: 'some'
-     * - `record string`: 'some word', `rank` = 4
-     * - `record string`: 'someone', `rank` = 3
-     * - `record string`: 'I know some guy', `rank` = 2
-     * - `record string`: 'awesome', `rank` = 1
-     *
-     * @default true
-     */
-    sortSearchByRelevance?: boolean;
-}
-
-export interface ArrayListViewProps<TItem, TId, TFilter> extends BaseArrayListViewProps<TItem, TId, TFilter> {
-    /** Data, which should be represented by a DataSource. */
-    items?: TItem[] | ITree<TItem, TId>;
-}
-
-export class ArrayListView<TItem, TId, TFilter = any> extends BaseListView<TItem, TId, TFilter> implements IDataSourceView<TItem, TId, TFilter> {
-    protected props: ArrayListViewProps<TItem, TId, TFilter>;
-    fullTree: ITree<TItem, TId>;
-    searchTree: ITree<TItem, TId>;
-    filteredTree: ITree<TItem, TId>;
-    sortedTree: ITree<TItem, TId>;
-    refreshCache: boolean;
-    constructor(protected editable: IEditable<DataSourceState<TFilter, TId>>, props: ArrayListViewProps<TItem, TId, TFilter>) {
-        const newProps = { ...props, sortSearchByRelevance: props.sortSearchByRelevance ?? true };
-        super(editable, newProps);
-        this.props = newProps;
-        this.visibleTree = Tree.blank(newProps);
-        this.update(editable, props);
-    }
-
-    public update({ value, onValueChange }: IEditable<DataSourceState<TFilter, TId>>, newProps: ArrayListViewProps<TItem, TId, TFilter>) {
-        const currentValue = { ...this.value };
-        this.value = value;
-        this.onValueChange = onValueChange;
-        const prevItems = this.props.items;
-        const newItems = newProps.items || this.props.items;
-        this.props = { ...newProps, items: newItems, sortSearchByRelevance: newProps.sortSearchByRelevance ?? true };
-
-        const prevTree = this.visibleTree;
-        if (this.props.items) {
-            // Legacy behavior support: there was no items prop, and the view is expected to keep items passes in constructor on updates
-            if (prevItems !== newItems || !this.fullTree) {
-                this.fullTree = Tree.create(this.props, this.props.items);
-                this.visibleTree = this.fullTree;
-                this.refreshCache = true;
-            }
-        }
-
-        if (this.fullTree && (prevTree !== this.visibleTree || this.isCacheIsOutdated(value, currentValue))) {
-            this.updateTree(currentValue, value);
-            this.updateCheckedLookup(this.value.checked);
-            this.updateSelectedLookup(this.value.selectedId);
-            this.rebuildRows();
-        } else {
-            if (value.focusedIndex !== currentValue.focusedIndex) {
-                this.updateFocusedItem();
-            }
-        }
-        this.updateRowOptions();
-    }
-
-    public reload() {
-        this.update(this.editable, { ...this.props, items: [] });
-        this.isForceReloading = true;
-        this._forceUpdate();
-    }
-
-    private isCacheIsOutdated(newValue: DataSourceState<TFilter, TId>, prevValue: DataSourceState<TFilter, TId>) {
-        return this.shouldRebuildTree(newValue, prevValue) || this.shouldRebuildRows(newValue, prevValue);
-    }
-
-    public getById = (id: TId, index: number) => {
-        // if originalTree is not created, but blank tree is defined, get item from it
-        const item = (this.fullTree ?? this.visibleTree).getById(id);
-        if (item === NOT_FOUND_RECORD) {
-            return this.getUnknownRow(id, index, []);
-        }
-
-        return this.getRowProps(item, index);
-    };
-
-    private updateFocusedItem = () => {
-        this.rows.forEach((row) => {
-            row.isFocused = this.value.focusedIndex === row.index;
-            return row;
-        });
-    };
-
-    private updateTree(prevValue: DataSourceState<TFilter, TId>, newValue: DataSourceState<TFilter, TId>) {
-        const { filter, search, sorting } = newValue;
-        const { getSearchFields, getFilter, sortBy, sortSearchByRelevance } = this.props;
-        let filterTreeIsUpdated = false;
-        if (this.filterWasChanged(prevValue, newValue) || !this.filteredTree || this.refreshCache) {
-            this.filteredTree = this.fullTree.filter({ filter, getFilter });
-            filterTreeIsUpdated = true;
-            this.refreshCache = false;
-        }
-
-        let sortingTreeIsUpdated = false;
-        if (this.sortingWasChanged(prevValue, newValue) || !this.sortedTree || filterTreeIsUpdated) {
-            this.sortedTree = this.filteredTree.sort({ sorting, sortBy });
-            sortingTreeIsUpdated = true;
-        }
-
-        if (this.searchWasChanged(prevValue, newValue) || !this.searchTree || sortingTreeIsUpdated) {
-            this.searchTree = this.sortedTree.search({ search, getSearchFields, sortSearchByRelevance });
-        }
-
-        this.visibleTree = this.searchTree;
-    }
-
-    public getVisibleRows = () => {
-        const rows = this.rows.slice(this.value.topIndex, this.getLastRecordIndex());
-        return this.getRowsWithPinned(rows);
-    };
-
-    public getListProps = (): DataSourceListProps => {
-        return {
-            rowsCount: this.rows.length,
-            knownRowsCount: this.rows.length,
-            exactRowsCount: this.rows.length,
-            totalCount: this.fullTree?.getTotalRecursiveCount() ?? 0,
-            selectAll: this.selectAll,
-        };
-    };
-
-    protected handleOnCheck = (rowProps: DataRowProps<TItem, TId>) => {
-        this.checkItems(!rowProps.isChecked, rowProps.id);
-    };
-
-    protected handleSelectAll = (checked: boolean) => {
-        this.checkItems(checked);
-    };
-
-    private checkItems(isChecked: boolean, checkedId?: TId) {
-        const checked = (this.value && this.value.checked) ?? [];
-        const updatedChecked = this.sortedTree.cascadeSelection(checked, checkedId, isChecked, {
-            cascade: this.props.cascadeSelection,
-            isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => {
-                let currentItem = item;
-                if (currentItem === NOT_FOUND_RECORD) {
-                    const row = this.getById(id, null);
-                    if (row.isLoading) {
-                        return false;
-                    }
-                    if (row.isUnknown) {
-                        return true;
-                    }
-
-                    currentItem = row.value;
-                }
-
-                const { isCheckable } = this.getRowProps(currentItem, null);
-                return isCheckable;
-            },
-        });
-
-        this.handleCheckedChange(updatedChecked);
-    }
-
-    protected getChildCount = (item: TItem): number | undefined => {
-        return this.visibleTree.getChildrenByParentId(this.props.getId(item)).length;
-    };
-
-    protected getLastRecordIndex = () => {
-        const lastIndex = this.value.topIndex + this.value.visibleCount;
-        const actualCount = this.visibleTree.getTotalRecursiveCount() ?? 0;
-
-        if (actualCount < lastIndex) return actualCount;
-        return lastIndex;
-    };
-}
diff --git a/uui-core/src/data/processing/views/AsyncListView.ts b/uui-core/src/data/processing/views/AsyncListView.ts
deleted file mode 100644
index b447025a2f..0000000000
--- a/uui-core/src/data/processing/views/AsyncListView.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { IEditable, DataSourceState, IDataSourceView } from '../../../types';
-import { ArrayListView, BaseArrayListViewProps } from './ArrayListView';
-import { NOT_FOUND_RECORD } from './tree';
-
-export interface AsyncListViewProps<TItem, TId, TFilter> extends BaseArrayListViewProps<TItem, TId, TFilter> {
-    /** A function to retrieve the data, asynchronously. This function usually performs a REST API call.
-     * Should return the array of items, which will be processed by dataSource.
-     * This api called only once during the initialization and assumed to return the full amount of data.
-     * For lazy loading cases, use LazyDataSource
-     * */
-    api(): Promise<TItem[]>;
-}
-
-export class AsyncListView<TItem, TId, TFilter = any> extends ArrayListView<TItem, TId, TFilter> implements IDataSourceView<TItem, TId, TFilter> {
-    private isloading: boolean = false;
-    private isloaded: boolean = false;
-    constructor(protected editable: IEditable<DataSourceState<TFilter, TId>>, protected props: AsyncListViewProps<TItem, TId, TFilter>) {
-        super(editable, props);
-        this.props = props;
-        this.update(editable, props);
-    }
-
-    public async loadData() {
-        if (this.isLoaded || this.isLoading) {
-            return;
-        }
-
-        this.isLoading = true;
-        return this.props.api().then((items) => {
-            this.isLoaded = true;
-            this.isLoading = false;
-            this.update({ value: this.value, onValueChange: this.onValueChange }, { ...this.props, items });
-            this.isReloading = false;
-
-            // While react 18 without concurrent mode, current force setState calls rerender immidiately
-            // without updated items in AsyncDataSource, which provides an old link to views with old trees.
-            // To prevent such a behavior, it is required to put a force update to the macrotask queue to be executed
-            // after the current Promise.
-            setTimeout(() => this._forceUpdate(), 0);
-
-            return items;
-        });
-    }
-
-    public reload = () => {
-        this.isLoading = false;
-        this.isLoaded = false;
-        super.reload();
-    };
-
-    public getVisibleRows = () => {
-        const from = this.value.topIndex;
-        const count = this.value.visibleCount;
-        const rows = [];
-        if (!this.isLoaded) {
-            while (rows.length < count) {
-                const index = from + rows.length;
-                const row = this.getLoadingRow('_loading_' + index, index);
-                rows.push(row);
-            }
-            return rows;
-        }
-
-        const visibleRows = this.rows.slice(this.value.topIndex, this.getLastRecordIndex());
-        return this.getRowsWithPinned(visibleRows);
-    };
-
-    public getListProps = () => {
-        if (!this.isLoaded) {
-            return {
-                rowsCount: this.value.visibleCount,
-                knownRowsCount: this.value.visibleCount,
-                exactRowsCount: this.value.visibleCount,
-                totalCount: this.value.visibleCount,
-                selectAll: this.selectAll,
-                isReloading: this.isReloading,
-            };
-        }
-
-        return {
-            rowsCount: this.rows.length,
-            knownRowsCount: this.rows.length,
-            exactRowsCount: this.rows.length,
-            totalCount: this.fullTree?.getTotalRecursiveCount(),
-            selectAll: this.selectAll,
-            isReloading: this.isReloading,
-        };
-    };
-
-    public getById = (id: TId, index: number) => {
-        if (this.isLoading && !this.isLoaded) {
-            return this.getLoadingRow('_loading_' + id, index, []);
-        }
-
-        // if originalTree is not created, but blank tree is defined, get item from it
-        const item = (this.fullTree ?? this.visibleTree).getById(id);
-
-        if (item === NOT_FOUND_RECORD) {
-            return this.getUnknownRow(id, index, []);
-        }
-
-        return this.getRowProps(item, index);
-    };
-
-    get isLoading(): boolean {
-        return this.isloading;
-    }
-
-    set isLoading(isLoading: boolean) {
-        this.isloading = isLoading;
-    }
-
-    get isLoaded(): boolean {
-        return this.isloaded;
-    }
-
-    set isLoaded(isloaded: boolean) {
-        this.isloaded = isloaded;
-    }
-}
diff --git a/uui-core/src/data/processing/views/BaseListView.tsx b/uui-core/src/data/processing/views/BaseListView.tsx
deleted file mode 100644
index 3e4f321f01..0000000000
--- a/uui-core/src/data/processing/views/BaseListView.tsx
+++ /dev/null
@@ -1,706 +0,0 @@
-import isEqual from 'lodash.isequal';
-import {
-    BaseListViewProps,
-    DataRowProps,
-    ICheckable,
-    IEditable,
-    SortingOption,
-    DataSourceState,
-    DataSourceListProps,
-    IDataSourceView,
-    DataRowPathItem,
-    CascadeSelectionTypes,
-    VirtualListRange,
-    ScrollToConfig,
-} from '../../../types';
-import { ITree, NOT_FOUND_RECORD } from './tree/ITree';
-import { flushSync } from 'react-dom';
-
-interface NodeStats {
-    isSomeCheckable: boolean;
-    isSomeChecked: boolean;
-    isAllChecked: boolean;
-    isSomeSelected: boolean;
-    hasMoreRows: boolean;
-    isSomeCheckboxEnabled: boolean;
-}
-
-export abstract class BaseListView<TItem, TId, TFilter> implements IDataSourceView<TItem, TId, TFilter> {
-    protected visibleTree: ITree<TItem, TId>;
-    protected rows: DataRowProps<TItem, TId>[] = [];
-    public value: DataSourceState<TFilter, TId> = {};
-    protected onValueChange: (value: DataSourceState<TFilter, TId>) => void;
-    protected checkedByKey: Record<string, boolean> = {};
-    protected someChildCheckedByKey: Record<string, boolean> = {};
-    protected selectedByKey: Record<string, boolean> = {};
-    protected someChildSelectedByKey: Record<string, boolean> = {};
-    protected pinned: Record<string, number> = {};
-    protected pinnedByParentId: Record<string, number[]> = {};
-    public selectAll?: ICheckable;
-    protected isDestroyed = false;
-    protected hasMoreRows = false;
-    protected isReloading: boolean = false;
-    protected isForceReloading: boolean = false;
-
-    abstract getById(id: TId, index: number): DataRowProps<TItem, TId>;
-    abstract getVisibleRows(): DataRowProps<TItem, TId>[];
-    abstract getListProps(): DataSourceListProps;
-    _forceUpdate = () => {
-        if (!this.isDestroyed) {
-            flushSync(() => { this.onValueChange({ ...this.value }); });
-        }
-    };
-
-    public deactivate() {
-        this.isDestroyed = true;
-    }
-
-    public activate() {
-        this.isDestroyed = false;
-    }
-
-    protected constructor(editable: IEditable<DataSourceState<TFilter, TId>>, protected props: BaseListViewProps<TItem, TId, TFilter>) {
-        this.onValueChange = editable.onValueChange;
-        this.value = editable.value;
-        this.updateCheckedLookup(this.value && this.value.checked);
-        this.updateSelectedLookup(this.value && this.value.selectedId);
-    }
-
-    protected updateRowOptions(): void {
-        if (this.props.getRowOptions) {
-            for (let n = 0; n < this.rows.length; n++) {
-                const row = this.rows[n];
-                if (!row.isLoading) {
-                    this.applyRowOptions(row);
-                }
-            }
-        }
-    }
-
-    protected buildParentsLookup(ids: TId[]) {
-        const itemIds = ids ?? [];
-        const idsByKey: Record<string, boolean> = {};
-        const someChildInIdsByKey: Record<string, boolean> = {};
-        for (let i = itemIds.length - 1; i >= 0; i--) {
-            const id = itemIds[i];
-            idsByKey[this.idToKey(id)] = true;
-            if (this.visibleTree && this.props.getParentId) {
-                const item = this.visibleTree.getById(id);
-                if (item !== NOT_FOUND_RECORD) {
-                    const parentId = this.props.getParentId(item);
-                    if (!someChildInIdsByKey[this.idToKey(parentId)]) {
-                        const parents = this.visibleTree.getParentIdsRecursive(id).reverse();
-                        for (const parent of parents) {
-                            if (someChildInIdsByKey[this.idToKey(parent)]) {
-                                break;
-                            }
-                            someChildInIdsByKey[this.idToKey(parent)] = true;
-                        }
-                    }
-                }
-            }
-        }
-        return { idsByKey, someChildInIdsByKey };
-    }
-
-    protected updateCheckedLookup(checked: TId[]) {
-        const { idsByKey, someChildInIdsByKey } = this.buildParentsLookup(checked);
-        this.checkedByKey = idsByKey;
-        this.someChildCheckedByKey = someChildInIdsByKey;
-    }
-
-    protected updateSelectedLookup(selectedId: null | TId) {
-        if (selectedId === null || selectedId === undefined) {
-            this.selectedByKey = {};
-            this.someChildSelectedByKey = {};
-            return;
-        }
-        const { idsByKey, someChildInIdsByKey } = this.buildParentsLookup([selectedId]);
-        this.selectedByKey = idsByKey;
-        this.someChildSelectedByKey = someChildInIdsByKey;
-    }
-
-    protected handleCheckedChange(checked: TId[]) {
-        this.onValueChange({ ...this.value, checked });
-    }
-
-    protected idToKey(id: TId) {
-        return typeof id === 'object' ? JSON.stringify(id) : `${id}`;
-    }
-
-    protected keyToId(key: string) {
-        try {
-            return JSON.parse(key);
-        } catch (e) {
-            return key;
-        }
-    }
-
-    protected setObjectFlag(object: any, key: string, value: boolean) {
-        return { ...object, [key]: value };
-    }
-
-    public getSelectedRows = ({ topIndex = 0, visibleCount }: VirtualListRange = {}) => {
-        let checked: TId[] = [];
-        if (this.value.selectedId !== null && this.value.selectedId !== undefined) {
-            checked = [this.value.selectedId];
-        } else if (this.value.checked) {
-            checked = this.value.checked;
-        }
-
-        if (visibleCount !== undefined) {
-            checked = checked.slice(topIndex, topIndex + visibleCount);
-        }
-        const selectedRows: Array<DataRowProps<TItem, TId>> = [];
-        const missingIds: TId[] = [];
-        checked.forEach((id, n) => {
-            const row = this.getById(id, topIndex + n);
-            if (row.isUnknown) {
-                missingIds.push(id);
-            }
-            selectedRows.push(row);
-        });
-        if (missingIds.length) {
-            console.error(`DataSource can't find selected/checked items with following IDs: ${missingIds.join(', ')}.
-                Read more here: https://github.com/epam/UUI/issues/89`);
-        }
-
-        return selectedRows;
-    };
-
-    protected handleOnCheck = (rowProps: DataRowProps<TItem, TId>) => {
-        let checked = (this.value && this.value.checked) || [];
-        if (rowProps.isChecked) {
-            checked = checked.filter((id) => id !== rowProps.id);
-            this.handleCheckedChange(checked);
-        } else {
-            checked = [...checked, rowProps.id];
-            this.handleCheckedChange(checked);
-        }
-    };
-
-    protected isSelectAllEnabled() {
-        return this.props.selectAll === undefined ? true : this.props.selectAll;
-    }
-
-    protected handleOnSelect = (rowProps: DataRowProps<TItem, TId>) => {
-        this.onValueChange({
-            ...this.value,
-            selectedId: rowProps.id,
-        });
-    };
-
-    protected handleOnFocus = (focusIndex: number) => {
-        if (this.onValueChange) {
-            this.onValueChange({
-                ...this.value,
-                focusedIndex: focusIndex,
-            });
-        }
-    };
-
-    protected handleOnFold = (rowProps: DataRowProps<TItem, TId>) => {
-        if (this.onValueChange) {
-            const fold = !rowProps.isFolded;
-            const indexToScroll = rowProps.index - (rowProps.path?.length ?? 0);
-            const scrollTo: ScrollToConfig = fold && rowProps.isPinned
-                ? { index: indexToScroll, align: 'nearest' }
-                : this.value.scrollTo;
-
-            this.onValueChange({
-                ...this.value,
-                scrollTo,
-                folded: this.setObjectFlag(this.value && this.value.folded, rowProps.rowKey, fold),
-            });
-        }
-    };
-
-    protected handleSort = (sorting: SortingOption) => {
-        if (this.onValueChange) {
-            this.onValueChange({
-                ...this.value,
-                sorting: [sorting],
-            });
-        }
-    };
-
-    protected isFoldedByDefault(state: DataSourceState<TFilter, TId>) {
-        return state.foldAll;
-    }
-
-    protected isFolded(item: TItem) {
-        const searchIsApplied = !!this.value?.search;
-        if (searchIsApplied) {
-            return false;
-        }
-
-        const folded = this.value.folded || {};
-        const key = this.idToKey(this.props.getId(item));
-        if (folded[key] != null) {
-            return folded[key];
-        }
-
-        if (this.props.isFoldedByDefault) {
-            return this.props.isFoldedByDefault(item, this.value);
-        }
-
-        return this.isFoldedByDefault(this.value) ?? true;
-    }
-
-    protected getRowProps(item: TItem, index: number): DataRowProps<TItem, TId> {
-        const id = this.props.getId(item);
-        const key = this.idToKey(id);
-        const path = this.visibleTree.getPathById(id);
-        const parentId = path.length > 0 ? path[path.length - 1].id : undefined;
-        const rowProps = {
-            id,
-            parentId,
-            key,
-            rowKey: key,
-            index,
-            value: item,
-            depth: path.length,
-            path,
-        } as DataRowProps<TItem, TId>;
-
-        this.applyRowOptions(rowProps);
-
-        return rowProps;
-    }
-
-    protected applyRowOptions(row: DataRowProps<TItem, TId>) {
-        const externalRowOptions = (this.props.getRowOptions && !row.isLoading)
-            ? this.props.getRowOptions(row.value, row.index)
-            : {};
-
-        const rowOptions = { ...this.props.rowOptions, ...externalRowOptions };
-
-        const estimatedChildrenCount = this.getEstimatedChildrenCount(row.id);
-        const isFlattenSearch = this.isFlattenSearch?.() ?? false;
-
-        row.isFoldable = false;
-        if (!isFlattenSearch && estimatedChildrenCount !== undefined && estimatedChildrenCount > 0) {
-            row.isFoldable = true;
-        }
-
-        const isCheckboxEnabled = rowOptions && rowOptions.checkbox && rowOptions.checkbox.isVisible;
-        const isCheckable = isCheckboxEnabled && !rowOptions.checkbox.isDisabled;
-        const isSelectable = rowOptions && rowOptions.isSelectable;
-        if (rowOptions != null) {
-            const rowValue = row.value;
-            Object.assign(row, rowOptions);
-            row.value = rowOptions.value ?? rowValue;
-        }
-        row.isFocused = this.value.focusedIndex === row.index;
-        row.isChecked = this.isRowChecked(row);
-        row.isSelected = !!this.selectedByKey[row.rowKey];
-        row.isCheckable = isCheckable;
-        row.onCheck = isCheckable && this.handleOnCheck;
-        row.onSelect = rowOptions && rowOptions.isSelectable && this.handleOnSelect;
-        row.onFocus = (isSelectable || isCheckable || row.isFoldable) && this.handleOnFocus;
-        row.isChildrenChecked = !!this.someChildCheckedByKey[this.idToKey(row.id)];
-        row.isChildrenSelected = !!this.someChildSelectedByKey[this.idToKey(row.id)];
-    }
-
-    private isRowChecked(row: DataRowProps<TItem, TId>) {
-        const exactCheck = !!this.checkedByKey[row.rowKey];
-        if (exactCheck || this.props.cascadeSelection !== CascadeSelectionTypes.IMPLICIT) {
-            return exactCheck;
-        }
-
-        const { path } = row;
-        return path.some(({ id }) => !!this.checkedByKey[this.idToKey(id)]);
-    }
-
-    protected getLoadingRow(id: any, index: number = 0, path: DataRowPathItem<TId, TItem>[] = null): DataRowProps<TItem, TId> {
-        const rowProps = this.getEmptyRowProps(id, index, path);
-        return {
-            ...rowProps,
-            checkbox: { ...rowProps.checkbox, isDisabled: true },
-            isLoading: true,
-        };
-    }
-
-    protected getUnknownRow(id: any, index: number = 0, path: DataRowPathItem<TId, TItem>[] = null): DataRowProps<TItem, TId> {
-        const emptyRowProps = this.getEmptyRowProps(id, index, path);
-        const rowOptions = this.props.rowOptions;
-        const checkbox = (rowOptions?.checkbox?.isVisible || emptyRowProps.isChecked) ? { isVisible: true, isDisabled: false } : undefined;
-        return {
-            ...emptyRowProps,
-            checkbox,
-            onCheck: checkbox?.isVisible ? this.handleOnCheck : undefined,
-            isUnknown: true,
-        };
-    }
-
-    private getEmptyRowProps(id: any, index: number = 0, path: DataRowPathItem<TId, TItem>[] = null): DataRowProps<TItem, TId> {
-        const rowOptions = this.props.rowOptions;
-        const checked = this.value?.checked ?? [];
-        const isChecked = checked.includes(id);
-        return {
-            id,
-            rowKey: this.idToKey(id),
-            value: undefined,
-            index,
-            depth: path ? path.length : 0,
-            path: path ?? [],
-            checkbox: rowOptions?.checkbox?.isVisible && { isVisible: true, isDisabled: true },
-            isChecked,
-        };
-    }
-
-    // Extracts a flat list of currently visible rows from the tree
-    protected rebuildRows() {
-        const rows: DataRowProps<TItem, TId>[] = [];
-        const pinned: Record<string, number> = {};
-        const pinnedByParentId: Record<string, number[]> = {};
-
-        const lastIndex = this.getLastRecordIndex();
-
-        const isFlattenSearch = this.isFlattenSearch?.() ?? false;
-        const iterateNode = (
-            parentId: TId,
-            appendRows: boolean, // Will be false, if we are iterating folded nodes.
-        ): NodeStats => {
-            let currentLevelRows = 0;
-            let stats = this.getDefaultNodeStats();
-
-            const layerRows: DataRowProps<TItem, TId>[] = [];
-            const nodeInfo = this.visibleTree.getNodeInfo(parentId);
-
-            const ids = this.visibleTree.getChildrenIdsByParentId(parentId);
-
-            for (let n = 0; n < ids.length; n++) {
-                const id = ids[n];
-                const item = this.visibleTree.getById(id);
-                if (item === NOT_FOUND_RECORD) {
-                    continue;
-                }
-
-                const row = this.getRowProps(item, rows.length);
-                if (appendRows && (!this.isPartialLoad() || (this.isPartialLoad() && rows.length < lastIndex))) {
-                    rows.push(row);
-                    layerRows.push(row);
-                    currentLevelRows++;
-                }
-
-                stats = this.getRowStats(row, stats);
-                row.isLastChild = n === ids.length - 1 && nodeInfo.count === ids.length;
-                row.indent = isFlattenSearch ? 0 : row.path.length + 1;
-                const estimatedChildrenCount = this.getEstimatedChildrenCount(id);
-                if (!isFlattenSearch && estimatedChildrenCount !== undefined) {
-                    const childrenIds = this.visibleTree.getChildrenIdsByParentId(id);
-
-                    if (estimatedChildrenCount > 0) {
-                        row.isFolded = this.isFolded(item);
-                        row.onFold = row.isFoldable && this.handleOnFold;
-
-                        if (childrenIds.length > 0) {
-                            // some children are loaded
-                            const childStats = iterateNode(id, appendRows && !row.isFolded);
-                            row.isChildrenChecked = row.isChildrenChecked || childStats.isSomeChecked;
-                            row.isChildrenSelected = row.isChildrenSelected || childStats.isSomeSelected;
-                            stats = this.mergeStats(stats, childStats);
-                            // while searching and no children in visible tree, no need to append placeholders.
-                        } else if (!this.value.search && !row.isFolded && appendRows) {
-                            // children are not loaded
-                            const parentsWithRow = [...row.path, this.visibleTree.getPathItem(item)];
-                            for (let m = 0; m < estimatedChildrenCount && rows.length < lastIndex; m++) {
-                                const loadingRow = this.getLoadingRow('_loading_' + rows.length, rows.length, parentsWithRow);
-                                loadingRow.indent = parentsWithRow.length + 1;
-                                loadingRow.isLastChild = m === estimatedChildrenCount - 1;
-                                rows.push(loadingRow);
-                                currentLevelRows++;
-                            }
-                        }
-                    }
-                }
-
-                row.isPinned = row.pin?.(row) ?? false;
-                if (row.isPinned) {
-                    pinned[this.idToKey(row.id)] = row.index;
-                    if (!pinnedByParentId[this.idToKey(row.parentId)]) {
-                        pinnedByParentId[this.idToKey(row.parentId)] = [];
-                    }
-                    pinnedByParentId[this.idToKey(row.parentId)]?.push(row.index);
-                }
-            }
-
-            const pathToParent = this.visibleTree.getPathById(parentId);
-            const parent = this.visibleTree.getById(parentId);
-            const parentPathItem = parent !== NOT_FOUND_RECORD ? [this.visibleTree.getPathItem(parent)] : [];
-            const path = parentId ? [...pathToParent, ...parentPathItem] : pathToParent;
-            if (appendRows) {
-                let missingCount: number = this.getMissingRecordsCount(parentId, rows.length, currentLevelRows);
-                if (missingCount > 0) {
-                    stats.hasMoreRows = true;
-                }
-
-                // Append loading rows, stop at lastIndex (last row visible)
-                while (rows.length < lastIndex && missingCount > 0) {
-                    const row = this.getLoadingRow('_loading_' + rows.length, rows.length, path);
-                    rows.push(row);
-                    layerRows.push(row);
-                    currentLevelRows++;
-                    missingCount--;
-                }
-            }
-
-            const isListFlat = path.length === 0 && !layerRows.some((r) => r.isFoldable);
-            if (isListFlat || isFlattenSearch) {
-                layerRows.forEach((r) => {
-                    r.indent = 0;
-                });
-            }
-
-            return stats;
-        };
-
-        const rootStats = iterateNode(undefined, true);
-
-        if (rootStats.isSomeCheckable && this.isSelectAllEnabled()) {
-            this.selectAll = {
-                value: rootStats.isSomeCheckboxEnabled ? rootStats.isAllChecked : false,
-                onValueChange: this.handleSelectAll,
-                indeterminate: this.value.checked && this.value.checked.length > 0 && !rootStats.isAllChecked,
-            };
-        } else if (this.visibleTree.getRootIds().length === 0 && this.props.rowOptions?.checkbox?.isVisible && this.isSelectAllEnabled()) {
-            // Nothing loaded yet, but we guess that something is checkable. Add disabled checkbox for less flicker.
-            this.selectAll = {
-                value: false,
-                onValueChange: () => {},
-                isDisabled: true,
-                indeterminate: this.value.checked?.length > 0,
-            };
-        } else {
-            this.selectAll = null;
-        }
-
-        this.rows = rows;
-        this.pinned = pinned;
-        this.pinnedByParentId = pinnedByParentId;
-        this.hasMoreRows = rootStats.hasMoreRows;
-    }
-
-    private getLastPinnedBeforeRow(row: DataRowProps<TItem, TId>, pinnedIndexes: number[]) {
-        const isBeforeOrEqualToRow = (pinnedRowIndex: number) => {
-            const pinnedRow = this.rows[pinnedRowIndex];
-            if (!pinnedRow) {
-                return false;
-            }
-            return row.index >= pinnedRow.index;
-        };
-
-        let foundRowIndex = -1;
-        for (const pinnedRowIndex of pinnedIndexes) {
-            if (isBeforeOrEqualToRow(pinnedRowIndex)) {
-                foundRowIndex = pinnedRowIndex;
-            } else if (foundRowIndex !== -1) {
-                break;
-            }
-        }
-
-        if (foundRowIndex === -1) {
-            return undefined;
-        }
-        return foundRowIndex;
-    }
-
-    protected getLastHiddenPinnedByParent(row: DataRowProps<TItem, TId>, alreadyAdded: TId[]) {
-        const pinnedIndexes = this.pinnedByParentId[this.idToKey(row.parentId)];
-        if (!pinnedIndexes || !pinnedIndexes.length) {
-            return undefined;
-        }
-
-        const lastPinnedBeforeRow = this.getLastPinnedBeforeRow(row, pinnedIndexes);
-        if (lastPinnedBeforeRow === undefined) {
-            return undefined;
-        }
-
-        const lastHiddenPinned = this.rows[lastPinnedBeforeRow];
-        if (!lastHiddenPinned || alreadyAdded.includes(lastHiddenPinned.id)) {
-            return undefined;
-        }
-
-        return lastHiddenPinned;
-    }
-
-    protected getRowsWithPinned(rows: DataRowProps<TItem, TId>[]) {
-        if (!rows.length) return [];
-
-        const rowsWithPinned: DataRowProps<TItem, TId>[] = [];
-        const alreadyAdded = rows.map(({ id }) => id);
-        const [firstRow] = rows;
-        firstRow.path.forEach((item) => {
-            const pinnedIndex = this.pinned[this.idToKey(item.id)];
-            if (pinnedIndex === undefined) return;
-
-            const parent = this.rows[pinnedIndex];
-            if (!parent || alreadyAdded.includes(parent.id)) return;
-
-            rowsWithPinned.push(parent);
-            alreadyAdded.push(parent.id);
-        });
-
-        const lastHiddenPinned = this.getLastHiddenPinnedByParent(firstRow, alreadyAdded);
-        if (lastHiddenPinned) {
-            rowsWithPinned.push(lastHiddenPinned);
-        }
-
-        return rowsWithPinned.concat(rows);
-    }
-
-    private getEstimatedChildrenCount = (id: TId) => {
-        if (id === undefined) return undefined;
-
-        const item = this.visibleTree.getById(id);
-        if (item === NOT_FOUND_RECORD) return undefined;
-
-        const childCount = this.getChildCount(item);
-        if (childCount === undefined) return undefined;
-
-        const nodeInfo = this.visibleTree.getNodeInfo(id);
-        if (nodeInfo?.count !== undefined) {
-            // nodes are already loaded, and we know the actual count
-            return nodeInfo.count;
-        }
-
-        return childCount;
-    };
-
-    private getMissingRecordsCount(id: TId, totalRowsCount: number, loadedChildrenCount: number) {
-        const nodeInfo = this.visibleTree.getNodeInfo(id);
-
-        const estimatedChildCount = this.getEstimatedChildrenCount(id);
-
-        // Estimate how many more nodes there are at current level, to put 'loading' placeholders.
-        if (nodeInfo.count !== undefined) {
-            // Exact count known
-            return nodeInfo.count - loadedChildrenCount;
-        }
-
-        const lastIndex = this.getLastRecordIndex();
-        // estimatedChildCount = undefined for top-level rows only.
-        if (id === undefined && totalRowsCount < lastIndex) {
-            return lastIndex - totalRowsCount; // let's put placeholders down to the bottom of visible list
-        }
-
-        if (estimatedChildCount > loadedChildrenCount) {
-            // According to getChildCount (put into estimatedChildCount), there are more rows on this level
-            return estimatedChildCount - loadedChildrenCount;
-        }
-
-        // We have a bad estimate - it even less that actual items we have
-        // This would happen is getChildCount provides a guess count, and we scroll thru children past this count
-        // let's guess we have at least 1 item more than loaded
-        return 1;
-    }
-
-    private getDefaultNodeStats = () => ({
-        isSomeCheckable: false,
-        isSomeChecked: false,
-        isAllChecked: true,
-        isSomeSelected: false,
-        hasMoreRows: false,
-        isSomeCheckboxEnabled: false,
-    });
-
-    private getRowStats = (row: DataRowProps<TItem, TId>, actualStats: NodeStats): NodeStats => {
-        let {
-            isSomeCheckable, isSomeChecked, isAllChecked, isSomeSelected, isSomeCheckboxEnabled,
-        } = actualStats;
-
-        if (row.checkbox) {
-            isSomeCheckable = true;
-            if (row.isChecked || row.isChildrenChecked) {
-                isSomeChecked = true;
-            }
-            if (!row.checkbox.isDisabled || isSomeCheckboxEnabled) {
-                isSomeCheckboxEnabled = true;
-            }
-        
-            const isImplicitCascadeSelection = this.props.cascadeSelection === CascadeSelectionTypes.IMPLICIT;
-            if (
-                (!row.isChecked && !row.checkbox.isDisabled && !isImplicitCascadeSelection)
-                || (row.parentId === undefined && !row.isChecked && isImplicitCascadeSelection)
-            ) {
-                isAllChecked = false;
-            }
-        }
-
-        if (row.isSelected || row.isChildrenSelected) {
-            isSomeSelected = true;
-        }
-
-        return {
-            ...actualStats, isSomeCheckable, isSomeChecked, isAllChecked, isSomeSelected, isSomeCheckboxEnabled,
-        };
-    };
-
-    public getSelectedRowsCount = () => {
-        const count = this.value.checked?.length ?? 0;
-        if (!count) {
-            return (this.value.selectedId !== undefined && this.value.selectedId !== null) ? 1 : 0;
-        }
-
-        return count;
-    };
-
-    public clearAllChecked = () => {
-        this.handleSelectAll(false);
-    };
-
-    private mergeStats = (parentStats: NodeStats, childStats: NodeStats) => ({
-        ...parentStats,
-        isSomeSelected: parentStats.isSomeSelected || childStats.isSomeSelected,
-        isSomeCheckable: parentStats.isSomeCheckable || childStats.isSomeCheckable,
-        isSomeChecked: parentStats.isSomeChecked || childStats.isSomeChecked,
-        isAllChecked: parentStats.isAllChecked && childStats.isAllChecked,
-        isSomeCheckboxEnabled: parentStats.isSomeCheckboxEnabled || childStats.isSomeCheckboxEnabled,
-        hasMoreRows: parentStats.hasMoreRows || childStats.hasMoreRows,
-    });
-
-    protected canBeSelected = (row: DataRowProps<TItem, TId>) => row.checkbox && row.checkbox.isVisible && !row.checkbox.isDisabled;
-    protected getLastRecordIndex = () => this.value.topIndex + this.value.visibleCount;
-    protected shouldRebuildTree = (prevValue: DataSourceState<TFilter, TId>, newValue: DataSourceState<TFilter, TId>) =>
-        this.searchWasChanged(prevValue, newValue)
-        || this.sortingWasChanged(prevValue, newValue)
-        || this.filterWasChanged(prevValue, newValue)
-        || newValue?.page !== prevValue?.page
-        || newValue?.pageSize !== prevValue?.pageSize;
-
-    protected shouldRebuildRows = (prevValue?: DataSourceState<TFilter, TId>, newValue?: DataSourceState<TFilter, TId>) =>
-        !prevValue
-        || this.checkedWasChanged(prevValue, newValue)
-        || newValue?.selectedId !== prevValue?.selectedId
-        || newValue?.folded !== prevValue?.folded;
-
-    protected checkedWasChanged = (prevValue?: DataSourceState<TFilter, TId>, newValue?: DataSourceState<TFilter, TId>) => 
-        (prevValue?.checked?.length ?? 0) !== (newValue?.checked?.length ?? 0)
-        || (prevValue.checked && newValue.checked && !isEqual(newValue?.checked, prevValue?.checked));
-    
-    protected sortingWasChanged = (prevValue?: DataSourceState<TFilter, TId>, newValue?: DataSourceState<TFilter, TId>) => 
-        !isEqual(newValue?.sorting, prevValue?.sorting);
-
-    protected filterWasChanged = (prevValue: DataSourceState<TFilter, TId>, newValue?: DataSourceState<TFilter, TId>) =>
-        !isEqual(newValue?.filter, prevValue?.filter);
-
-    protected searchWasChanged = (prevValue?: DataSourceState<TFilter, TId>, newValue?: DataSourceState<TFilter, TId>) => 
-        newValue?.search !== prevValue?.search;
-    
-    protected abstract handleSelectAll(checked: boolean): void;
-    protected abstract getChildCount(item: TItem): number | undefined;
-    protected isFlattenSearch = () => false;
-    protected isPartialLoad = () => false;
-    public loadData() {}
-    public abstract reload(): void;
-
-    public getConfig() {
-        return {
-            complexIds: this.props.complexIds,
-            cascadeSelection: this.props.cascadeSelection,
-            selectAll: this.props.selectAll,
-            backgroundReload: this.props.backgroundReload,
-        };
-    }
-}
diff --git a/uui-core/src/data/processing/views/LazyListView.ts b/uui-core/src/data/processing/views/LazyListView.ts
deleted file mode 100644
index 1ee3b78b99..0000000000
--- a/uui-core/src/data/processing/views/LazyListView.ts
+++ /dev/null
@@ -1,563 +0,0 @@
-import {
-    DataRowProps,
-    IEditable,
-    DataSourceState,
-    LazyDataSourceApi,
-    DataSourceListProps,
-    IDataSourceView,
-    BaseListViewProps,
-    CascadeSelectionTypes,
-} from '../../../types';
-import isEqual from 'lodash.isequal';
-import { BaseListView } from './BaseListView';
-import { ListApiCache } from '../ListApiCache';
-import {
-    Tree, LoadTreeOptions, ITree, ROOT_ID, NOT_FOUND_RECORD,
-} from './tree';
-
-export interface LazyListViewProps<TItem, TId, TFilter> extends BaseListViewProps<TItem, TId, TFilter> {
-    /**
-     * A function to retrieve the data, asynchronously.
-     * This function usually performs a REST API call.
-     * API is used to retrieve lists of items.
-     * It is expected to:
-     * - be able to handle paging (via from/count params)
-     * - be able to retrieve specific items by the list of their ids
-     * - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)
-     */
-    api: LazyDataSourceApi<TItem, TId, TFilter>;
-
-    /**
-     * Should return number of children of the item.
-     * If it returns > 0, the item is assumed to have children and to be foldable.
-     * Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.
-     * In this case, you can implement getChildCount as (i) => i.childCount.
-     *
-     * If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).
-     * Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode.
-     */
-    getChildCount?(item: TItem): number;
-
-    /**
-     * A filter to pass to API.
-     * Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.
-     * Use this prop if you need to apply some filter in any case.
-     * Prefer to use filter in the DataSourceState for end-user editable filters.
-     */
-    filter?: TFilter;
-
-    /**
-     * Defines how to fetch children:
-     * sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.
-     * parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.
-     *      Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy.
-     */
-    fetchStrategy?: 'sequential' | 'parallel';
-
-    /**
-     * Falls back to plain list from tree, if there's search.
-     * Default is true.
-     *
-     * If enabled, and search is active:
-     * - API will be called with parentId and parent undefined
-     * - getChildCount is ignored, all nodes are assumed to have no children
-     *
-     * See more here: https://github.com/epam/UUI/issues/8
-     */
-    flattenSearchResults?: boolean;
-
-    /**
-     * This option is added for the purpose of supporting legacy behavior of fetching data
-     * on `getVisibleRows` and `getListProps`, not to break users' own implementation of dataSources.
-     * @default true
-     */
-    legacyLoadDataBehavior?: boolean;
-}
-
-interface LoadResult<TItem, TId> {
-    isUpdated: boolean;
-    isOutdated: boolean;
-    tree: ITree<TItem, TId>;
-}
-
-export class LazyListView<TItem, TId, TFilter = any> extends BaseListView<TItem, TId, TFilter> implements IDataSourceView<TItem, TId, TFilter> {
-    public props: LazyListViewProps<TItem, TId, TFilter>;
-    public value: DataSourceState<TFilter, TId> = null;
-    private cache: ListApiCache<TItem, TId, TFilter>;
-    private isUpdatePending = false;
-    private loadedValue: DataSourceState<TFilter, TId> = null;
-    private loadedProps: LazyListViewProps<TItem, TId, TFilter>;
-    private fullTree: ITree<TItem, TId> = null;
-    private listProps?: DataSourceListProps;
-
-    constructor(
-        editable: IEditable<DataSourceState<TFilter, TId>>,
-        { legacyLoadDataBehavior = true, ...props }: LazyListViewProps<TItem, TId, TFilter>,
-        cache?: ListApiCache<TItem, TId, TFilter>,
-    ) {
-        const newProps = { legacyLoadDataBehavior, ...props };
-        super(editable, newProps);
-        this.props = this.applyDefaultsToProps(newProps);
-        this.visibleTree = Tree.blank<TItem, TId>(newProps);
-        this.fullTree = Tree.blank<TItem, TId>(newProps);
-        this.cache = cache;
-        if (!this.cache) {
-            this.cache = new ListApiCache({
-                api: this.props.api,
-                getId: this.props.getId,
-                onUpdate: () => this._forceUpdate(),
-            });
-        }
-        this.update(editable, this.props);
-    }
-
-    private defaultGetId = (i: any) => i.id;
-    protected applyDefaultsToProps(props: LazyListViewProps<TItem, TId, TFilter>): LazyListViewProps<TItem, TId, TFilter> {
-        const newProps = {
-            ...props,
-            getId: props.getId ?? this.defaultGetId,
-            flattenSearchResults: props.flattenSearchResults ?? true,
-        };
-
-        if (newProps.getChildCount && (newProps.cascadeSelection || newProps.flattenSearchResults) && !newProps.getParentId) {
-            console.warn('LazyListView: getParentId prop is mandatory if cascadeSelection or flattenSearchResults are enabled');
-        }
-
-        return newProps;
-    }
-
-    public update(
-        { value, onValueChange }: IEditable<DataSourceState<TFilter, TId>>,
-        props: LazyListViewProps<TItem, TId, TFilter>,
-    ): void {
-        this.isUpdatePending = true;
-        const { checked: prevChecked, selectedId: prevSelectedId } = this.value ?? {};
-        // We assume value to be immutable. However, we can't guarantee this.
-        // Let's shallow-copy value to survive at least simple cases when it's mutated outside
-        this.value = { topIndex: 0, visibleCount: 20, ...value };
-        this.onValueChange = onValueChange;
-
-        if (!isEqual(value?.checked, prevChecked)) {
-            this.updateCheckedLookup(value.checked);
-        }
-        if (value?.selectedId !== prevSelectedId) {
-            this.updateSelectedLookup(value.selectedId);
-        }
-
-        this.props = {
-            ...props,
-            legacyLoadDataBehavior: props.legacyLoadDataBehavior ?? this.props.legacyLoadDataBehavior,
-            flattenSearchResults: this.props.flattenSearchResults ?? props.flattenSearchResults ?? true,
-        };
-
-        this.updateRowOptions();
-    }
-
-    public loadData(): void {
-        if (!this.isUpdatePending) {
-            return;
-        }
-
-        const prevValue = this.loadedValue;
-        const prevProps = this.loadedProps;
-        this.loadedValue = this.value;
-        this.loadedProps = this.props;
-        this.isUpdatePending = false;
-
-        let completeReset = false;
-        const shouldReloadData = this.isForceReloading
-            || !isEqual(this.props?.filter, prevProps?.filter)
-            || this.shouldRebuildTree(prevValue, this.value);
-
-        if (prevValue == null || prevProps == null || shouldReloadData) {
-            this.isReloading = true;
-            this.visibleTree = this.visibleTree.clearStructure();
-            completeReset = true;
-        }
-
-        const isFoldingChanged = !prevValue || this.value.folded !== prevValue.folded;
-        const moreRowsNeeded = this.areMoreRowsNeeded(prevValue, this.value);
-        if (completeReset || this.shouldRebuildRows(prevValue, this.value)) {
-            this.updateCheckedLookup(this.value.checked);
-            this.updateSelectedLookup(this.value.selectedId);
-        }
-
-        const shouldShowPlacehodlers = !shouldReloadData
-            || (shouldReloadData && !this.props.backgroundReload)
-            || this.isForceReloading;
-
-        if (
-            // on filters change skeleton should not appear
-            (completeReset && shouldShowPlacehodlers)
-            || this.shouldRebuildRows(prevValue, this.value)
-            || isFoldingChanged
-            || moreRowsNeeded
-        ) {
-            this.rebuildRows();
-        }
-
-        if (!prevValue || this.value.focusedIndex !== prevValue.focusedIndex) {
-            this.updateFocusedItem();
-        }
-
-        if (completeReset || isFoldingChanged || moreRowsNeeded) {
-            this.isForceReloading = false;
-
-            this.loadMissing(completeReset)
-                .then(({ isUpdated, isOutdated }) => {
-                    if (isUpdated && !isOutdated) {
-                        this.updateCheckedLookup(this.value.checked);
-                        this.updateSelectedLookup(this.value.selectedId);
-                        this.rebuildRows();
-                    }
-                }).finally(() => {
-                    this.isReloading = false;
-                    this._forceUpdate();
-                });
-        }
-    }
-
-    private updateFocusedItem() {
-        this.rows.forEach((row) => {
-            row.isFocused = this.value.focusedIndex === row.index;
-            return row;
-        });
-    }
-
-    private initCache() {
-        this.cache = new ListApiCache({
-            api: this.props.api,
-            getId: this.props.getId,
-            onUpdate: () => this._forceUpdate(),
-        });
-    }
-
-    public reload = () => {
-        this.visibleTree = Tree.blank(this.props);
-        this.isForceReloading = true;
-        this.initCache();
-        this.update({ value: this.value, onValueChange: this.onValueChange }, this.props);
-        this._forceUpdate();
-    };
-
-    public getById = (id: TId, index: number) => {
-        const item = this.cache.byId(id);
-        if (item === NOT_FOUND_RECORD) {
-            return this.getUnknownRow(id, index, []);
-        }
-
-        if (item === null) {
-            return this.getLoadingRow(id, index, []);
-        }
-
-        return this.getRowProps(item, index);
-    };
-
-    // Wrap props.api to update items in the items store
-    private api: LazyDataSourceApi<TItem, TId, TFilter> = async (rq, ctx) => {
-        const cachedItems: TItem[] = [];
-        if (this.cache && rq.ids && rq.ids.length > 0) {
-            const missingIds: TId[] = [];
-            rq.ids.forEach((id) => {
-                const cachedItem = this.cache.byId(id, false);
-                if (cachedItem !== NOT_FOUND_RECORD) {
-                    cachedItems.push(cachedItem);
-                } else {
-                    missingIds.push(id);
-                }
-            });
-
-            if (missingIds.length > 0) {
-                rq.ids = missingIds;
-            } else {
-                return { items: cachedItems };
-            }
-        }
-
-        // TBD: don't fetch at all, if all IDS were in cache
-        const response = await this.props.api(rq, ctx);
-
-        if (this.cache && response.items) {
-            response.items.forEach((item) => {
-                this.cache.setItem(item);
-            });
-        }
-
-        return { ...response, items: [...response.items, ...cachedItems] };
-    };
-
-    // Loads node. Returns promise to a loaded node.
-
-    private inProgressPromise: Promise<LoadResult<TItem, TId>> = null;
-
-    private loadMissing(
-        abortInProgress: boolean,
-        options?: Partial<LoadTreeOptions<TItem, TId, TFilter>>,
-        withNestedChildren?: boolean,
-        value?: DataSourceState<TFilter, TId>,
-        byFullTree: boolean = false,
-    ): Promise<LoadResult<TItem, TId>> {
-        // Make tree updates sequential, by executing all consequent calls after previous promise completed
-
-        if (this.inProgressPromise === null || abortInProgress) {
-            const tree = byFullTree ? this.fullTree : this.visibleTree;
-            this.inProgressPromise = Promise.resolve({ isUpdated: false, isOutdated: false, tree });
-        }
-
-        this.inProgressPromise = this.inProgressPromise.then(() =>
-            this.loadMissingImpl(options, withNestedChildren, value, byFullTree));
-
-        return this.inProgressPromise;
-    }
-
-    private async loadMissingImpl(
-        options?: Partial<LoadTreeOptions<TItem, TId, TFilter>>,
-        withNestedChildren?: boolean,
-        value?: DataSourceState<TFilter, TId>,
-        byFullTree: boolean = false,
-    ): Promise<LoadResult<TItem, TId>> {
-        const localValue = { ...this.value, ...value };
-        const tree = byFullTree ? this.fullTree : this.visibleTree;
-        const loadingTree = tree;
-
-        try {
-            const newTreePromise = tree.load(
-                {
-                    ...this.props,
-                    ...options,
-                    isFolded: (node) => this.isFolded(node),
-                    api: this.api,
-                    filter: { ...{}, ...this.props.filter, ...localValue.filter },
-                },
-                localValue,
-                withNestedChildren,
-            );
-
-            const newTree = await newTreePromise;
-
-            const linkToTree = byFullTree ? this.fullTree : this.visibleTree;
-
-            // If tree is changed during this load, than there was reset occurred (new value arrived)
-            // We need to tell caller to reject this result
-            const isOutdated = linkToTree !== loadingTree;
-            const isUpdated = linkToTree !== newTree;
-
-            if (!isOutdated) {
-                if (!this.value.search) {
-                    this.visibleTree = newTree;
-                    this.fullTree = newTree;
-                } else {
-                    this.visibleTree = byFullTree ? this.visibleTree.mergeItems(newTree) : newTree;
-                    this.fullTree = byFullTree ? newTree : this.fullTree.mergeItems(newTree);
-                }
-            }
-            return { isUpdated, isOutdated, tree: newTree };
-        } catch (e) {
-            // TBD - correct error handling
-            console.error('LazyListView: Error while loading items.', e);
-            return { isUpdated: false, isOutdated: false, tree: loadingTree };
-        }
-    }
-
-    protected handleOnCheck = (rowProps: DataRowProps<TItem, TId>) => {
-        const id = rowProps.id;
-        const isChecked = !rowProps.isChecked;
-
-        this.checkItems(isChecked, false, id);
-    };
-
-    protected handleSelectAll = (value: boolean) => {
-        if (value) {
-            this.checkItems(value, true);
-        } else {
-            // if cascadeSelection mode (implicit or explicit) is enabled, mostly all the rows
-            // should be loaded. It is very expensive and slow.
-            // To avoid it, only those items, which are selectable, should be unchecked, avoiding cascading logic.
-            const checked = this.fullTree.cascadeSelection(this.value.checked, undefined, value, {
-                cascade: false,
-                isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => {
-                    let currentItem = item;
-                    if (currentItem === NOT_FOUND_RECORD) {
-                        currentItem = this.cache.byId(id, false);
-                        if (currentItem === null) {
-                            return false;
-                        }
-
-                        if (currentItem === NOT_FOUND_RECORD) {
-                            return true;
-                        }
-                    }
-                    const { isCheckable } = this.getRowProps(currentItem, null);
-                    return isCheckable;
-                },
-            });
-
-            this.handleCheckedChange(checked);
-        }
-    };
-
-    private async checkItems(isChecked: boolean, isRoot: boolean, checkedId?: TId) {
-        let checked = (this.value && this.value.checked) || [];
-
-        let tree = this.visibleTree;
-
-        const isImplicitMode = this.props.cascadeSelection === CascadeSelectionTypes.IMPLICIT;
-        if (this.props.cascadeSelection || isRoot) {
-            const loadNestedLayersChildren = !isImplicitMode;
-            const parents = this.fullTree.getParentIdsRecursive(checkedId);
-
-            const result = await this.loadMissing(
-                false,
-                {
-                    // If cascadeSelection is implicit and the element is unchecked, it is necessary to load all children
-                    // of all parents of the unchecked element to be checked explicitly. Only one layer of each parent should be loaded.
-                    // Otherwise, should be loaded only checked element and all its nested children.
-                    loadAllChildren: (id) => {
-                        if (!this.props.cascadeSelection) {
-                            return isChecked && isRoot;
-                        }
-
-                        if (isImplicitMode) {
-                            return id === ROOT_ID || parents.some((parent) => isEqual(parent, id));
-                        }
-
-                        // `isEqual` is used, because complex ids can be recreated after fetching of parents.
-                        // So, they should be compared not by reference, but by value.
-                        return isRoot || isEqual(id, checkedId) || (this.value.search && parents.some((parent) => isEqual(parent, id)));
-                    },
-                    isLoadStrict: true,
-                },
-                loadNestedLayersChildren,
-                { search: null },
-                true,
-            );
-
-            tree = result.tree;
-        }
-
-        checked = tree.cascadeSelection(checked, checkedId, isChecked, {
-            cascade: isImplicitMode ? this.props.cascadeSelection : (isRoot && isChecked) || this.props.cascadeSelection,
-            isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => {
-                let currentItem = item;
-                if (currentItem === NOT_FOUND_RECORD) {
-                    currentItem = this.cache.byId(id, false);
-                    if (currentItem === null) {
-                        return false;
-                    }
-
-                    if (currentItem === NOT_FOUND_RECORD) {
-                        return true;
-                    }
-                }
-                const { isCheckable } = this.getRowProps(currentItem, null);
-                return isCheckable;
-            },
-        });
-
-        this.handleCheckedChange(checked);
-    }
-
-    public getVisibleRows = () => {
-        if (this.props.legacyLoadDataBehavior) {
-            this.loadData();
-        }
-
-        const from = this.value.topIndex;
-        const count = this.value.visibleCount;
-
-        const rows = this.rows.slice(from, from + count);
-        const visibleRows = this.getRowsWithPinned(rows);
-        const listProps = this.getListProps();
-
-        if (this.hasMoreRows) {
-            // We don't run rebuild rows on scrolling. We rather wait for the next load to happen.
-            // So there can be a case when we haven't updated rows (to add more loading rows), and view is scrolled down
-            // We need to add more loading rows in such case.
-
-            const lastRow = this.rows[this.rows.length - 1];
-
-            while (visibleRows.length < count && from + visibleRows.length < listProps.rowsCount) {
-                const index = from + visibleRows.length;
-                const row = this.getLoadingRow('_loading_' + index, index);
-                row.indent = lastRow.indent;
-                row.path = lastRow.path;
-                row.depth = lastRow.depth;
-                visibleRows.push(row);
-            }
-        }
-
-        return visibleRows;
-    };
-
-    public getListProps = (): DataSourceListProps => {
-        if (this.props.legacyLoadDataBehavior) {
-            this.loadData();
-        }
-
-        // if data is reloading, to prevent twitching the UI (of pagination, for example)
-        // it is required to return previous listProps.
-        if (this.isReloading && this.listProps) {
-            this.listProps = { ...this.listProps, isReloading: this.isReloading };
-            return this.listProps;
-        }
-
-        let rowsCount: number;
-        const lastVisibleIndex = this.getLastRecordIndex();
-        const rootInfo = this.visibleTree.getNodeInfo(undefined);
-
-        const rootCount = rootInfo.count;
-
-        if (!this.props.getChildCount && rootCount != null) {
-            // We have a flat list, and know exact count of items on top level. So, we can have an exact number of rows w/o iterating the whole tree.
-            rowsCount = rootCount;
-        } else if (!this.hasMoreRows) {
-            // We are at the bottom of the list. Some children might still be loading, but that's ok - we'll re-count everything after we load them.
-            rowsCount = this.rows.length;
-        } else {
-            // We definitely have more rows to show below the last visible row.
-            // We need to add at least 1 row below, so VirtualList or other component would not detect the end of the list, and query loading more rows later.
-            // We have to balance this number.
-            // To big - would make scrollbar size to shrink when we hit bottom
-            // To small - and VirtualList will re-request rows until it will fill it's last block.
-            // So, it should be at least greater than VirtualList block size (default is 20)
-            // Probably, we'll move this const to props later if needed;
-            const rowsToAddBelowLastKnown = 20;
-
-            rowsCount = Math.max(this.rows.length, lastVisibleIndex + rowsToAddBelowLastKnown);
-        }
-
-        this.listProps = {
-            rowsCount,
-            knownRowsCount: this.rows.length,
-            exactRowsCount: this.rows.length,
-            totalCount: rootInfo.totalCount ?? this.visibleTree.getTotalRecursiveCount(),
-            selectAll: this.selectAll,
-            isReloading: this.isReloading,
-        };
-
-        return this.listProps;
-    };
-
-    protected getChildCount = (item: TItem): number | undefined => {
-        return this.props.getChildCount?.(item);
-    };
-
-    protected isFlattenSearch = () => {
-        return this.value.search && this.props.flattenSearchResults;
-    };
-
-    protected isPartialLoad = () => true;
-    private areMoreRowsNeeded = (prevValue?: DataSourceState<TFilter, TId>, newValue?: DataSourceState<TFilter, TId>) => {
-        const isFetchPositionAndAmountChanged = prevValue?.topIndex !== newValue?.topIndex || prevValue?.visibleCount !== newValue?.visibleCount;
-        const lastIndex = this.getLastRecordIndex();
-
-        return isFetchPositionAndAmountChanged && lastIndex > this.rows.length;
-    };
-
-    public getConfig() {
-        return {
-            ...super.getConfig(),
-            flattenSearchResults: this.props.flattenSearchResults,
-        };
-    }
-}
diff --git a/uui-core/src/data/processing/views/__tests__/ArrayListView.complex-ids.test.ts b/uui-core/src/data/processing/views/__tests__/ArrayListView.complex-ids.test.ts
new file mode 100644
index 0000000000..50f00232c3
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/ArrayListView.complex-ids.test.ts
@@ -0,0 +1,169 @@
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { ArrayDataSource, ArrayDataSourceProps } from '../../ArrayDataSource';
+
+interface TestParent {
+    type: 'parent';
+    id: number;
+    childrenCount?: number;
+    parentId?: number;
+}
+
+interface TestChild {
+    type: 'child';
+    id: number;
+    parentId?: number;
+}
+
+type TestItem = TestParent | TestChild;
+type TestItemId = [TestItem['type'], number];
+
+describe('ArrayListView - can work with id like [string, number]', () => {
+    const testData: TestItem[] = [
+        { type: 'parent', id: 1, childrenCount: 1 }, { type: 'child', id: 1, parentId: 1 }, { type: 'child', id: 2, parentId: 1 },
+    ];
+
+    let currentValue: DataSourceState<DataQueryFilter<TestItem>, TestItemId>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<TestItem>, TestItemId>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+
+    const treeDataSource = new ArrayDataSource<TestItem, TestItemId, DataQueryFilter<TestItem>>({
+        items: testData,
+
+        getId: (i) => [i.type, i.id],
+        getParentId: (i) => (i.parentId ? ['parent', i.parentId] : undefined),
+        cascadeSelection: true,
+        complexIds: true,
+    });
+
+    beforeEach(() => {
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, TestItemId, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, TestItemId>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('can load tree, unfold nodes, and scroll down', async () => {
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: ['parent', 1], isFoldable: true, isFolded: true }]);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(1);
+    });
+
+    it('can unfold nodes', async () => {
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
+        );
+
+        let view = hookResult.result.current;
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: ['parent', 1], isFoldable: true, isFolded: true }]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(1);
+
+        // Unfold a row
+        const rows = view.getVisibleRows();
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
+
+        hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
+        view = hookResult.result.current;
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: ['parent', 1] }, { id: ['child', 1] }, { id: ['child', 2] },
+            ]);
+        });
+
+        expect(view.getListProps().rowsCount).toEqual(3);
+    });
+
+    it('Checkboxes works', async () => {
+        currentValue = { ...currentValue, visibleCount: 3, checked: [['child', 1]] as TestItemId[] };
+        const viewProps: Partial<ArrayDataSourceProps<TestItem, TestItemId, DataQueryFilter<TestItem>>> = {
+            cascadeSelection: true,
+            getRowOptions: () => ({ checkbox: { isVisible: true } }),
+            isFoldedByDefault: () => false,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: viewProps,
+            } },
+        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: ['parent', 1], isChildrenChecked: true, isChecked: false }, { id: ['child', 1], isChecked: true }, { id: ['child', 2], isChecked: false },
+                ],
+            );
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        let row = view.getVisibleRows()[2]; // -> all children checked = parent checked
+        await act(() => {
+            row.onCheck?.(row);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: ['parent', 1], isChildrenChecked: true, isChecked: true }, { id: ['child', 1], isChecked: true }, { id: ['child', 2], isChecked: true },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        row = view.getVisibleRows()[0];
+
+        await act(() => {
+            row.onCheck?.(row);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: ['parent', 1], isChildrenChecked: false, isChecked: false }, { id: ['child', 1], isChecked: false }, { id: ['child', 2], isChecked: false },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(3);
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/ArrayListView.fold-all.test.ts b/uui-core/src/data/processing/views/__tests__/ArrayListView.fold-all.test.ts
new file mode 100644
index 0000000000..2936aed6b6
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/ArrayListView.fold-all.test.ts
@@ -0,0 +1,239 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getArrayLocationsDS } from '../../__tests__/mocks';
+
+describe('ArrayListView - fold all', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('should pass foldAll to isFoldedByDefault callback on init', async () => {
+        const dataSource = getArrayLocationsDS({
+            isFoldedByDefault: (_, state) => state.foldAll ?? false,
+        });
+
+        currentValue.visibleCount = 50;
+        currentValue.foldAll = true;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+
+    it('should pass foldAll to isFoldedByDefault callback', async () => {
+        const dataSource = getArrayLocationsDS({
+            isFoldedByDefault: (_, state) => state.foldAll ?? false,
+        });
+
+        currentValue.visibleCount = 50;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'DZ', parentId: 'c-AF' },
+                { id: '2474141', parentId: 'DZ' },
+                { id: '2475744', parentId: 'DZ' },
+                { id: '2475740', parentId: 'DZ' },
+                { id: '2475752', parentId: 'DZ' },
+                { id: '2475687', parentId: 'DZ' },
+                { id: '2475612', parentId: 'DZ' },
+                { id: '2475475', parentId: 'DZ' },
+                { id: '2474638', parentId: 'DZ' },
+                { id: '2474583', parentId: 'DZ' },
+                { id: '2474506', parentId: 'DZ' },
+                { id: 'BJ', parentId: 'c-AF' },
+                { id: '2392505', parentId: 'BJ' },
+                { id: '2392308', parentId: 'BJ' },
+                { id: '2392204', parentId: 'BJ' },
+                { id: '2392108', parentId: 'BJ' },
+                { id: '2392087', parentId: 'BJ' },
+                { id: '2392009', parentId: 'BJ' },
+                { id: '2391895', parentId: 'BJ' },
+                { id: '2391893', parentId: 'BJ' },
+                { id: '2391455', parentId: 'BJ' },
+                { id: '2391377', parentId: 'BJ' },
+                { id: 'GM', parentId: 'c-AF' },
+                { id: '2413920', parentId: 'GM' },
+                { id: '2413876', parentId: 'GM' },
+                { id: '2413753', parentId: 'GM' },
+                { id: '2413515', parentId: 'GM' },
+                { id: '2412749', parentId: 'GM' },
+                { id: '2411880', parentId: 'GM' },
+                { id: 'c-EU', parentId: undefined },
+                { id: 'GB', parentId: 'c-EU' },
+                { id: '2633655', parentId: 'GB' },
+                { id: '2633563', parentId: 'GB' },
+                { id: '2633553', parentId: 'GB' },
+                { id: '2633551', parentId: 'GB' },
+                { id: '2633521', parentId: 'GB' },
+                { id: '2633485', parentId: 'GB' },
+                { id: '2633406', parentId: 'GB' },
+                { id: '2633397', parentId: 'GB' },
+                { id: '2633373', parentId: 'GB' },
+                { id: '2633352', parentId: 'GB' },
+            ]);
+        });
+
+        currentValue.foldAll = true;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+
+    it('should unfold all nodes on foldAll: false if isFoldedByDefault is not passed', async () => {
+        const dataSource = getArrayLocationsDS({});
+
+        currentValue.visibleCount = 50;
+        currentValue.foldAll = false;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'DZ', parentId: 'c-AF' },
+                { id: '2474141', parentId: 'DZ' },
+                { id: '2475744', parentId: 'DZ' },
+                { id: '2475740', parentId: 'DZ' },
+                { id: '2475752', parentId: 'DZ' },
+                { id: '2475687', parentId: 'DZ' },
+                { id: '2475612', parentId: 'DZ' },
+                { id: '2475475', parentId: 'DZ' },
+                { id: '2474638', parentId: 'DZ' },
+                { id: '2474583', parentId: 'DZ' },
+                { id: '2474506', parentId: 'DZ' },
+                { id: 'BJ', parentId: 'c-AF' },
+                { id: '2392505', parentId: 'BJ' },
+                { id: '2392308', parentId: 'BJ' },
+                { id: '2392204', parentId: 'BJ' },
+                { id: '2392108', parentId: 'BJ' },
+                { id: '2392087', parentId: 'BJ' },
+                { id: '2392009', parentId: 'BJ' },
+                { id: '2391895', parentId: 'BJ' },
+                { id: '2391893', parentId: 'BJ' },
+                { id: '2391455', parentId: 'BJ' },
+                { id: '2391377', parentId: 'BJ' },
+                { id: 'GM', parentId: 'c-AF' },
+                { id: '2413920', parentId: 'GM' },
+                { id: '2413876', parentId: 'GM' },
+                { id: '2413753', parentId: 'GM' },
+                { id: '2413515', parentId: 'GM' },
+                { id: '2412749', parentId: 'GM' },
+                { id: '2411880', parentId: 'GM' },
+                { id: 'c-EU', parentId: undefined },
+                { id: 'GB', parentId: 'c-EU' },
+                { id: '2633655', parentId: 'GB' },
+                { id: '2633563', parentId: 'GB' },
+                { id: '2633553', parentId: 'GB' },
+                { id: '2633551', parentId: 'GB' },
+                { id: '2633521', parentId: 'GB' },
+                { id: '2633485', parentId: 'GB' },
+                { id: '2633406', parentId: 'GB' },
+                { id: '2633397', parentId: 'GB' },
+                { id: '2633373', parentId: 'GB' },
+                { id: '2633352', parentId: 'GB' },
+            ]);
+        });
+
+        currentValue.foldAll = true;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+
+    it('should fold all nodes on foldAll: true', async () => {
+        const dataSource = getArrayLocationsDS({});
+
+        currentValue.visibleCount = 50;
+        currentValue.folded = { 'c-AF': false };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'DZ', parentId: 'c-AF' },
+                { id: 'BJ', parentId: 'c-AF' },
+                { id: 'GM', parentId: 'c-AF' },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+
+        currentValue.foldAll = true;
+        currentValue.folded = {};
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/ArrayListView.patch-items.test.ts b/uui-core/src/data/processing/views/__tests__/ArrayListView.patch-items.test.ts
new file mode 100644
index 0000000000..5df90d01d8
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/ArrayListView.patch-items.test.ts
@@ -0,0 +1,1353 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getArrayLocationsDS } from '../../__tests__/mocks';
+import { ItemsMap } from '../tree/ItemsMap';
+import { act } from 'react-dom/test-utils';
+import { PatchOrdering } from '../tree';
+import { ArrayListViewProps } from '../types';
+
+type ExtendedLocationItem = LocationItem & { isDeleted?: boolean };
+
+describe('ArrayListView - patch items', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    function createItemsMap(itemsObj: Record<string, LocationItem | ExtendedLocationItem>) {
+        return ItemsMap.fromObject<string, LocationItem | ExtendedLocationItem>(itemsObj, { getId: ({ id }) => id });
+    }
+
+    it.each([
+        undefined,
+        () => PatchOrdering.TOP,
+    ])
+    ('should add items to the beginning of the list if item is not in list', async (getNewItemPosition) => {
+        const dataSource = getArrayLocationsDS({
+            patch: createItemsMap({
+                'c-AS': {
+                    id: 'c-AS',
+                    name: 'Asia',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-NA': {
+                    id: 'c-NA',
+                    name: 'North America',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-NA' },
+                { id: 'c-AN' },
+                { id: 'c-AS' },
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(5);
+    });
+
+    it('should add items to the end of the list if item is not in list and position is BOTTOM', async () => {
+        const dataSource = getArrayLocationsDS({
+            patch: createItemsMap({
+                'c-AS': {
+                    id: 'c-AS',
+                    name: 'Asia',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-NA': {
+                    id: 'c-NA',
+                    name: 'North America',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition: () => PatchOrdering.BOTTOM,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+                { id: 'c-AS' },
+                { id: 'c-AN' },
+                { id: 'c-NA' },
+            ]);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(5);
+    });
+
+    it.each([
+        undefined,
+        () => PatchOrdering.TOP,
+    ])('should add items to the top by parent', async (getNewItemPosition) => {
+        const patch = createItemsMap({
+            'c-AS': {
+                id: 'c-AS',
+                name: 'Asia',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA': {
+                id: 'c-NA',
+                name: 'North America',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        const dataSource = getArrayLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {
+                    patch, getNewItemPosition,
+                },
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[0];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' },
+                    { id: 'c-NA', parentId: 'c-AF' },
+                    { id: 'c-AN', parentId: 'c-AF' },
+                    { id: 'c-AS', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+    });
+
+    it('should add items to the bottom by parent', async () => {
+        const getNewItemPosition = () => PatchOrdering.BOTTOM;
+        const patch = createItemsMap({
+            'c-AS': {
+                id: 'c-AS',
+                name: 'Asia',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA': {
+                id: 'c-NA',
+                name: 'North America',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        const dataSource = getArrayLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {
+                    patch, getNewItemPosition,
+                },
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[0];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'c-AS', parentId: 'c-AF' },
+                    { id: 'c-AN', parentId: 'c-AF' },
+                    { id: 'c-NA', parentId: 'c-AF' },
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+    });
+
+    it('should fix position of item from patch till the next sorting change and apply sorting after sorting change', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'Asia1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS2': {
+                id: 'c-AS2',
+                name: 'Asia2',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS3': {
+                id: 'c-AS3',
+                name: 'Asia3',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN1': {
+                id: 'c-AN1',
+                name: 'Antarctica1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN2': {
+                id: 'c-AN2',
+                name: 'Antarctica2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN3': {
+                id: 'c-AN3',
+                name: 'Antarctica3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'North America1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA2': {
+                id: 'c-NA2',
+                name: 'North America2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA3': {
+                id: 'c-NA3',
+                name: 'North America3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+        const emptyPatch: ItemsMap<string, LocationItem> | undefined = undefined;
+
+        const dataSource = getArrayLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<ArrayListViewProps<LocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: emptyPatch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        currentValue.visibleCount = 20;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+
+                    { id: 'c-NA3', parentId: 'c-AF' },
+                    { id: 'c-NA2', parentId: 'c-AF' },
+                    { id: 'c-NA1', parentId: 'c-AF' },
+
+                    { id: 'c-AN3', parentId: 'c-AF' },
+                    { id: 'c-AN2', parentId: 'c-AF' },
+                    { id: 'c-AN1', parentId: 'c-AF' },
+
+                    { id: 'c-AS3', parentId: 'c-AF' },
+                    { id: 'c-AS2', parentId: 'c-AF' },
+                    { id: 'c-AS1', parentId: 'c-AF' },
+
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+        const newPatch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'XA1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS2': {
+                id: 'c-AS2',
+                name: 'XA2',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS3': {
+                id: 'c-AS3',
+                name: 'XA3',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN1': {
+                id: 'c-AN1',
+                name: 'BA1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN2': {
+                id: 'c-AN2',
+                name: 'BA2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN3': {
+                id: 'c-AN3',
+                name: 'BA3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'DA1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA2': {
+                id: 'c-NA2',
+                name: 'DA2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA3': {
+                id: 'c-NA3',
+                name: 'DA3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        hookResult.rerender({
+            value: currentValue,
+            onValueChange: onValueChanged,
+            props: {
+                patch: newPatch,
+                getNewItemPosition,
+            },
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    {
+                        id: 'c-NA3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA3',
+                            name: 'DA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-NA2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA2',
+                            name: 'DA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-NA1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA1',
+                            name: 'DA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN3',
+                            name: 'BA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN2',
+                            name: 'BA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN1',
+                            name: 'BA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS3',
+                            name: 'XA3',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS2',
+                            name: 'XA2',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS1',
+                            name: 'XA1',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        currentValue.sorting = [{ field: 'name', direction: 'asc' }];
+        hookResult.rerender({
+            value: currentValue,
+            onValueChange: onValueChanged,
+            props: {
+                patch: newPatch,
+                getNewItemPosition,
+            },
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                    {
+                        id: 'c-AN1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN1',
+                            name: 'BA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN2',
+                            name: 'BA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN3',
+                            name: 'BA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    {
+                        id: 'c-NA1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA1',
+                            name: 'DA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+
+                    {
+                        id: 'c-NA2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA2',
+                            name: 'DA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-NA3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA3',
+                            name: 'DA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'GM', parentId: 'c-AF' },
+                    {
+                        id: 'c-AS1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS1',
+                            name: 'XA1',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS2',
+                            name: 'XA2',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS3',
+                            name: 'XA3',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+    });
+
+    it('should delete items from tree', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'Asia1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+                isDeleted: true,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'North America1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                type: 'continent',
+                name: 'Europe',
+                __typename: 'Location',
+                childCount: 1,
+                isDeleted: true,
+            },
+            GM: {
+                id: 'GM',
+                name: 'Gambia',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 6,
+                isDeleted: true,
+            },
+            BJ: {
+                id: 'BJ',
+                name: 'Benin',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 10,
+            },
+        });
+
+        const emptyPatch: ItemsMap<string, ExtendedLocationItem> | undefined = undefined;
+        const dataSource = getArrayLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<ArrayListViewProps<ExtendedLocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+            isDeleted: (item) => item.isDeleted ?? false,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch: emptyPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    // { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'c-NA1', parentId: 'c-AF' },
+                    // { id: 'c-AS1', parentId: 'c-AF' },
+                    // { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+    });
+
+    it('should update items', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'Asia1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'North America1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                type: 'continent',
+                name: 'Europe',
+                __typename: 'Location',
+                childCount: 1,
+            },
+            GM: {
+                id: 'GM',
+                name: 'Gambia',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 6,
+            },
+            BJ: {
+                id: 'BJ',
+                name: 'Benin',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 10,
+            },
+        });
+
+        const emptyPatch: ItemsMap<string, ExtendedLocationItem> | undefined = undefined;
+        const dataSource = getArrayLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<ArrayListViewProps<ExtendedLocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch: emptyPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'c-NA1', parentId: 'c-AF' },
+                    { id: 'c-AS1', parentId: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+    });
+
+    it('should move items from parent to parent', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            GM: {
+                id: 'GM',
+                name: 'Gambia',
+                type: 'country',
+                parentId: 'c-EU',
+                __typename: 'Location',
+                childCount: 6,
+            },
+            BJ: {
+                id: 'BJ',
+                name: 'Benin',
+                type: 'country',
+                parentId: 'c-EU',
+                __typename: 'Location',
+                childCount: 10,
+            },
+        });
+
+        const emptyPatch: ItemsMap<string, ExtendedLocationItem> | undefined = undefined;
+        const dataSource = getArrayLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<ArrayListViewProps<ExtendedLocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch: emptyPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        const rowEU = view.getVisibleRows()[0];
+        await act(() => {
+            rowEU.onFold?.(rowEU);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'BJ', parentId: 'c-EU' },
+                    { id: 'GM', parentId: 'c-EU' },
+                    { id: 'GB', parentId: 'c-EU' },
+
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+    });
+
+    it('should add item to the end of the list and updated previous existing item', async () => {
+        const dataSource = getArrayLocationsDS({
+            patch: createItemsMap({
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition: () => PatchOrdering.BOTTOM,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+                { id: 'c-AN' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        const updatedPatch = createItemsMap({
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                name: 'EU',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: updatedPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU',
+                    value: {
+                        id: 'c-EU',
+                        name: 'EU',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+                { id: 'c-AN',
+                    value: {
+                        id: 'c-AN',
+                        name: 'Antarctica',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+            ]);
+        });
+    });
+
+    it('should remove updated item and add new to the bottom', async () => {
+        const dataSource = getArrayLocationsDS({
+            patch: createItemsMap({
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition: () => PatchOrdering.BOTTOM,
+            isDeleted: (item: ExtendedLocationItem) => item.isDeleted ?? false,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+                { id: 'c-AN' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        const updatedPatch = createItemsMap({
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                name: 'EU',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: updatedPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU',
+                    value: {
+                        id: 'c-EU',
+                        name: 'EU',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+                { id: 'c-AN',
+                    value: {
+                        id: 'c-AN',
+                        name: 'Antarctica',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+            ]);
+        });
+
+        const updatedPatchWithDeleted = createItemsMap({
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                name: 'EU',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+                isDeleted: true,
+            },
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: updatedPatchWithDeleted } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-AN',
+                    value: {
+                        id: 'c-AN',
+                        name: 'Antarctica',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+            ]);
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/ArrayListView.row-options.test.ts b/uui-core/src/data/processing/views/__tests__/ArrayListView.row-options.test.ts
new file mode 100644
index 0000000000..1b9dcbf24a
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/ArrayListView.row-options.test.ts
@@ -0,0 +1,1143 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getArrayLocationsDS } from '../../__tests__/mocks';
+import { act } from 'react-dom/test-utils';
+
+describe('ArrayListView - row options', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+    describe('rowOptions', () => {
+        it('should not allow checking if checkbox is not configured at rowOptions', async () => {
+            const dataSource = getArrayLocationsDS({
+                rowOptions: {},
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is not visible at rowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is disabled at rowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should selectAll be null, if checkbox is not configured at rowOptions', async () => {
+            const dataSource = getArrayLocationsDS({
+                rowOptions: {},
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should selectAll be null, if checkbox is not visible at rowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return selectAll, if checkbox is disabled at rowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeUndefined();
+        });
+
+        it('should selectAll be null, if selectAll = false', async () => {
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { checkbox: { isVisible: true, isDisabled: false } },
+                selectAll: false,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return indeterminate = false for selectAll, if checkbox is visible and disabled at rowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeFalsy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should return indeterminate = true for selectAll, if checkbox is visible and enabled at rowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true };
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeTruthy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should disable rows if isDisabled is passed to rowOptions', async () => {
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { isDisabled: true },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: true },
+                    { id: 'c-EU', parentId: undefined, isDisabled: true },
+                ]);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { rowOptions: { isDisabled: false } } });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: false },
+                    { id: 'c-EU', parentId: undefined, isDisabled: false },
+                ]);
+            });
+        });
+
+        it('should allow row to be selectable if isSelectable is passed to rowOptions', async () => {
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { isSelectable: true },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: true },
+                    { id: 'c-EU', parentId: undefined, isSelectable: true },
+                ]);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { rowOptions: { isSelectable: false } } });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: false },
+                    { id: 'c-EU', parentId: undefined, isSelectable: false },
+                ]);
+            });
+        });
+
+        it('should pass onClick to rows if is specified at rowOptions', async () => {
+            const onClick = jest.fn();
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { onClick },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, onClick },
+                    { id: 'c-EU', parentId: undefined, onClick },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onClick?.(afRow);
+            });
+
+            expect(onClick).toBeCalledTimes(1);
+            expect(onClick).toBeCalledWith(afRow);
+        });
+
+        it('should pass link to rows if is specified at rowOptions', async () => {
+            const link = {
+                pathname: '/some-link',
+            };
+
+            const dataSource = getArrayLocationsDS({
+                rowOptions: { link },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, link },
+                    { id: 'c-EU', parentId: undefined, link },
+                ]);
+            });
+        });
+
+        it('should pass value/onValueChange to rows if is specified at rowOptions', async () => {
+            const value = { id: 'someID' } as LocationItem;
+            const onValueChange = jest.fn();
+            const rowOptions = { value, onValueChange };
+
+            const dataSource = getArrayLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, ...rowOptions },
+                    { id: 'c-EU', parentId: undefined, ...rowOptions },
+                ]);
+            });
+        });
+
+        it('should pass isReadonly to rows if is specified at rowOptions', async () => {
+            const rowOptions = { isReadonly: true };
+
+            const dataSource = getArrayLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, ...rowOptions },
+                    { id: 'c-EU', parentId: undefined, ...rowOptions },
+                ]);
+            });
+        });
+
+        it('should pass isInvalid to rows if is specified at rowOptions', async () => {
+            const rowOptions = { isInvalid: true };
+
+            const dataSource = getArrayLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, ...rowOptions },
+                    { id: 'c-EU', parentId: undefined, ...rowOptions },
+                ]);
+            });
+        });
+
+        it('should pin rows if pin function is specified at rowOptions', async () => {
+            const rowOptions = { pin: (item) => item.id === 'c-AF' };
+
+            const dataSource = getArrayLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            const euRow = view.getVisibleRows()[1];
+
+            await act(() => {
+                euRow.onFold?.(euRow);
+            });
+
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'DZ', parentId: 'c-AF', isPinned: false },
+                    { id: 'BJ', parentId: 'c-AF', isPinned: false },
+                ]);
+            });
+
+            currentValue.topIndex = 3;
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'GM', parentId: 'c-AF', isPinned: false },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+        });
+    });
+
+    describe('getRowOptions', () => {
+        it('should not allow checking if checkbox is not configured at getRowOptions', async () => {
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({}),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is not visible at getRowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is disabled at getRowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should selectAll be null, if checkbox is not configured at getRowOptions', async () => {
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({}),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should selectAll be null, if checkbox is not visible at getRowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return selectAll, if checkbox is disabled at getRowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeUndefined();
+        });
+
+        it('should selectAll be null, if selectAll = false', async () => {
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ checkbox: { isVisible: true, isDisabled: false } }),
+                selectAll: false,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return indeterminate = false for selectAll, if checkbox is visible and disabled at getRowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeFalsy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should return indeterminate = true for selectAll, if checkbox is visible and enabled at getRowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true };
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeTruthy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should disable rows if isDisabled is passed to getRowOptions', async () => {
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ isDisabled: true }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: true },
+                    { id: 'c-EU', parentId: undefined, isDisabled: true },
+                ]);
+            });
+
+            hookResult.rerender({
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: { getRowOptions: () => ({ isDisabled: false }) },
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: false },
+                    { id: 'c-EU', parentId: undefined, isDisabled: false },
+                ]);
+            });
+        });
+
+        it('should allow row to be selectable if isSelectable is passed to getRowOptions', async () => {
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ isSelectable: true }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: true },
+                    { id: 'c-EU', parentId: undefined, isSelectable: true },
+                ]);
+            });
+
+            hookResult.rerender({
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: { getRowOptions: () => ({ isSelectable: false }) } });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: false },
+                    { id: 'c-EU', parentId: undefined, isSelectable: false },
+                ]);
+            });
+        });
+
+        it('should pass onClick to rows if is specified at getRowOptions', async () => {
+            const onClick = jest.fn();
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ onClick }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, onClick },
+                    { id: 'c-EU', parentId: undefined, onClick },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onClick?.(afRow);
+            });
+
+            expect(onClick).toBeCalledTimes(1);
+            expect(onClick).toBeCalledWith(afRow);
+        });
+
+        it('should pass link to rows if is specified at getRowOptions', async () => {
+            const link = {
+                pathname: '/some-link',
+            };
+
+            const dataSource = getArrayLocationsDS({
+                getRowOptions: () => ({ link }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, link },
+                    { id: 'c-EU', parentId: undefined, link },
+                ]);
+            });
+        });
+
+        it('should pass value/onValueChange to rows if is specified at getRowOptions', async () => {
+            const value = { id: 'someID' } as LocationItem;
+            const onValueChange = jest.fn();
+            const getRowOptions = () => ({ value, onValueChange });
+
+            const dataSource = getArrayLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, value, onValueChange },
+                    { id: 'c-EU', parentId: undefined, value, onValueChange },
+                ]);
+            });
+        });
+
+        it('should pass isReadonly to rows if is specified at getRowOptions', async () => {
+            const getRowOptions = () => ({ isReadonly: true });
+
+            const dataSource = getArrayLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isReadonly: true },
+                    { id: 'c-EU', parentId: undefined, isReadonly: true },
+                ]);
+            });
+        });
+
+        it('should pass isInvalid to rows if is specified at getRowOptions', async () => {
+            const getRowOptions = () => ({ isInvalid: true });
+
+            const dataSource = getArrayLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isInvalid: true },
+                    { id: 'c-EU', parentId: undefined, isInvalid: true },
+                ]);
+            });
+        });
+
+        it('should pin rows if pin function is specified at getRowOptions', async () => {
+            const getRowOptions = () => ({ pin: (item) => item.id === 'c-AF' });
+
+            const dataSource = getArrayLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            const euRow = view.getVisibleRows()[1];
+
+            await act(() => {
+                euRow.onFold?.(euRow);
+            });
+
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'DZ', parentId: 'c-AF', isPinned: false },
+                    { id: 'BJ', parentId: 'c-AF', isPinned: false },
+                ]);
+            });
+
+            currentValue.topIndex = 3;
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'GM', parentId: 'c-AF', isPinned: false },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/ArrayListView.show-only-selected.test.ts b/uui-core/src/data/processing/views/__tests__/ArrayListView.show-only-selected.test.ts
new file mode 100644
index 0000000000..3bad580cce
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/ArrayListView.show-only-selected.test.ts
@@ -0,0 +1,335 @@
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getArrayLocationsDS } from '../../__tests__/mocks';
+
+describe('ArrayListView - show only selected', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('should show only selected rows in order of selection', async () => {
+        const dataSource = getArrayLocationsDS({
+            showSelectedOnly: false,
+        });
+
+        currentValue.checked = ['BJ', '2392308', 'c-AF'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        let view = hookResult.result.current;
+        expectViewToLookLike(view, [
+            { id: 'c-AF' },
+            { id: 'c-EU' },
+        ]);
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: true } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', parentId: 'c-AF', indent: 0, depth: 1 },
+                { id: '2392308', parentId: 'BJ', indent: 0, depth: 2 },
+                { id: 'c-AF', indent: 0, depth: 0 },
+            ]);
+        });
+    });
+
+    it('should show only selected rows if on init showSelectedOnly = true', async () => {
+        const dataSource = getArrayLocationsDS({
+            showSelectedOnly: true,
+        });
+
+        currentValue.checked = ['BJ', '2392308', 'c-AF'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        const view = hookResult.result.current;
+        expectViewToLookLike(view, [
+            { id: 'BJ' },
+            { id: '2392308' },
+            { id: 'c-AF' },
+        ]);
+    });
+
+    it('should remove items from showSelectedOnly rows on uncheck with cascadeSelection = explicit', async () => {
+        const dataSource = getArrayLocationsDS({
+            showSelectedOnly: false,
+            cascadeSelection: 'explicit',
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', isChecked: false },
+                { id: 'c-EU', isChecked: false },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        let rows = view.getVisibleRows();
+        const rowAF = rows[0];
+        await act(() => {
+            rowAF.onCheck?.(rowAF);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', isChecked: true },
+                { id: 'c-EU', isChecked: false },
+            ]);
+        });
+
+        expect(currentValue).toEqual(
+            expect.objectContaining({ checked: [
+                'c-AF',
+                'DZ',
+                '2474141',
+                '2475744',
+                '2475740',
+                '2475752',
+                '2475687',
+                '2475612',
+                '2475475',
+                '2474638',
+                '2474583',
+                '2474506',
+                'BJ',
+                '2392505',
+                '2392308',
+                '2392204',
+                '2392108',
+                '2392087',
+                '2392009',
+                '2391895',
+                '2391893',
+                '2391455',
+                '2391377',
+                'GM',
+                '2413920',
+                '2413876',
+                '2413753',
+                '2413515',
+                '2412749',
+                '2411880',
+            ],
+            topIndex: 0,
+            visibleCount: 3 }),
+        );
+
+        currentValue.visibleCount = 5;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: true } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', isChecked: true },
+                { id: 'DZ', isChecked: true },
+                { id: '2474141', isChecked: true },
+                { id: '2475744', isChecked: true },
+                { id: '2475740', isChecked: true },
+            ]);
+        });
+
+        rows = view.getVisibleRows();
+        const checkedRowDZ = rows[1];
+
+        await act(() => {
+            checkedRowDZ.onCheck?.(checkedRowDZ);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: true } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', isChecked: true },
+                { id: '2392505', isChecked: true },
+                { id: '2392308', isChecked: true },
+                { id: '2392204', isChecked: true },
+                { id: '2392108', isChecked: true },
+            ]);
+        });
+
+        expect(currentValue).toEqual(
+            expect.objectContaining({ checked: [
+                'BJ',
+                '2392505',
+                '2392308',
+                '2392204',
+                '2392108',
+                '2392087',
+                '2392009',
+                '2391895',
+                '2391893',
+                '2391455',
+                '2391377',
+                'GM',
+                '2413920',
+                '2413876',
+                '2413753',
+                '2413515',
+                '2412749',
+                '2411880',
+            ],
+            topIndex: 0,
+            visibleCount: 5 }),
+        );
+    });
+
+    it('should clear checked items if showSelectedOnly = true', async () => {
+        const dataSource = getArrayLocationsDS({
+            showSelectedOnly: true,
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        currentValue.checked = [
+            'BJ',
+            'DZ',
+            '2392505',
+            '2392308',
+            '2392204',
+            '2392108',
+            '2392087',
+            '2392009',
+            '2391895',
+            '2391893',
+            '2391455',
+        ];
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', isChecked: true },
+                { id: 'DZ', isChecked: true },
+                { id: '2392505', isChecked: true },
+            ]);
+        });
+
+        const view = hookResult.result.current;
+        await act(() => {
+            view.clearAllChecked();
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            expect(currentValue).toEqual(
+                expect.objectContaining({ checked: [], topIndex: 0, visibleCount: 3 }),
+            );
+        });
+    });
+
+    it('should show tree after clearing checked values with showSelectedOnly = true', async () => {
+        const dataSource = getArrayLocationsDS({
+            showSelectedOnly: true,
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        currentValue.checked = [
+            'SOME_UNKNONW_ITEM',
+            'BJ',
+            'DZ',
+            '2392505',
+            '2392308',
+            '2392204',
+            '2392108',
+            '2392087',
+            '2392009',
+            '2391895',
+            '2391893',
+            '2391455',
+        ];
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', isChecked: true },
+                { id: 'DZ', isChecked: true },
+                { id: '2392505', isChecked: true },
+            ]);
+        }, {});
+
+        let view = hookResult.result.current;
+        await act(() => {
+            view.clearAllChecked();
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            expect(currentValue).toEqual(
+                expect.objectContaining({ checked: [], topIndex: 0, visibleCount: 3 }),
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: false } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        }, {});
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/ArrayListView.test.ts b/uui-core/src/data/processing/views/__tests__/ArrayListView.test.ts
index de61d8d8d8..8afdfa84dc 100644
--- a/uui-core/src/data/processing/views/__tests__/ArrayListView.test.ts
+++ b/uui-core/src/data/processing/views/__tests__/ArrayListView.test.ts
@@ -1,8 +1,9 @@
-import { renderHook } from '@epam/uui-test-utils';
-import { ArrayListViewProps } from '../ArrayListView';
-import { ArrayDataSource } from '../../ArrayDataSource';
-import { CascadeSelection, DataSourceState, SortDirection } from '../../../../types';
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+import { ArrayDataSource, ArrayDataSourceProps } from '../../ArrayDataSource';
+import { CascadeSelection, DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView, SortDirection } from '../../../../types';
 import isEqual from 'lodash.isequal';
+import { ArrayListViewProps } from '../types';
+import { LocationItem, getArrayLocationsDS } from '../../__tests__/mocks';
 
 interface TItem {
     id: number;
@@ -10,6 +11,12 @@ interface TItem {
     parentId?: number;
 }
 
+interface TestItem {
+    id: number;
+    parentId?: number;
+    childrenCount?: number;
+}
+
 const testItems: TItem[] = [
     { id: 2, level: 'A1' },
     { id: 5, level: 'A2+' },
@@ -43,17 +50,66 @@ const countries: Country[] = [
 const totalRowsCount = 12;
 const rootNodesCount = 9;
 
-let dataSource: ArrayDataSource<{ id: number; level: string }, number, any>;
+let dataSource: ArrayDataSource<TItem, number, any>;
 
-let onValueChangeFn: (newValue: DataSourceState<any, number>) => any;
+let onValueChangeFn: (newValue: DataSourceState<any, number> | ((value: DataSourceState<any, number>) => DataSourceState<any, number>)) => any;
 const initialValue: DataSourceState = { topIndex: 0, visibleCount: totalRowsCount };
+let currentValue = initialValue;
 let viewProps: ArrayListViewProps<TItem, number, any>;
 
 describe('ArrayListView', () => {
+    const testData: TestItem[] = [
+        { id: 100 }, //  0   100
+        { id: 110, parentId: 100 }, //  1   110
+        { id: 120, parentId: 100 }, //  2     120
+        { id: 121, parentId: 120 }, //  3       121
+        { id: 122, parentId: 120 }, //  4       122
+        { id: 200 }, //  5   200
+        { id: 300 }, //  6   300
+        { id: 310, parentId: 300 }, //  7     310
+        { id: 320, parentId: 300 }, //  8     320
+        { id: 330, parentId: 300 }, //  9     330
+    ];
+
+    testData.forEach((i) => {
+        i.childrenCount = testData.filter((x) => x.parentId === i.id).length;
+    });
+
+    const testDataById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
+
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, number, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, number>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+
+        rows.forEach((r) => {
+            if (r.id) {
+                r.value = testDataById[r.id];
+            }
+        });
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    const treeDataSource = new ArrayDataSource({
+        items: testData,
+        getId: (i) => i.id,
+        getParentId: (i) => i.parentId,
+    });
+
     beforeEach(() => {
-        onValueChangeFn = jest.fn();
+        jest.clearAllMocks();
+
+        currentValue = initialValue;
+        onValueChangeFn = jest.fn().mockImplementation((newValue) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
+            currentValue = newValue;
+        });
 
-        dataSource = new ArrayDataSource<TItem, number>({
+        dataSource = new ArrayDataSource<TItem, number, any>({
             items: testItems,
             getId: (i) => i.id,
             getParentId: (i) => i.parentId,
@@ -69,8 +125,6 @@ describe('ArrayListView', () => {
                 isSelectable: true,
             }),
         };
-
-        jest.clearAllMocks();
     });
 
     it('should create visibleRows on constructor', () => {
@@ -84,16 +138,19 @@ describe('ArrayListView', () => {
 
     describe('setValue logic', () => {
         it('should set new value and update rows', () => {
+            const getFilter = (filter) => (item) => filter(item);
+            const filter = (item) => item.parentId === 6;
+
             const hookResult = renderHook(
                 ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
-                { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+                { initialProps: { value: { ...initialValue, filter }, onValueChange: onValueChangeFn, props: { ...viewProps, getFilter } } },
             );
 
             let view = hookResult.result.current;
 
             const rows = view.getVisibleRows();
 
-            hookResult.rerender({ value: { filter: {} }, onValueChange: onValueChangeFn, props: viewProps });
+            hookResult.rerender({ value: { filter: () => true }, onValueChange: onValueChangeFn, props: { ...viewProps, getFilter } });
             view = hookResult.result.current;
 
             const newRows = view.getVisibleRows();
@@ -120,9 +177,10 @@ describe('ArrayListView', () => {
                 { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
             );
 
-            const view = hookResult.result.current;
+            let view = hookResult.result.current;
 
             hookResult.rerender({ value: { ...initialValue, focusedIndex: 1 }, onValueChange: onValueChangeFn, props: viewProps });
+            view = hookResult.result.current;
 
             const rows = view.getVisibleRows();
             const focusedRows = rows.filter((row) => row.isFocused);
@@ -222,7 +280,7 @@ describe('ArrayListView', () => {
     describe('search', () => {
         let countriesDataSource: ArrayDataSource<Country, string>;
         let countriesViewProps: ArrayListViewProps<Country, string, any>;
-        let countriesOnValueChange: (newValue: DataSourceState<Country, string>) => any;
+        let countriesOnValueChange: (newValue: DataSourceState<any, string> | ((value: DataSourceState<any, string>) => DataSourceState<any, string>)) => any;
 
         beforeEach(() => {
             countriesOnValueChange = jest.fn();
@@ -348,24 +406,376 @@ describe('ArrayListView', () => {
         });
     });
 
+    describe('tree-search', () => {
+        const onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
+            currentValue = newValue;
+        };
+
+        beforeEach(() => {
+            currentValue = { visibleCount: 5 };
+        });
+
+        function expectRows(
+            view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+            rows: Partial<DataRowProps<LocationItem, string>>[],
+        ) {
+            const viewRows = view.getVisibleRows();
+            expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+        }
+
+        it('should show unfolded tree results', async () => {
+            const locationsDS = getArrayLocationsDS({
+                getSearchFields: ({ name }) => [name],
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            let view = hookResult.result.current;
+
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+        });
+
+        it.each<CascadeSelection>([true, 'explicit'])('should check all children for search results with cascadeSelection = %s', async (cascadeSelection) => {
+            const locationsDS = getArrayLocationsDS({
+                cascadeSelection,
+                getSearchFields: ({ name }) => [name],
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            let view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+
+            view = hookResult.result.current;
+            expectRows(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+
+            const rows = view.getVisibleRows();
+            const rowDZ = rows[1];
+
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            expect(currentValue.checked).toEqual([
+                'DZ',
+                '2474141',
+                '2475744',
+                '2475740',
+                '2475752',
+                '2475687',
+                '2475612',
+                '2475475',
+                '2474638',
+                '2474583',
+                '2474506',
+            ]);
+
+            currentValue.search = 'Touggourt';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rowTouggourt = view.getVisibleRows()[2];
+
+            await act(() => {
+                rowTouggourt.onCheck?.(rowTouggourt);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                        { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                    ],
+                );
+            });
+        });
+
+        it('should check all children for search results with cascadeSelection = implicit', async () => {
+            const locationsDS = getArrayLocationsDS({
+                cascadeSelection: 'implicit',
+                getSearchFields: ({ name }) => [name],
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            let view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rows = view.getVisibleRows();
+            const rowDZ = rows[1];
+
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            expect(currentValue.checked).toEqual(['DZ']);
+
+            currentValue.search = 'Touggourt';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rowTouggourt = view.getVisibleRows()[2];
+
+            await act(() => {
+                rowTouggourt.onCheck?.(rowTouggourt);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                        { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                    ],
+                );
+            });
+        });
+
+        it('should check all children for search results with cascadeSelection = false', async () => {
+            const locationsDS = getArrayLocationsDS({
+                cascadeSelection: false,
+                getSearchFields: ({ name }) => [name],
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            let view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rows = view.getVisibleRows();
+            const rowDZ = rows[1];
+
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            expect(currentValue.checked).toEqual(['DZ']);
+
+            currentValue.search = 'Benin';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'BJ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                    ],
+                );
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                        { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                    ],
+                );
+            });
+        });
+    });
+
     describe('updateTree', () => {
         const getFilter = (filter) => (item) => filter(item);
         const filter = (item) => item.parentId === 6;
 
-        let currentValue = initialValue;
-        const currentOnValueChange = (newValue: typeof currentValue) => {
-            currentValue = newValue;
-        };
-
-        it('should update tree if filter was changed', () => {
+        it('should update tree if filter was changed', async () => {
             const hookResult = renderHook(
                 ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
-                { initialProps: { value: currentValue, onValueChange: currentOnValueChange, props: viewProps } },
+                { initialProps: { value: currentValue, onValueChange: onValueChangeFn, props: viewProps } },
             );
 
             hookResult.rerender({
                 value: { ...currentValue, topIndex: 0, visibleCount: 20, filter },
-                onValueChange: currentOnValueChange,
+                onValueChange: onValueChangeFn,
                 props: { ...viewProps, getFilter },
             });
 
@@ -377,11 +787,13 @@ describe('ArrayListView', () => {
             expect(rowsIds).toEqual([6]);
 
             const [row] = rows;
-            row.onFold?.(row);
+            await act(() => {
+                row.onFold?.(row);
+            });
 
             hookResult.rerender({
                 value: { ...currentValue, topIndex: 0, visibleCount: 20, filter },
-                onValueChange: currentOnValueChange,
+                onValueChange: onValueChangeFn,
                 props: { ...viewProps, getFilter },
             });
 
@@ -398,12 +810,12 @@ describe('ArrayListView', () => {
         it('should update tree if filter and search was changed', () => {
             const hookResult = renderHook(
                 ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
-                { initialProps: { value: currentValue, onValueChange: currentOnValueChange, props: viewProps } },
+                { initialProps: { value: currentValue, onValueChange: onValueChangeFn, props: viewProps } },
             );
 
             hookResult.rerender({
                 value: { ...currentValue, topIndex: 0, visibleCount: 20, filter, search: 'B1' },
-                onValueChange: currentOnValueChange,
+                onValueChange: onValueChangeFn,
                 props: { ...viewProps, getFilter },
             });
 
@@ -418,7 +830,7 @@ describe('ArrayListView', () => {
         it('should update tree if filter, search and sorting was changed', () => {
             const hookResult = renderHook(
                 ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
-                { initialProps: { value: currentValue, onValueChange: currentOnValueChange, props: viewProps } },
+                { initialProps: { value: currentValue, onValueChange: onValueChangeFn, props: viewProps } },
             );
 
             hookResult.rerender({
@@ -430,7 +842,7 @@ describe('ArrayListView', () => {
                     search: 'B',
                     sorting: [{ field: 'level', direction: 'desc' as SortDirection }],
                 },
-                onValueChange: currentOnValueChange,
+                onValueChange: onValueChangeFn,
                 props: { ...viewProps, getFilter },
             });
 
@@ -446,6 +858,27 @@ describe('ArrayListView', () => {
     });
 
     describe('rows check', () => {
+        let updatedValue = { ...initialValue };
+        const onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                updatedValue = newValue(updatedValue);
+                return;
+            }
+            updatedValue = newValue;
+        };
+
+        beforeEach(() => {
+            updatedValue = { ...initialValue };
+        });
+
+        function expectRows(
+            view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+            rows: Partial<DataRowProps<LocationItem, string>>[],
+        ) {
+            const viewRows = view.getVisibleRows();
+            expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+        }
+
         describe('cascadeSelection = false', () => {
             it('should select item in single mode', () => {
                 const hookResult = renderHook(
@@ -458,7 +891,11 @@ describe('ArrayListView', () => {
                 const row = view.getById(6, 6);
                 row.onSelect?.(row);
 
-                expect(onValueChangeFn).toBeCalledWith({ ...initialValue, selectedId: 6 });
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    selectedId: 6,
+                });
             });
 
             it('onCheck handler should set id to checked array in value', async () => {
@@ -469,21 +906,163 @@ describe('ArrayListView', () => {
 
                 let view = hookResult.result.current;
                 const row1 = view.getById(6, 6);
-                row1.onCheck?.(row1);
-                expect(onValueChangeFn).toHaveBeenCalledWith({ ...initialValue, checked: [6] });
+
+                await act(() => {
+                    row1.onCheck?.(row1);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [6],
+                });
 
                 hookResult.rerender({ value: { ...initialValue, checked: [6] }, onValueChange: onValueChangeFn, props: viewProps });
                 view = hookResult.result.current;
 
                 const row2 = view.getById(7, 7);
-                row2.onCheck?.(row2);
+                await act(() => {
+                    row2.onCheck?.(row2);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(2);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [6, 7],
+                });
+            });
+
+            it('should clear specific unknown record', async () => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+                const locationsDS = getArrayLocationsDS({
+                    cascadeSelection: false,
+                    showSelectedOnly: true,
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    unknownRow.onCheck?.(unknownRow);
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                expect(updatedValue.checked).toEqual(['BJ']);
+            });
+
+            it('should clear unknown record via clearAll', async () => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+                const locationsDS = getArrayLocationsDS({
+                    cascadeSelection: false,
+                    showSelectedOnly: true,
+                    rowOptions: {
+                        checkbox: {
+                            isVisible: true,
+                            isDisabled: false,
+                        },
+                    },
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                expect(updatedValue.checked).toEqual([unknownId, 'BJ']);
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    view.clearAllChecked();
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                await waitFor(() => {
+                    expect(updatedValue.checked).toEqual([]);
+                });
+            });
+        });
+
+        it('should select all top items with cascadeSelection = false', async () => {
+            const currentViewProps: ArrayListViewProps<TItem, number, any> = {
+                getId: (i) => i.id,
+                cascadeSelection: false,
+                getRowOptions: () => ({
+                    checkbox: { isVisible: true },
+                }),
+            };
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: { ...initialValue, checked: [7, 8] }, onValueChange: onValueChangeFn, props: currentViewProps } },
+            );
+
+            const view = hookResult.result.current;
+            await act(() => {
+                view.selectAll?.onValueChange(true);
+            });
+
+            expect(onValueChangeFn).toBeCalledTimes(1);
+            expect(currentValue).toEqual({
+                ...initialValue,
+                checked: [
+                    7, 8, 2, 5, 1, 3, 4, 6, 9, 10, 11, 12,
+                ],
+            });
+
+            await act(() => {
+                view.selectAll?.onValueChange(false);
+            });
 
-                expect(onValueChangeFn).toHaveBeenCalledWith({ ...initialValue, checked: [6, 7] });
+            expect(onValueChangeFn).toBeCalledTimes(2);
+            expect(currentValue).toEqual({
+                ...initialValue,
+                checked: [],
             });
         });
 
         describe("cascadeSelection = true | cascadeSelection = 'explicit'", () => {
-            it.each<[CascadeSelection]>([[true], ['explicit']])('should check all children when parent checked with cascadeSelection = %s', (cascadeSelection) => {
+            it.each<[CascadeSelection]>([[true], ['explicit']])('should check all children when parent checked with cascadeSelection = %s', async (cascadeSelection) => {
                 const currentViewProps: ArrayListViewProps<TItem, number, any> = {
                     getId: (i) => i.id,
                     cascadeSelection,
@@ -499,9 +1078,13 @@ describe('ArrayListView', () => {
 
                 const view = hookResult.result.current;
                 const row1 = view.getById(6, 6);
-                row1.onCheck?.(row1);
 
-                expect(onValueChangeFn).toBeCalledWith({
+                await act(() => {
+                    row1.onCheck?.(row1);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
                     ...initialValue,
                     checked: [
                         6, 7, 8, 9,
@@ -509,7 +1092,7 @@ describe('ArrayListView', () => {
                 });
             });
 
-            it.each<[CascadeSelection]>([[true], ['explicit']])('should check parent if all siblings checked with cascadeSelection = %s', (cascadeSelection) => {
+            it.each<[CascadeSelection]>([[true], ['explicit']])('should check parent if all siblings checked with cascadeSelection = %s', async (cascadeSelection) => {
                 const currentViewProps: ArrayListViewProps<TItem, number, any> = {
                     getId: (i) => i.id,
                     cascadeSelection,
@@ -526,9 +1109,13 @@ describe('ArrayListView', () => {
                 const view = hookResult.result.current;
 
                 const row = view.getById(9, 9);
-                row.onCheck?.(row);
 
-                expect(onValueChangeFn).toBeCalledWith({
+                await act(() => {
+                    row.onCheck?.(row);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
                     ...initialValue,
                     checked: [
                         7, 8, 9, 6,
@@ -536,7 +1123,7 @@ describe('ArrayListView', () => {
                 });
             });
 
-            it.each<[CascadeSelection]>([[true], ['explicit']])('should select all top items with cascadeSelection = %s', (cascadeSelection) => {
+            it.each<[CascadeSelection]>([[true], ['explicit']])('should select all top items with cascadeSelection = %s', async (cascadeSelection) => {
                 const currentViewProps: ArrayListViewProps<TItem, number, any> = {
                     getId: (i) => i.id,
                     cascadeSelection,
@@ -550,19 +1137,161 @@ describe('ArrayListView', () => {
                 );
 
                 const view = hookResult.result.current;
-                view.selectAll?.onValueChange(true);
+                await act(() => {
+                    view.selectAll?.onValueChange(true);
+                });
 
-                expect(onValueChangeFn).toBeCalledWith({
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
                     ...initialValue,
                     checked: [
                         7, 8, 2, 5, 1, 3, 4, 6, 9, 10, 11, 12,
                     ],
                 });
+
+                await act(() => {
+                    view.selectAll?.onValueChange(false);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(2);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [],
+                });
+            });
+
+            it.each<[CascadeSelection]>([[true], ['explicit']])('should clear specific unknown record', async (cascadeSelection) => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+                const locationsDS = getArrayLocationsDS({
+                    cascadeSelection,
+                    showSelectedOnly: true,
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    unknownRow.onCheck?.(unknownRow);
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                expect(updatedValue.checked).toEqual(['BJ']);
+            });
+
+            it.each<[CascadeSelection]>([[true], ['explicit']])('should clear unknown record via clearAll', async (cascadeSelection) => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue,
+                    checked: [
+                        'BJ',
+                        '2392505',
+                        '2392308',
+                        '2392204',
+                        '2392108',
+                        '2392087',
+                        '2392009',
+                        '2391895',
+                        '2391893',
+                        '2391455',
+                        '2391377',
+                        unknownId,
+                    ],
+                };
+
+                const locationsDS = getArrayLocationsDS({
+                    cascadeSelection,
+                    showSelectedOnly: true,
+                    rowOptions: {
+                        checkbox: {
+                            isVisible: true,
+                            isDisabled: false,
+                        },
+                    },
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                expect(updatedValue.checked).toEqual([
+                    'BJ',
+                    '2392505',
+                    '2392308',
+                    '2392204',
+                    '2392108',
+                    '2392087',
+                    '2392009',
+                    '2391895',
+                    '2391893',
+                    '2391455',
+                    '2391377',
+                    unknownId,
+                ]);
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                            { id: '2392505', isChecked: true },
+                            { id: '2392308', isChecked: true },
+                            { id: '2392204', isChecked: true },
+                            { id: '2392108', isChecked: true },
+                            { id: '2392087', isChecked: true },
+                            { id: '2392009', isChecked: true },
+                            { id: '2391895', isChecked: true },
+                            { id: '2391893', isChecked: true },
+                            { id: '2391455', isChecked: true },
+                            { id: '2391377', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    view.clearAllChecked();
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                await waitFor(() => {
+                    expect(updatedValue.checked).toEqual([]);
+                });
             });
         });
 
         describe("cascadeSelection = 'implicit'", () => {
-            it('should check only parent when parent checked with cascadeSelection = implicit', () => {
+            it('should check only parent when parent checked with cascadeSelection = implicit', async () => {
                 const currentViewProps: ArrayListViewProps<TItem, number, any> = {
                     getId: (i) => i.id,
                     cascadeSelection: 'implicit',
@@ -577,12 +1306,19 @@ describe('ArrayListView', () => {
                 const view = hookResult.result.current;
 
                 const row1 = view.getById(6, 6);
-                row1.onCheck?.(row1);
 
-                expect(onValueChangeFn).toBeCalledWith({ ...initialValue, checked: [6] });
+                await act(() => {
+                    row1.onCheck?.(row1);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [6],
+                });
             });
 
-            it('should check parent if all siblings checked with cascadeSelection = implicit', () => {
+            it('should check parent if all siblings checked with cascadeSelection = implicit', async () => {
                 const currentViewProps: ArrayListViewProps<TItem, number, any> = {
                     getId: (i) => i.id,
                     cascadeSelection: 'implicit',
@@ -597,12 +1333,18 @@ describe('ArrayListView', () => {
                 const view = hookResult.result.current;
 
                 const row = view.getById(9, 9);
-                row.onCheck?.(row);
+                await act(() => {
+                    row.onCheck?.(row);
+                });
 
-                expect(onValueChangeFn).toBeCalledWith({ ...initialValue, checked: [6] });
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [6],
+                });
             });
 
-            it('should select all top items with cascadeSelection = implicit', () => {
+            it('should select all top items with cascadeSelection = implicit', async () => {
                 const currentViewProps: ArrayListViewProps<TItem, number, any> = {
                     getId: (i) => i.id,
                     cascadeSelection: 'implicit',
@@ -615,15 +1357,126 @@ describe('ArrayListView', () => {
                     { initialProps: { value: { ...initialValue, checked: [7, 8] }, onValueChange: onValueChangeFn, props: currentViewProps } },
                 );
                 const view = hookResult.result.current;
+                await act(() => {
+                    view.selectAll?.onValueChange(true);
+                });
 
-                view.selectAll?.onValueChange(true);
-
-                expect(onValueChangeFn).toBeCalledWith({
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
                     ...initialValue,
                     checked: [
                         2, 5, 1, 3, 4, 6, 10, 11, 12,
                     ],
                 });
+
+                await act(() => {
+                    view.selectAll?.onValueChange(false);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(2);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [],
+                });
+            });
+
+            it('should clear specific unknown record', async () => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+                const locationsDS = getArrayLocationsDS({
+                    cascadeSelection: 'implicit',
+                    showSelectedOnly: true,
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    unknownRow.onCheck?.(unknownRow);
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                expect(updatedValue.checked).toEqual(['BJ']);
+            });
+
+            it('should clear unknown record via clearAll', async () => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue,
+                    checked: [
+                        'BJ',
+                        unknownId,
+                    ],
+                };
+
+                const locationsDS = getArrayLocationsDS({
+                    cascadeSelection: 'implicit',
+                    showSelectedOnly: true,
+                    rowOptions: {
+                        checkbox: {
+                            isVisible: true,
+                            isDisabled: false,
+                        },
+                    },
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                expect(updatedValue.checked).toEqual([
+                    'BJ',
+                    unknownId,
+                ]);
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    view.clearAllChecked();
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                await waitFor(() => {
+                    expect(updatedValue.checked).toEqual([]);
+                });
             });
         });
     });
@@ -637,7 +1490,8 @@ describe('ArrayListView', () => {
         const row = view.getById(6, 6);
         row.onFocus?.(row.index);
 
-        expect(onValueChangeFn).toBeCalledWith({ ...initialValue, focusedIndex: row.index });
+        expect(onValueChangeFn).toBeCalledTimes(1);
+        expect(currentValue).toEqual({ ...initialValue, focusedIndex: row.index });
     });
 
     it('should fold/unfold item', () => {
@@ -649,21 +1503,92 @@ describe('ArrayListView', () => {
         const row = view.getVisibleRows()[5];
         row.onFold?.(row);
 
-        expect(onValueChangeFn).toBeCalledWith({ ...initialValue, folded: { [row.id]: !row.isFolded } });
+        expect(onValueChangeFn).toBeCalledTimes(1);
+        expect(currentValue).toEqual({ ...initialValue, folded: { [row.id]: !row.isFolded } });
     });
 
-    it('should return selected rows in selection order', () => {
+    it('Correctly computes path and isLastChild', async () => {
+        currentValue.folded = { 120: true };
+        currentValue.visibleCount = 10;
+
         const hookResult = renderHook(
-            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
-            { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+            ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                cascadeSelection: true,
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+            }),
+            { initialProps: { value: currentValue, onValueChange: onValueChangeFn } },
         );
 
-        hookResult.rerender({ value: { ...initialValue, checked: [6, 5, 4] }, onValueChange: onValueChangeFn, props: viewProps });
-        const view = hookResult.result.current;
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, path: [], isLastChild: false },
+                    { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
+                    { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
+                    { id: 200, path: [], isLastChild: false },
+                    { id: 300, path: [], isLastChild: true },
+                    { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
+                ],
+            );
+        });
+
+        currentValue.folded = { 120: false };
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChangeFn });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toBe(10);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, path: [], isLastChild: false },
+                    { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
+                    { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
+                    {
+                        id: 121,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: false,
+                    },
+                    {
+                        id: 122,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: true,
+                    },
+                    { id: 200, path: [], isLastChild: false },
+                    { id: 300, path: [], isLastChild: true },
+                    { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toBe(10);
+    });
+
+    it('handles empty result', async () => {
+        const props: Partial<ArrayDataSourceProps<TestItem, number, any>> = {
+            getFilter: () => (item) => item.id === -100500,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
+            { initialProps: { value: { visibleCount: 3, filter: { id: -100500 } }, onValueChange: onValueChangeFn, props } },
+        );
+
+        let view = hookResult.result.current;
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, []);
+        });
 
-        const selectedRows = view.getSelectedRows();
-        expect(selectedRows.map(({ id }) => id)).toEqual([
-            6, 5, 4,
-        ]);
+        expect(view.getListProps().rowsCount).toBe(0);
     });
 });
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.complex-ids.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.complex-ids.test.ts
new file mode 100644
index 0000000000..964b200674
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.complex-ids.test.ts
@@ -0,0 +1,190 @@
+import { runDataQuery } from '../../../querying/runDataQuery';
+import { act, delay, renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { AsyncDataSource, AsyncDataSourceProps } from '../../AsyncDataSource';
+
+interface TestParent {
+    type: 'parent';
+    id: number;
+    childrenCount?: number;
+    parentId?: number;
+}
+
+interface TestChild {
+    type: 'child';
+    id: number;
+    parentId?: number;
+}
+
+type TestItem = TestParent | TestChild;
+type TestItemId = [TestItem['type'], number];
+
+describe('AsyncListView - can work with id like [string, number]', () => {
+    const testData: TestItem[] = [
+        { type: 'parent', id: 1, childrenCount: 1 }, { type: 'child', id: 1, parentId: 1 }, { type: 'child', id: 2, parentId: 1 },
+    ];
+
+    let currentValue: DataSourceState<DataQueryFilter<TestItem>, TestItemId>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<TestItem>, TestItemId>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+
+    const getDataSource = () => new AsyncDataSource<TestItem, TestItemId, DataQueryFilter<TestItem>>({
+        api: async () => {
+            await delay(100);
+            return runDataQuery(testData, {}).items;
+        },
+
+        getId: (i) => [i.type, i.id],
+        getParentId: (i) => (i.parentId ? ['parent', i.parentId] : undefined),
+        cascadeSelection: true,
+        complexIds: true,
+    });
+
+    beforeEach(() => {
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, TestItemId, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, TestItemId>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('can load tree, unfold nodes, and scroll down', async () => {
+        const treeDataSource = getDataSource();
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: ['parent', 1], isFoldable: true, isFolded: true }]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(1);
+    });
+
+    it('can unfold nodes', async () => {
+        const treeDataSource = getDataSource();
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeTruthy();
+        });
+        let view = hookResult.result.current;
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: ['parent', 1], isFoldable: true, isFolded: true }]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(1);
+
+        // Unfold a row
+        const rows = view.getVisibleRows();
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
+
+        hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
+        view = hookResult.result.current;
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: ['parent', 1] }, { id: ['child', 1] }, { id: ['child', 2] },
+            ]);
+        });
+
+        expect(view.getListProps().rowsCount).toEqual(3);
+    });
+
+    it('Checkboxes works', async () => {
+        const treeDataSource = getDataSource();
+        currentValue = { ...currentValue, visibleCount: 3, checked: [['child', 1]] as TestItemId[] };
+        const viewProps: Partial<AsyncDataSourceProps<TestItem, TestItemId, DataQueryFilter<TestItem>>> = {
+            cascadeSelection: true,
+            getRowOptions: () => ({ checkbox: { isVisible: true } }),
+            isFoldedByDefault: () => false,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: viewProps,
+            } },
+        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: ['parent', 1], isChildrenChecked: true, isChecked: false }, { id: ['child', 1], isChecked: true }, { id: ['child', 2], isChecked: false },
+                ],
+            );
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        let row = view.getVisibleRows()[2]; // -> all children checked = parent checked
+        await act(() => {
+            row.onCheck?.(row);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: ['parent', 1], isChildrenChecked: true, isChecked: true }, { id: ['child', 1], isChecked: true }, { id: ['child', 2], isChecked: true },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        row = view.getVisibleRows()[0];
+
+        await act(() => {
+            row.onCheck?.(row);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: ['parent', 1], isChildrenChecked: false, isChecked: false }, { id: ['child', 1], isChecked: false }, { id: ['child', 2], isChecked: false },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(3);
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.flat.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.flat.test.ts
new file mode 100644
index 0000000000..a0eba803b2
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.flat.test.ts
@@ -0,0 +1,326 @@
+import {
+    DataSourceState, DataQueryFilter, DataRowProps, IDataSourceView,
+} from '../../../../types';
+import { runDataQuery } from '../../../querying/runDataQuery';
+import { act, delay, renderHook, waitFor } from '@epam/uui-test-utils';
+import { AsyncDataSource } from '../../AsyncDataSource';
+
+interface TestItem {
+    id: number;
+}
+
+describe('AsyncListView - flat list test', () => {
+    const testData: TestItem[] = [
+        { id: 100 }, { id: 110 }, { id: 120 }, { id: 121 }, { id: 122 }, { id: 200 }, { id: 300 }, { id: 310 }, { id: 320 }, { id: 330 },
+    ];
+
+    const testDataById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
+
+    let currentValue: DataSourceState<DataQueryFilter<TestItem>, number>;
+    let onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<TestItem>, number>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    const testApi = () => Promise.resolve(runDataQuery(testData, {}).items);
+
+    const getDataSource = () => new AsyncDataSource({
+        api: testApi,
+        getId: ({ id }) => id,
+        getFilter: (filter) => ({ id }) => {
+            if (!filter || filter.id?.gte === undefined) {
+                return true;
+            }
+
+            return id >= filter.id.gte;
+        },
+    });
+
+    beforeEach(() => {
+        currentValue = { topIndex: 0, visibleCount: 3 };
+        onValueChanged = (newValue) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
+            currentValue = newValue;
+        };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, number, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, number>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('can scroll through plain lists', async () => {
+        const flatDataSource = getDataSource();
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => flatDataSource.useView(value, onValueChange, props),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
+        );
+
+        let view = hookResult.result.current;
+        expectViewToLookLike(view, [
+            { isLoading: true }, { isLoading: true }, { isLoading: true },
+        ]);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
+                ],
+            );
+        });
+
+        view = hookResult.result.current;
+        let listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
+
+        // Scroll down by 1 row
+        hookResult.rerender({ value: { topIndex: 1, visibleCount: 3 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { id: 121, value: testDataById[121] },
+                ],
+            );
+        });
+
+        view = hookResult.result.current;
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
+
+        // Scroll down to bottom
+        hookResult.rerender({ value: { topIndex: 8, visibleCount: 3 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [{ id: 320, value: testDataById[320] }, { id: 330, value: testDataById[330] }],
+            );
+        });
+
+        view = hookResult.result.current;
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
+    });
+
+    it('can reload', async () => {
+        const testApiWithDelay = async () => {
+            await delay(500);
+            return runDataQuery(testData, {}).items;
+        };
+
+        const flatDataSourceWithDelay = new AsyncDataSource({
+            api: testApiWithDelay,
+            getId: ({ id }) => id,
+            getFilter: (filter) => ({ id }) => {
+                if (!filter || filter.gte === undefined) {
+                    return true;
+                }
+                return id >= filter.gte;
+            },
+        });
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => flatDataSourceWithDelay.useView(value, onValueChange, props),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
+                ],
+            );
+        });
+
+        await act(() => {
+            view.reload();
+        });
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
+
+        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
+                ],
+            );
+        });
+    });
+
+    it('handles concurrent filter updates', async () => {
+        const flatDataSource = getDataSource();
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => flatDataSource.useView(value, onValueChange, props),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
+        );
+        let view = hookResult.result.current;
+
+        // immediately set another filter and query again
+        currentValue = { ...currentValue, filter: { id: { gte: 200 } } };
+
+        hookResult.rerender({
+            value: currentValue,
+            onValueChange: onValueChanged,
+            props: {
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+            },
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 200 }, { id: 300 }, { id: 310 },
+            ]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(5);
+
+        const rows = view.getVisibleRows();
+        await act(() => {
+            rows[0].onCheck?.(rows[0]);
+        });
+
+        hookResult.rerender({
+            value: currentValue,
+            onValueChange: onValueChanged,
+            props: {
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+            },
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 200, isChecked: true }, { id: 300 }, { id: 310 },
+            ]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(5);
+    });
+
+    it('can scroll thru plain lists (no count returned from API)', async () => {
+        const testApiNoCount = () =>
+            Promise.resolve(testData);
+
+        const flatDataSourceNoCount = new AsyncDataSource({
+            api: testApiNoCount,
+        });
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => flatDataSourceNoCount.useView(value, onValueChange, props),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
+        );
+
+        let view = hookResult.result.current;
+
+        expect(view.getListProps().isReloading).toBeTruthy();
+        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
+            ]);
+        });
+
+        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
+
+        // Scroll down by 1 row
+        hookResult.rerender({ value: { topIndex: 1, visibleCount: 3 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { id: 121, value: testDataById[121] },
+            ]);
+        });
+
+        expect(view.getListProps().rowsCount).toBeGreaterThan(4);
+
+        // Scroll down to bottom
+        hookResult.rerender({ value: { topIndex: 8, visibleCount: 3 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [{ id: 320, value: testDataById[320] }, { id: 330, value: testDataById[330] }],
+            ); // correctly detected the end of the list
+        });
+
+        expect(view.getListProps().rowsCount).toEqual(10);
+    });
+
+    it('handles empty result', async () => {
+        const testApiNoCount = () =>
+            Promise.resolve(testData);
+
+        const flatDataSourceNoCount = new AsyncDataSource({
+            api: testApiNoCount,
+            getFilter: (filter) => ({ id }) => filter?.id === id,
+        });
+
+        currentValue.filter = { id: -100500 };
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => flatDataSourceNoCount.useView(value, onValueChange, props),
+            { initialProps: { value: { visibleCount: 3 }, onValueChange: onValueChanged, props: {} } },
+        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
+        let view = hookResult.result.current;
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, []);
+        });
+
+        expect(view.getListProps().rowsCount).toBe(0);
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.fold-all.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.fold-all.test.ts
new file mode 100644
index 0000000000..7f16b6e733
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.fold-all.test.ts
@@ -0,0 +1,259 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getAsyncLocationsDS } from '../../__tests__/mocks';
+
+describe('AsyncListView - fold all', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('should pass foldAll to isFoldedByDefault callback on init', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            isFoldedByDefault: (_, state) => state.foldAll ?? false,
+        });
+
+        currentValue.visibleCount = 50;
+        currentValue.foldAll = true;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+
+    it('should pass foldAll to isFoldedByDefault callback', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            isFoldedByDefault: (_, state) => state.foldAll ?? false,
+        });
+
+        currentValue.visibleCount = 50;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'DZ', parentId: 'c-AF' },
+                { id: '2474141', parentId: 'DZ' },
+                { id: '2475744', parentId: 'DZ' },
+                { id: '2475740', parentId: 'DZ' },
+                { id: '2475752', parentId: 'DZ' },
+                { id: '2475687', parentId: 'DZ' },
+                { id: '2475612', parentId: 'DZ' },
+                { id: '2475475', parentId: 'DZ' },
+                { id: '2474638', parentId: 'DZ' },
+                { id: '2474583', parentId: 'DZ' },
+                { id: '2474506', parentId: 'DZ' },
+                { id: 'BJ', parentId: 'c-AF' },
+                { id: '2392505', parentId: 'BJ' },
+                { id: '2392308', parentId: 'BJ' },
+                { id: '2392204', parentId: 'BJ' },
+                { id: '2392108', parentId: 'BJ' },
+                { id: '2392087', parentId: 'BJ' },
+                { id: '2392009', parentId: 'BJ' },
+                { id: '2391895', parentId: 'BJ' },
+                { id: '2391893', parentId: 'BJ' },
+                { id: '2391455', parentId: 'BJ' },
+                { id: '2391377', parentId: 'BJ' },
+                { id: 'GM', parentId: 'c-AF' },
+                { id: '2413920', parentId: 'GM' },
+                { id: '2413876', parentId: 'GM' },
+                { id: '2413753', parentId: 'GM' },
+                { id: '2413515', parentId: 'GM' },
+                { id: '2412749', parentId: 'GM' },
+                { id: '2411880', parentId: 'GM' },
+                { id: 'c-EU', parentId: undefined },
+                { id: 'GB', parentId: 'c-EU' },
+                { id: '2633655', parentId: 'GB' },
+                { id: '2633563', parentId: 'GB' },
+                { id: '2633553', parentId: 'GB' },
+                { id: '2633551', parentId: 'GB' },
+                { id: '2633521', parentId: 'GB' },
+                { id: '2633485', parentId: 'GB' },
+                { id: '2633406', parentId: 'GB' },
+                { id: '2633397', parentId: 'GB' },
+                { id: '2633373', parentId: 'GB' },
+                { id: '2633352', parentId: 'GB' },
+            ]);
+        });
+
+        currentValue.foldAll = true;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+
+    it('should unfold all nodes on foldAll: false if isFoldedByDefault is not passed', async () => {
+        const { dataSource } = getAsyncLocationsDS({});
+
+        currentValue.visibleCount = 50;
+        currentValue.foldAll = false;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'DZ', parentId: 'c-AF' },
+                { id: '2474141', parentId: 'DZ' },
+                { id: '2475744', parentId: 'DZ' },
+                { id: '2475740', parentId: 'DZ' },
+                { id: '2475752', parentId: 'DZ' },
+                { id: '2475687', parentId: 'DZ' },
+                { id: '2475612', parentId: 'DZ' },
+                { id: '2475475', parentId: 'DZ' },
+                { id: '2474638', parentId: 'DZ' },
+                { id: '2474583', parentId: 'DZ' },
+                { id: '2474506', parentId: 'DZ' },
+                { id: 'BJ', parentId: 'c-AF' },
+                { id: '2392505', parentId: 'BJ' },
+                { id: '2392308', parentId: 'BJ' },
+                { id: '2392204', parentId: 'BJ' },
+                { id: '2392108', parentId: 'BJ' },
+                { id: '2392087', parentId: 'BJ' },
+                { id: '2392009', parentId: 'BJ' },
+                { id: '2391895', parentId: 'BJ' },
+                { id: '2391893', parentId: 'BJ' },
+                { id: '2391455', parentId: 'BJ' },
+                { id: '2391377', parentId: 'BJ' },
+                { id: 'GM', parentId: 'c-AF' },
+                { id: '2413920', parentId: 'GM' },
+                { id: '2413876', parentId: 'GM' },
+                { id: '2413753', parentId: 'GM' },
+                { id: '2413515', parentId: 'GM' },
+                { id: '2412749', parentId: 'GM' },
+                { id: '2411880', parentId: 'GM' },
+                { id: 'c-EU', parentId: undefined },
+                { id: 'GB', parentId: 'c-EU' },
+                { id: '2633655', parentId: 'GB' },
+                { id: '2633563', parentId: 'GB' },
+                { id: '2633553', parentId: 'GB' },
+                { id: '2633551', parentId: 'GB' },
+                { id: '2633521', parentId: 'GB' },
+                { id: '2633485', parentId: 'GB' },
+                { id: '2633406', parentId: 'GB' },
+                { id: '2633397', parentId: 'GB' },
+                { id: '2633373', parentId: 'GB' },
+                { id: '2633352', parentId: 'GB' },
+            ]);
+        });
+
+        currentValue.foldAll = true;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+
+    it('should fold all nodes on foldAll: true', async () => {
+        const { dataSource } = getAsyncLocationsDS({});
+
+        currentValue.visibleCount = 50;
+        currentValue.folded = { 'c-AF': false };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'DZ', parentId: 'c-AF' },
+                { id: 'BJ', parentId: 'c-AF' },
+                { id: 'GM', parentId: 'c-AF' },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+
+        currentValue.foldAll = true;
+        currentValue.folded = {};
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.old.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.old.test.ts
new file mode 100644
index 0000000000..a047b8001a
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.old.test.ts
@@ -0,0 +1,125 @@
+import { AsyncDataSource } from '../../AsyncDataSource';
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataSourceState } from '../../../../types';
+import { AsyncListViewProps } from '../types';
+
+interface TItem {
+    id: number;
+    level: string;
+    parentId?: number;
+}
+
+const testItems = [
+    { id: 2, level: 'A1' },
+    { id: 5, level: 'A2+' },
+    { id: 1, level: 'A0' },
+    { id: 3, level: 'A1+' },
+    { id: 4, level: 'A2' },
+    { id: 6, level: 'B' },
+    { id: 7, level: 'B1+', parentId: 6 },
+    { id: 8, level: 'B2', parentId: 6 },
+    { id: 9, level: 'B2+', parentId: 6 },
+    { id: 10, level: 'C1' },
+    { id: 11, level: 'C1+' },
+    { id: 12, level: 'C2' },
+];
+
+describe('AsyncListView - old tests', () => {
+    const initialValue: DataSourceState = { topIndex: 0, visibleCount: 20 };
+    const testApi = jest.fn().mockImplementation(() => Promise.resolve(testItems));
+
+    let viewProps: AsyncListViewProps<TItem, number, any>;
+    let dataSource: AsyncDataSource<TItem, number>;
+
+    beforeEach(() => {
+        testApi.mockClear();
+        viewProps = { api: testApi, getId: (i) => i.id };
+        dataSource = new AsyncDataSource(viewProps);
+    });
+
+    describe('getById', () => {
+        it('should return item by id', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: () => {}, props: {} } },
+            );
+
+            let view = hookResult.result.current;
+            const loadingRow = view.getById(testItems[4].id, 4);
+            expect(loadingRow.isUnknown).toBe(true);
+            expect(loadingRow.id).not.toBeNull();
+
+            await waitFor(async () => {
+                view = hookResult.result.current;
+                const row = view.getById(testItems[4].id, 4);
+                expect(row.isUnknown).toBeFalsy();
+            });
+
+            const row = view.getById(testItems[4].id, 4);
+            expect(row.id).toBe(testItems[4].id);
+            expect(row.value).toEqual(testItems[4]);
+            expect(row.index).toEqual(4);
+        });
+
+        it("should return unknown row if item don't exist in dataSource", async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: () => {}, props: {} } },
+            );
+
+            await waitFor(async () => {
+                const view = hookResult.result.current;
+                const row = view.getById(111, 111);
+                expect(row.isUnknown).toBeTruthy();
+            });
+
+            const view = hookResult.result.current;
+            const row = view.getById(111, 111);
+            expect(row.id).not.toBeNull();
+        });
+
+        it('should return loading row if item is fetching by dataSource', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: { checked: [11], ...initialValue }, onValueChange: () => {}, props: { showSelectedOnly: true } } },
+            );
+
+            await waitFor(async () => {
+                const view = hookResult.result.current;
+                const row = view.getById(11, 11);
+                expect(row.isLoading).toBeTruthy();
+            });
+
+            const view = hookResult.result.current;
+            const row = view.getById(11, 11);
+            expect(row.id).not.toBeNull();
+        });
+    });
+
+    it('should return rows', async () => {
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: { value: initialValue, onValueChange: () => {}, props: {} } },
+        );
+
+        let view = hookResult.result.current;
+        let rows = view.getVisibleRows();
+
+        // Should return loading rows for first call
+        expect(rows).toHaveLength(20);
+        expect(rows[5].isLoading).toBe(true);
+        expect(rows[5].id).not.toBeNull();
+
+        await waitFor(async () => {
+            view = hookResult.result.current;
+            const viewRows = view.getVisibleRows();
+            expect(viewRows[5].isLoading).toBeFalsy();
+        });
+
+        view = hookResult.result.current;
+        rows = view.getVisibleRows();
+
+        expect(rows[5].id).toEqual(testItems[5].id);
+        expect(rows).toHaveLength(9);
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.patch-items.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.patch-items.test.ts
new file mode 100644
index 0000000000..4a6658b885
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.patch-items.test.ts
@@ -0,0 +1,1353 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getAsyncLocationsDS } from '../../__tests__/mocks';
+import { ItemsMap } from '../tree/ItemsMap';
+import { act } from 'react-dom/test-utils';
+import { PatchOrdering } from '../tree';
+import { AsyncListViewProps } from '../types';
+
+type ExtendedLocationItem = LocationItem & { isDeleted?: boolean };
+
+describe('AsyncListView - patch items', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    function createItemsMap(itemsObj: Record<string, LocationItem | ExtendedLocationItem>) {
+        return ItemsMap.fromObject<string, LocationItem | ExtendedLocationItem>(itemsObj, { getId: ({ id }) => id });
+    }
+
+    it.each([
+        undefined,
+        () => PatchOrdering.TOP,
+    ])
+    ('should add items to the beginning of the list if item is not in list', async (getNewItemPosition) => {
+        const { dataSource } = getAsyncLocationsDS({
+            patch: createItemsMap({
+                'c-AS': {
+                    id: 'c-AS',
+                    name: 'Asia',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-NA': {
+                    id: 'c-NA',
+                    name: 'North America',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-NA' },
+                { id: 'c-AN' },
+                { id: 'c-AS' },
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(5);
+    });
+
+    it('should add items to the end of the list if item is not in list and position is BOTTOM', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            patch: createItemsMap({
+                'c-AS': {
+                    id: 'c-AS',
+                    name: 'Asia',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-NA': {
+                    id: 'c-NA',
+                    name: 'North America',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition: () => PatchOrdering.BOTTOM,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+                { id: 'c-AS' },
+                { id: 'c-AN' },
+                { id: 'c-NA' },
+            ]);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(5);
+    });
+
+    it.each([
+        undefined,
+        () => PatchOrdering.TOP,
+    ])('should add items to the top by parent', async (getNewItemPosition) => {
+        const patch = createItemsMap({
+            'c-AS': {
+                id: 'c-AS',
+                name: 'Asia',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA': {
+                id: 'c-NA',
+                name: 'North America',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        const { dataSource } = getAsyncLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {
+                    patch, getNewItemPosition,
+                },
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[0];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' },
+                    { id: 'c-NA', parentId: 'c-AF' },
+                    { id: 'c-AN', parentId: 'c-AF' },
+                    { id: 'c-AS', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+    });
+
+    it('should add items to the bottom by parent', async () => {
+        const getNewItemPosition = () => PatchOrdering.BOTTOM;
+        const patch = createItemsMap({
+            'c-AS': {
+                id: 'c-AS',
+                name: 'Asia',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA': {
+                id: 'c-NA',
+                name: 'North America',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        const { dataSource } = getAsyncLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {
+                    patch, getNewItemPosition,
+                },
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[0];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'c-AS', parentId: 'c-AF' },
+                    { id: 'c-AN', parentId: 'c-AF' },
+                    { id: 'c-NA', parentId: 'c-AF' },
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+    });
+
+    it('should fix position of item from patch till the next sorting change and apply sorting after sorting change', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'Asia1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS2': {
+                id: 'c-AS2',
+                name: 'Asia2',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS3': {
+                id: 'c-AS3',
+                name: 'Asia3',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN1': {
+                id: 'c-AN1',
+                name: 'Antarctica1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN2': {
+                id: 'c-AN2',
+                name: 'Antarctica2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN3': {
+                id: 'c-AN3',
+                name: 'Antarctica3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'North America1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA2': {
+                id: 'c-NA2',
+                name: 'North America2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA3': {
+                id: 'c-NA3',
+                name: 'North America3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+        const emptyPatch: ItemsMap<string, LocationItem> | undefined = undefined;
+
+        const { dataSource } = getAsyncLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<AsyncListViewProps<LocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: emptyPatch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        currentValue.visibleCount = 20;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+
+                    { id: 'c-NA3', parentId: 'c-AF' },
+                    { id: 'c-NA2', parentId: 'c-AF' },
+                    { id: 'c-NA1', parentId: 'c-AF' },
+
+                    { id: 'c-AN3', parentId: 'c-AF' },
+                    { id: 'c-AN2', parentId: 'c-AF' },
+                    { id: 'c-AN1', parentId: 'c-AF' },
+
+                    { id: 'c-AS3', parentId: 'c-AF' },
+                    { id: 'c-AS2', parentId: 'c-AF' },
+                    { id: 'c-AS1', parentId: 'c-AF' },
+
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+        const newPatch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'XA1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS2': {
+                id: 'c-AS2',
+                name: 'XA2',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS3': {
+                id: 'c-AS3',
+                name: 'XA3',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN1': {
+                id: 'c-AN1',
+                name: 'BA1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN2': {
+                id: 'c-AN2',
+                name: 'BA2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN3': {
+                id: 'c-AN3',
+                name: 'BA3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'DA1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA2': {
+                id: 'c-NA2',
+                name: 'DA2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA3': {
+                id: 'c-NA3',
+                name: 'DA3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        hookResult.rerender({
+            value: currentValue,
+            onValueChange: onValueChanged,
+            props: {
+                patch: newPatch,
+                getNewItemPosition,
+            },
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    {
+                        id: 'c-NA3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA3',
+                            name: 'DA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-NA2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA2',
+                            name: 'DA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-NA1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA1',
+                            name: 'DA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN3',
+                            name: 'BA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN2',
+                            name: 'BA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN1',
+                            name: 'BA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS3',
+                            name: 'XA3',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS2',
+                            name: 'XA2',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS1',
+                            name: 'XA1',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        currentValue.sorting = [{ field: 'name', direction: 'asc' }];
+        hookResult.rerender({
+            value: currentValue,
+            onValueChange: onValueChanged,
+            props: {
+                patch: newPatch,
+                getNewItemPosition,
+            },
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                    {
+                        id: 'c-AN1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN1',
+                            name: 'BA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN2',
+                            name: 'BA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN3',
+                            name: 'BA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    {
+                        id: 'c-NA1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA1',
+                            name: 'DA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+
+                    {
+                        id: 'c-NA2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA2',
+                            name: 'DA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-NA3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA3',
+                            name: 'DA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'GM', parentId: 'c-AF' },
+                    {
+                        id: 'c-AS1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS1',
+                            name: 'XA1',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS2',
+                            name: 'XA2',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS3',
+                            name: 'XA3',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+    });
+
+    it('should delete items from tree', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'Asia1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+                isDeleted: true,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'North America1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                type: 'continent',
+                name: 'Europe',
+                __typename: 'Location',
+                childCount: 1,
+                isDeleted: true,
+            },
+            GM: {
+                id: 'GM',
+                name: 'Gambia',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 6,
+                isDeleted: true,
+            },
+            BJ: {
+                id: 'BJ',
+                name: 'Benin',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 10,
+            },
+        });
+
+        const emptyPatch: ItemsMap<string, ExtendedLocationItem> | undefined = undefined;
+        const { dataSource } = getAsyncLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<AsyncListViewProps<ExtendedLocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+            isDeleted: (item) => item.isDeleted ?? false,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch: emptyPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    // { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'c-NA1', parentId: 'c-AF' },
+                    // { id: 'c-AS1', parentId: 'c-AF' },
+                    // { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+    });
+
+    it('should update items', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'Asia1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'North America1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                type: 'continent',
+                name: 'Europe',
+                __typename: 'Location',
+                childCount: 1,
+            },
+            GM: {
+                id: 'GM',
+                name: 'Gambia',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 6,
+            },
+            BJ: {
+                id: 'BJ',
+                name: 'Benin',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 10,
+            },
+        });
+
+        const emptyPatch: ItemsMap<string, ExtendedLocationItem> | undefined = undefined;
+        const { dataSource } = getAsyncLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<AsyncListViewProps<ExtendedLocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch: emptyPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'c-NA1', parentId: 'c-AF' },
+                    { id: 'c-AS1', parentId: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+    });
+
+    it('should move items from parent to parent', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            GM: {
+                id: 'GM',
+                name: 'Gambia',
+                type: 'country',
+                parentId: 'c-EU',
+                __typename: 'Location',
+                childCount: 6,
+            },
+            BJ: {
+                id: 'BJ',
+                name: 'Benin',
+                type: 'country',
+                parentId: 'c-EU',
+                __typename: 'Location',
+                childCount: 10,
+            },
+        });
+
+        const emptyPatch: ItemsMap<string, ExtendedLocationItem> | undefined = undefined;
+        const { dataSource } = getAsyncLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<AsyncListViewProps<ExtendedLocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch: emptyPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        const rowEU = view.getVisibleRows()[0];
+        await act(() => {
+            rowEU.onFold?.(rowEU);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'BJ', parentId: 'c-EU' },
+                    { id: 'GM', parentId: 'c-EU' },
+                    { id: 'GB', parentId: 'c-EU' },
+
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+    });
+
+    it('should add item to the end of the list and updated previous existing item', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            patch: createItemsMap({
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition: () => PatchOrdering.BOTTOM,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+                { id: 'c-AN' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        const updatedPatch = createItemsMap({
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                name: 'EU',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: updatedPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU',
+                    value: {
+                        id: 'c-EU',
+                        name: 'EU',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+                { id: 'c-AN',
+                    value: {
+                        id: 'c-AN',
+                        name: 'Antarctica',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+            ]);
+        });
+    });
+
+    it('should remove updated item and add new to the bottom', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            patch: createItemsMap({
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition: () => PatchOrdering.BOTTOM,
+            isDeleted: (item: ExtendedLocationItem) => item.isDeleted ?? false,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+                { id: 'c-AN' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        const updatedPatch = createItemsMap({
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                name: 'EU',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: updatedPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU',
+                    value: {
+                        id: 'c-EU',
+                        name: 'EU',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+                { id: 'c-AN',
+                    value: {
+                        id: 'c-AN',
+                        name: 'Antarctica',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+            ]);
+        });
+
+        const updatedPatchWithDeleted = createItemsMap({
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                name: 'EU',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+                isDeleted: true,
+            },
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: updatedPatchWithDeleted } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-AN',
+                    value: {
+                        id: 'c-AN',
+                        name: 'Antarctica',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+            ]);
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.row-options.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.row-options.test.ts
new file mode 100644
index 0000000000..4ca3fff983
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.row-options.test.ts
@@ -0,0 +1,1143 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getAsyncLocationsDS } from '../../__tests__/mocks';
+import { act } from 'react-dom/test-utils';
+
+describe('AsyncListView - row options', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+    describe('rowOptions', () => {
+        it('should not allow checking if checkbox is not configured at rowOptions', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: {},
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is not visible at rowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is disabled at rowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should selectAll be null, if checkbox is not configured at rowOptions', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: {},
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should selectAll be null, if checkbox is not visible at rowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return selectAll, if checkbox is disabled at rowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeUndefined();
+        });
+
+        it('should selectAll be null, if selectAll = false', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { checkbox: { isVisible: true, isDisabled: false } },
+                selectAll: false,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return indeterminate = false for selectAll, if checkbox is visible and disabled at rowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeFalsy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should return indeterminate = true for selectAll, if checkbox is visible and enabled at rowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true };
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeTruthy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should disable rows if isDisabled is passed to rowOptions', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { isDisabled: true },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: true },
+                    { id: 'c-EU', parentId: undefined, isDisabled: true },
+                ]);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { rowOptions: { isDisabled: false } } });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: false },
+                    { id: 'c-EU', parentId: undefined, isDisabled: false },
+                ]);
+            });
+        });
+
+        it('should allow row to be selectable if isSelectable is passed to rowOptions', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { isSelectable: true },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: true },
+                    { id: 'c-EU', parentId: undefined, isSelectable: true },
+                ]);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { rowOptions: { isSelectable: false } } });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: false },
+                    { id: 'c-EU', parentId: undefined, isSelectable: false },
+                ]);
+            });
+        });
+
+        it('should pass onClick to rows if is specified at rowOptions', async () => {
+            const onClick = jest.fn();
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { onClick },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, onClick },
+                    { id: 'c-EU', parentId: undefined, onClick },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onClick?.(afRow);
+            });
+
+            expect(onClick).toBeCalledTimes(1);
+            expect(onClick).toBeCalledWith(afRow);
+        });
+
+        it('should pass link to rows if is specified at rowOptions', async () => {
+            const link = {
+                pathname: '/some-link',
+            };
+
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions: { link },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, link },
+                    { id: 'c-EU', parentId: undefined, link },
+                ]);
+            });
+        });
+
+        it('should pass value/onValueChange to rows if is specified at rowOptions', async () => {
+            const value = { id: 'someID' } as LocationItem;
+            const onValueChange = jest.fn();
+            const rowOptions = { value, onValueChange };
+
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, ...rowOptions },
+                    { id: 'c-EU', parentId: undefined, ...rowOptions },
+                ]);
+            });
+        });
+
+        it('should pass isReadonly to rows if is specified at rowOptions', async () => {
+            const rowOptions = { isReadonly: true };
+
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, ...rowOptions },
+                    { id: 'c-EU', parentId: undefined, ...rowOptions },
+                ]);
+            });
+        });
+
+        it('should pass isInvalid to rows if is specified at rowOptions', async () => {
+            const rowOptions = { isInvalid: true };
+
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, ...rowOptions },
+                    { id: 'c-EU', parentId: undefined, ...rowOptions },
+                ]);
+            });
+        });
+
+        it('should pin rows if pin function is specified at rowOptions', async () => {
+            const rowOptions = { pin: (item) => item.id === 'c-AF' };
+
+            const { dataSource } = getAsyncLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            const euRow = view.getVisibleRows()[1];
+
+            await act(() => {
+                euRow.onFold?.(euRow);
+            });
+
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'DZ', parentId: 'c-AF', isPinned: false },
+                    { id: 'BJ', parentId: 'c-AF', isPinned: false },
+                ]);
+            });
+
+            currentValue.topIndex = 3;
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'GM', parentId: 'c-AF', isPinned: false },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+        });
+    });
+
+    describe('getRowOptions', () => {
+        it('should not allow checking if checkbox is not configured at getRowOptions', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({}),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is not visible at getRowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is disabled at getRowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should selectAll be null, if checkbox is not configured at getRowOptions', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({}),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should selectAll be null, if checkbox is not visible at getRowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return selectAll, if checkbox is disabled at getRowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeUndefined();
+        });
+
+        it('should selectAll be null, if selectAll = false', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ checkbox: { isVisible: true, isDisabled: false } }),
+                selectAll: false,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return indeterminate = false for selectAll, if checkbox is visible and disabled at getRowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeFalsy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should return indeterminate = true for selectAll, if checkbox is visible and enabled at getRowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true };
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeTruthy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should disable rows if isDisabled is passed to getRowOptions', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ isDisabled: true }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: true },
+                    { id: 'c-EU', parentId: undefined, isDisabled: true },
+                ]);
+            });
+
+            hookResult.rerender({
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: { getRowOptions: () => ({ isDisabled: false }) },
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: false },
+                    { id: 'c-EU', parentId: undefined, isDisabled: false },
+                ]);
+            });
+        });
+
+        it('should allow row to be selectable if isSelectable is passed to getRowOptions', async () => {
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ isSelectable: true }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: true },
+                    { id: 'c-EU', parentId: undefined, isSelectable: true },
+                ]);
+            });
+
+            hookResult.rerender({
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: { getRowOptions: () => ({ isSelectable: false }) } });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: false },
+                    { id: 'c-EU', parentId: undefined, isSelectable: false },
+                ]);
+            });
+        });
+
+        it('should pass onClick to rows if is specified at getRowOptions', async () => {
+            const onClick = jest.fn();
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ onClick }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, onClick },
+                    { id: 'c-EU', parentId: undefined, onClick },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onClick?.(afRow);
+            });
+
+            expect(onClick).toBeCalledTimes(1);
+            expect(onClick).toBeCalledWith(afRow);
+        });
+
+        it('should pass link to rows if is specified at getRowOptions', async () => {
+            const link = {
+                pathname: '/some-link',
+            };
+
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions: () => ({ link }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, link },
+                    { id: 'c-EU', parentId: undefined, link },
+                ]);
+            });
+        });
+
+        it('should pass value/onValueChange to rows if is specified at getRowOptions', async () => {
+            const value = { id: 'someID' } as LocationItem;
+            const onValueChange = jest.fn();
+            const getRowOptions = () => ({ value, onValueChange });
+
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, value, onValueChange },
+                    { id: 'c-EU', parentId: undefined, value, onValueChange },
+                ]);
+            });
+        });
+
+        it('should pass isReadonly to rows if is specified at getRowOptions', async () => {
+            const getRowOptions = () => ({ isReadonly: true });
+
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isReadonly: true },
+                    { id: 'c-EU', parentId: undefined, isReadonly: true },
+                ]);
+            });
+        });
+
+        it('should pass isInvalid to rows if is specified at getRowOptions', async () => {
+            const getRowOptions = () => ({ isInvalid: true });
+
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isInvalid: true },
+                    { id: 'c-EU', parentId: undefined, isInvalid: true },
+                ]);
+            });
+        });
+
+        it('should pin rows if pin function is specified at getRowOptions', async () => {
+            const getRowOptions = () => ({ pin: (item) => item.id === 'c-AF' });
+
+            const { dataSource } = getAsyncLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            const euRow = view.getVisibleRows()[1];
+
+            await act(() => {
+                euRow.onFold?.(euRow);
+            });
+
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'DZ', parentId: 'c-AF', isPinned: false },
+                    { id: 'BJ', parentId: 'c-AF', isPinned: false },
+                ]);
+            });
+
+            currentValue.topIndex = 3;
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'GM', parentId: 'c-AF', isPinned: false },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.search.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.search.test.ts
new file mode 100644
index 0000000000..3ee169b4ac
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.search.test.ts
@@ -0,0 +1,413 @@
+import { CascadeSelection, DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+import { LocationItem, getAsyncLocationsDS } from '../../__tests__/mocks';
+
+describe('AsyncListView - search', () => {
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+    let currentValue: DataSourceState = { visibleCount: 5 };
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+
+    beforeEach(() => {
+        currentValue = { visibleCount: 5 };
+    });
+
+    it('should show unfolded tree results', async () => {
+        const { dataSource } = getAsyncLocationsDS({});
+
+        currentValue.search = 'Zeral';
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        let view = hookResult.result.current;
+        expectViewToLookLike(
+            view,
+            [
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+            ],
+        );
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isFolded: false, indent: 2, depth: 1 },
+                    { id: '2474583', isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+    });
+
+    it.each<CascadeSelection>([true, 'explicit'])('should check all children for search results with cascadeSelection = %s', async (cascadeSelection) => {
+        const { dataSource } = getAsyncLocationsDS({
+            cascadeSelection,
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        currentValue.search = 'Zeral';
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        let view = hookResult.result.current;
+        expectViewToLookLike(
+            view,
+            [
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+            ],
+        );
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        const rows = view.getVisibleRows();
+        const rowDZ = rows[1];
+
+        await act(() => {
+            rowDZ.onCheck?.(rowDZ);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2474583', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        expect(currentValue.checked).toEqual([
+            'DZ',
+            '2474141',
+            '2475744',
+            '2475740',
+            '2475752',
+            '2475687',
+            '2475612',
+            '2475475',
+            '2474638',
+            '2474583',
+            '2474506',
+        ]);
+
+        currentValue.search = 'Touggourt';
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2475475', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        const rowTouggourt = view.getVisibleRows()[2];
+
+        await act(() => {
+            rowTouggourt.onCheck?.(rowTouggourt);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2475475', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        currentValue.search = '';
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                    { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                ],
+            );
+        });
+    });
+
+    it('should check all children for search results with cascadeSelection = implicit', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            cascadeSelection: 'implicit',
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        currentValue.search = 'Zeral';
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        let view = hookResult.result.current;
+        expectViewToLookLike(
+            view,
+            [
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+            ],
+        );
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        const rows = view.getVisibleRows();
+        const rowDZ = rows[1];
+
+        await act(() => {
+            rowDZ.onCheck?.(rowDZ);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2474583', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        expect(currentValue.checked).toEqual(['DZ']);
+
+        currentValue.search = 'Touggourt';
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2475475', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        const rowTouggourt = view.getVisibleRows()[2];
+
+        await act(() => {
+            rowTouggourt.onCheck?.(rowTouggourt);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2475475', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        currentValue.search = '';
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                    { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                ],
+            );
+        });
+    });
+
+    it('should check all children for search results with cascadeSelection = false', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            cascadeSelection: false,
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        currentValue.search = 'Zeral';
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        let view = hookResult.result.current;
+        expectViewToLookLike(
+            view,
+            [
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+            ],
+        );
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        const rows = view.getVisibleRows();
+        const rowDZ = rows[1];
+
+        await act(() => {
+            rowDZ.onCheck?.(rowDZ);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: true, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2474583', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+        });
+
+        expect(currentValue.checked).toEqual(['DZ']);
+
+        currentValue.search = 'Benin';
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'BJ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                ],
+            );
+        });
+
+        currentValue.search = '';
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                    { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                ],
+            );
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.show-only-selected.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.show-only-selected.test.ts
new file mode 100644
index 0000000000..10b522be9c
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.show-only-selected.test.ts
@@ -0,0 +1,563 @@
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getAsyncLocationsDS } from '../../__tests__/mocks';
+
+describe('AsyncListView - show only selected', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('should load items if showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: true,
+        });
+
+        currentValue.checked = ['BJ', 'c-AF', 'DZ'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+    });
+
+    it('should load only selected item if showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: true,
+        });
+
+        currentValue.selectedId = 'c-EU';
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(0);
+    });
+
+    it('should load checked and selected items if showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: true,
+        });
+
+        currentValue.checked = ['BJ', 'c-AF', 'DZ'];
+        currentValue.selectedId = 'c-EU';
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+    });
+
+    it('should load checked and selected items and their parents if showSelectedOnly = false', async () => {
+        const { apiMock, dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: false,
+        });
+
+        currentValue.checked = ['BJ', '2392308'];
+        currentValue.selectedId = '2474506';
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        const view = hookResult.result.current;
+        expectViewToLookLike(view, [
+            { id: 'c-AF' },
+            { id: 'c-EU' },
+        ]);
+    });
+
+    it('should show only selected rows in order of selection', async () => {
+        const { apiMock, dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: false,
+        });
+
+        currentValue.checked = ['BJ', '2392308', 'c-AF'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        let view = hookResult.result.current;
+        expectViewToLookLike(view, [
+            { id: 'c-AF' },
+            { id: 'c-EU' },
+        ]);
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: true } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', parentId: 'c-AF', indent: 0, depth: 1 },
+                { id: '2392308', parentId: 'BJ', indent: 0, depth: 2 },
+                { id: 'c-AF', indent: 0, depth: 0 },
+            ]);
+        });
+    });
+
+    it('should show only selected rows if on init showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: true,
+        });
+
+        currentValue.checked = ['BJ', '2392308', 'c-AF'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        const view = hookResult.result.current;
+        expectViewToLookLike(view, [
+            { id: 'BJ' },
+            { id: '2392308' },
+            { id: 'c-AF' },
+        ]);
+    });
+
+    it('should remove items from showSelectedOnly rows on uncheck with cascadeSelection = explicit', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: false,
+            cascadeSelection: 'explicit',
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', isChecked: false },
+                { id: 'c-EU', isChecked: false },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        let rows = view.getVisibleRows();
+        const rowAF = rows[0];
+        await act(() => {
+            rowAF.onCheck?.(rowAF);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', isChecked: true },
+                { id: 'c-EU', isChecked: false },
+            ]);
+        });
+
+        expect(currentValue).toEqual(
+            expect.objectContaining({ checked: [
+                'c-AF',
+                'DZ',
+                '2474141',
+                '2475744',
+                '2475740',
+                '2475752',
+                '2475687',
+                '2475612',
+                '2475475',
+                '2474638',
+                '2474583',
+                '2474506',
+                'BJ',
+                '2392505',
+                '2392308',
+                '2392204',
+                '2392108',
+                '2392087',
+                '2392009',
+                '2391895',
+                '2391893',
+                '2391455',
+                '2391377',
+                'GM',
+                '2413920',
+                '2413876',
+                '2413753',
+                '2413515',
+                '2412749',
+                '2411880',
+            ],
+            topIndex: 0,
+            visibleCount: 3 }),
+        );
+
+        currentValue.visibleCount = 5;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: true } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', isChecked: true },
+                { id: 'DZ', isChecked: true },
+                { id: '2474141', isChecked: true },
+                { id: '2475744', isChecked: true },
+                { id: '2475740', isChecked: true },
+            ]);
+        });
+
+        rows = view.getVisibleRows();
+        const checkedRowDZ = rows[1];
+
+        await act(() => {
+            checkedRowDZ.onCheck?.(checkedRowDZ);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: true } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', isChecked: true },
+                { id: '2392505', isChecked: true },
+                { id: '2392308', isChecked: true },
+                { id: '2392204', isChecked: true },
+                { id: '2392108', isChecked: true },
+            ]);
+        });
+
+        expect(currentValue).toEqual(
+            expect.objectContaining({ checked: [
+                'BJ',
+                '2392505',
+                '2392308',
+                '2392204',
+                '2392108',
+                '2392087',
+                '2392009',
+                '2391895',
+                '2391893',
+                '2391455',
+                '2391377',
+                'GM',
+                '2413920',
+                '2413876',
+                '2413753',
+                '2413515',
+                '2412749',
+                '2411880',
+            ],
+            topIndex: 0,
+            visibleCount: 5 }),
+        );
+    });
+
+    it('should not clear loading checked items if showSelectedOnly = true', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: true,
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        currentValue.checked = ['BJ', 'c-AF', 'DZ'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        let view = hookResult.result.current;
+        await act(() => {
+            view.clearAllChecked();
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        expect(currentValue).toEqual(
+            expect.objectContaining({ checked: ['BJ', 'c-AF', 'DZ'], topIndex: 0, visibleCount: 3 }),
+        );
+    });
+
+    it('should clear loaded checked items if showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: true,
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        currentValue.checked = [
+            'BJ',
+            'DZ',
+            '2392505',
+            '2392308',
+            '2392204',
+            '2392108',
+            '2392087',
+            '2392009',
+            '2391895',
+            '2391893',
+            '2391455',
+        ];
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', isChecked: true },
+                { id: 'DZ', isChecked: true },
+                { id: '2392505', isChecked: true },
+            ]);
+        });
+
+        const view = hookResult.result.current;
+        await act(() => {
+            view.clearAllChecked();
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            expect(currentValue).toEqual(
+                expect.objectContaining({ checked: [], topIndex: 0, visibleCount: 3 }),
+            );
+        });
+    });
+
+    it('should load tree after clearing checked values with showSelectedOnly = true', async () => {
+        const { dataSource } = getAsyncLocationsDS({
+            showSelectedOnly: true,
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        currentValue.checked = [
+            'SOME_UNKNONW_ITEM',
+            'BJ',
+            'DZ',
+            '2392505',
+            '2392308',
+            '2392204',
+            '2392108',
+            '2392087',
+            '2392009',
+            '2391895',
+            '2391893',
+            '2391455',
+        ];
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', isChecked: true },
+                { id: 'DZ', isChecked: true },
+                { id: '2392505', isChecked: true },
+            ]);
+        }, {});
+
+        let view = hookResult.result.current;
+        await act(() => {
+            view.clearAllChecked();
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            expect(currentValue).toEqual(
+                expect.objectContaining({ checked: [], topIndex: 0, visibleCount: 3 }),
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: false } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        }, {});
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.test.ts
new file mode 100644
index 0000000000..db68107957
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.test.ts
@@ -0,0 +1,1903 @@
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+import { AsyncDataSource, AsyncDataSourceProps } from '../../AsyncDataSource';
+import { CascadeSelection, DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView, SortDirection } from '../../../../types';
+import isEqual from 'lodash.isequal';
+import { AsyncListViewProps } from '../types';
+import { LocationItem, getAsyncLocationsDS } from '../../__tests__/mocks';
+
+interface TItem {
+    id: number;
+    level: string;
+    parentId?: number;
+}
+
+interface TestItem {
+    id: number;
+    parentId?: number;
+    childrenCount?: number;
+}
+
+const testItems: TItem[] = [
+    { id: 2, level: 'A1' },
+    { id: 5, level: 'A2+' },
+    { id: 1, level: 'A0' },
+    { id: 3, level: 'A1+' },
+    { id: 4, level: 'A2' },
+    { id: 6, level: 'B' },
+    { id: 7, level: 'B1+', parentId: 6 },
+    { id: 8, level: 'B2', parentId: 6 },
+    { id: 9, level: 'B2+', parentId: 6 },
+    { id: 10, level: 'C1' },
+    { id: 11, level: 'C1+' },
+    { id: 12, level: 'C2' },
+];
+
+interface Country {
+    id: string;
+    name: string;
+}
+
+const countries: Country[] = [
+    { id: 'CN', name: 'China' },
+    { id: 'ES', name: 'Spain' },
+    { id: 'FI', name: 'Finland' },
+    { id: 'GB', name: 'United Kingdom' },
+    { id: 'NC', name: 'Nicaragua' },
+    { id: 'GN', name: 'Guinea' },
+    { id: 'GW', name: 'Guinea-Bissau' },
+];
+
+const totalRowsCount = 12;
+
+let dataSource: AsyncDataSource<TItem, number, any>;
+let treeDataSource: AsyncDataSource<TestItem, number, any>;
+
+let onValueChangeFn: (newValue: DataSourceState<any, number> | ((value: DataSourceState<any, number>) => DataSourceState<any, number>)) => any;
+const initialValue: DataSourceState = { topIndex: 0, visibleCount: totalRowsCount };
+let currentValue = initialValue;
+let viewProps: AsyncListViewProps<TItem, number, any>;
+
+describe('AsyncListView', () => {
+    const testData: TestItem[] = [
+        { id: 100 }, //  0   100
+        { id: 110, parentId: 100 }, //  1   110
+        { id: 120, parentId: 100 }, //  2     120
+        { id: 121, parentId: 120 }, //  3       121
+        { id: 122, parentId: 120 }, //  4       122
+        { id: 200 }, //  5   200
+        { id: 300 }, //  6   300
+        { id: 310, parentId: 300 }, //  7     310
+        { id: 320, parentId: 300 }, //  8     320
+        { id: 330, parentId: 300 }, //  9     330
+    ];
+
+    testData.forEach((i) => {
+        i.childrenCount = testData.filter((x) => x.parentId === i.id).length;
+    });
+
+    const testDataById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
+    const testApi = jest.fn().mockImplementation(() => Promise.resolve(testItems));
+    const treeTestApi = jest.fn().mockImplementation(() => Promise.resolve(testData));
+
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, number, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, number>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+
+        rows.forEach((r) => {
+            if (r.id) {
+                r.value = testDataById[r.id];
+            }
+        });
+
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        currentValue = initialValue;
+        onValueChangeFn = jest.fn().mockImplementation((newValue) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
+            currentValue = newValue;
+        });
+
+        dataSource = new AsyncDataSource<TItem, number, any>({
+            api: testApi,
+            getId: (i) => i.id,
+            getParentId: (i) => i.parentId,
+        });
+
+        treeDataSource = new AsyncDataSource({
+            api: treeTestApi,
+            getId: (i) => i.id,
+            getParentId: (i) => i.parentId,
+        });
+
+        viewProps = {
+            getId: (i) => i.id,
+            api: testApi,
+            getSearchFields: (item) => [item.level],
+            getRowOptions: () => ({
+                checkbox: {
+                    isVisible: true,
+                },
+                isSelectable: true,
+            }),
+        };
+    });
+
+    it('should reload datasource', async () => {
+        currentValue = { ...initialValue, visibleCount: 3 };
+        const hookResult = renderHook(
+            ({ value }) => treeDataSource.useView(value, onValueChangeFn, {}),
+            { initialProps: { value: currentValue } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 200 }, { id: 300 },
+            ]);
+        });
+
+        treeDataSource.reload();
+
+        hookResult.rerender({ value: currentValue });
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 200 }, { id: 300 },
+            ]);
+        });
+    });
+
+    describe('setValue logic', () => {
+        it('should set new value and update rows', async () => {
+            const getFilter = (filter) => (item) => filter(item);
+            const filter = (item) => item.parentId === 6;
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: { ...initialValue, filter }, onValueChange: onValueChangeFn, props: { ...viewProps, getFilter } } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            let view = hookResult.result.current;
+
+            const rows = view.getVisibleRows();
+
+            hookResult.rerender({ value: { filter: () => true }, onValueChange: onValueChangeFn, props: { ...viewProps, getFilter } });
+            view = hookResult.result.current;
+
+            const newRows = view.getVisibleRows();
+            expect(isEqual(rows, newRows)).toBeFalsy();
+        });
+
+        it('should not update nodes when setValue called with the same value', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            const view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+
+            hookResult.rerender({ value: initialValue, onValueChange: onValueChangeFn, props: viewProps });
+            const newRows = view.getVisibleRows();
+            expect(isEqual(rows, newRows)).toBeTruthy();
+        });
+
+        it('should update focused item if only focusedIndex changed in value', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            let view = hookResult.result.current;
+
+            hookResult.rerender({ value: { ...initialValue, focusedIndex: 1 }, onValueChange: onValueChangeFn, props: viewProps });
+
+            view = hookResult.result.current;
+
+            const rows = view.getVisibleRows();
+            const focusedRows = rows.filter((row) => row.isFocused);
+            expect(focusedRows).toHaveLength(1);
+            expect(focusedRows[0].index).toBe(1);
+        });
+    });
+
+    it('should return item by ID', async () => {
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        const view = hookResult.result.current;
+        const row = view.getById(testItems[1].id, 1);
+        expect(row).toHaveProperty('id', testItems[1].id);
+        expect(row).toHaveProperty('value', testItems[1]);
+        expect(row).toHaveProperty('index', 1);
+    });
+
+    it('should return rows', async () => {
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        let view = hookResult.result.current;
+
+        const topIndex = 2;
+        hookResult.rerender({ value: { ...initialValue, topIndex, visibleCount: 15 }, onValueChange: onValueChangeFn, props: viewProps });
+
+        view = hookResult.result.current;
+        const rows = view.getVisibleRows();
+        const rootTestItems = testItems.filter((i) => i.parentId == null).slice(topIndex);
+        expect(rows).toMatchObject(rootTestItems.map((i) => ({ id: i.id, value: i })));
+        expect(view.getVisibleRows()).toHaveLength(rootTestItems.length);
+    });
+
+    it('should return all nodes, if isFoldedByDefault is false', async () => {
+        const newViewProps: AsyncListViewProps<TItem, number, any> = {
+            getId: (i) => i.id,
+            api: testApi,
+            isFoldedByDefault: () => false,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: newViewProps } },
+        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+        const view = hookResult.result.current;
+
+        const rows = view.getVisibleRows();
+        expect(rows).toMatchObject(testItems.map((i) => ({ id: i.id, value: i })));
+        expect(view.getVisibleRows()).toHaveLength(testItems.length);
+    });
+
+    describe('sorting', () => {
+        it('should return rows in default order, if sorting do not passed', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            let view = hookResult.result.current;
+            hookResult.rerender({
+                value: { ...initialValue, topIndex: 0, visibleCount: 20 },
+                onValueChange: onValueChangeFn,
+                props: viewProps,
+            });
+
+            view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+            expect(rows[0].id).toEqual(2);
+            expect(rows[4].id).toEqual(4);
+        });
+
+        it('should sort rows if set sorting to value', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            let view = hookResult.result.current;
+            hookResult.rerender({
+                value: { ...initialValue, sorting: [{ field: 'id', direction: 'asc' }], topIndex: 0, visibleCount: 20 },
+                onValueChange: onValueChangeFn,
+                props: viewProps,
+            });
+
+            view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+            expect(rows[0].id).toEqual(1);
+            expect(rows[4].id).toEqual(5);
+        });
+    });
+
+    describe('search', () => {
+        let countriesDataSource: AsyncDataSource<Country, string>;
+        let countriesViewProps: AsyncListViewProps<Country, string, any>;
+        let countriesOnValueChange: (newValue: DataSourceState<any, string> | ((value: DataSourceState<any, string>) => DataSourceState<any, string>)) => any;
+        const countriesTestApi = jest.fn().mockImplementation(() => Promise.resolve(countries));
+
+        beforeEach(() => {
+            countriesOnValueChange = jest.fn();
+
+            countriesDataSource = new AsyncDataSource<Country, string>({
+                api: countriesTestApi,
+                getId: (i) => i.id,
+                getSearchFields: (item) => [item.name],
+            });
+
+            countriesViewProps = {
+                getId: (i) => i.id,
+                api: countriesTestApi,
+                getSearchFields: (item) => [item.name],
+                getRowOptions: () => ({
+                    checkbox: {
+                        isVisible: true,
+                    },
+                    isSelectable: true,
+                }),
+            };
+            jest.clearAllMocks();
+        });
+
+        it('should search items', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => countriesDataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: countriesOnValueChange, props: countriesViewProps } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            hookResult.rerender({
+                value: { ...initialValue, search: 'ea', topIndex: 0, visibleCount: 20 },
+                onValueChange: countriesOnValueChange,
+                props: countriesViewProps,
+            });
+
+            const countriesView = hookResult.result.current;
+            const rows = countriesView.getVisibleRows();
+            const rowsIds = rows.map((i) => i.id);
+
+            expect(rows).toHaveLength(2);
+            expect(rowsIds).toEqual(['GN', 'GW']);
+        });
+
+        it('should search items by group of tokens', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => countriesDataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: countriesOnValueChange, props: countriesViewProps } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            hookResult.rerender({
+                value: { ...initialValue, search: 'ea bi', topIndex: 0, visibleCount: 20 },
+                onValueChange: countriesOnValueChange,
+                props: countriesViewProps,
+            });
+
+            const countriesView = hookResult.result.current;
+            const rows = countriesView.getVisibleRows();
+            const rowsIds = rows.map((i) => i.id);
+
+            expect(rows).toHaveLength(1);
+            expect(rowsIds).toEqual(['GW']);
+        });
+
+        it('should sort items in order of search relevance', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => countriesDataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: countriesOnValueChange, props: countriesViewProps } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            hookResult.rerender({
+                value: { ...initialValue, search: 'gu', topIndex: 0, visibleCount: 20 },
+                onValueChange: countriesOnValueChange,
+                props: countriesViewProps,
+            });
+
+            const countriesView = hookResult.result.current;
+            const rows = countriesView.getVisibleRows();
+            const rowsIds = rows.map((i) => i.id);
+
+            expect(rows).toHaveLength(3);
+            expect(rowsIds).toEqual(['GN', 'GW', 'NC']);
+        });
+
+        it('should not sort items in order of search relevance if sortSearchByRelevance = false', async () => {
+            const props: AsyncListViewProps<Country, string, any> = { ...countriesViewProps, sortSearchByRelevance: false };
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => countriesDataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: countriesOnValueChange, props } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            hookResult.rerender({
+                value: { ...initialValue, search: 'gu', topIndex: 0, visibleCount: 20 },
+                onValueChange: countriesOnValueChange,
+                props,
+            });
+
+            const countriesView = hookResult.result.current;
+            const rows = countriesView.getVisibleRows();
+            const rowsIds = rows.map((i) => i.id);
+
+            expect(rows).toHaveLength(3);
+            expect(rowsIds).toEqual(['NC', 'GN', 'GW']);
+        });
+
+        it('should not return items if group was not matched', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => countriesDataSource.useView(value, onValueChange, props),
+                { initialProps: { value: initialValue, onValueChange: countriesOnValueChange, props: countriesViewProps } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            hookResult.rerender({
+                value: { ...initialValue, search: 'wa bx', topIndex: 0, visibleCount: 20 },
+                onValueChange: countriesOnValueChange,
+                props: countriesViewProps,
+            });
+
+            const countriesView = hookResult.result.current;
+            const rows = countriesView.getVisibleRows();
+            const rowsIds = rows.map((i) => i.id);
+
+            expect(rows).toHaveLength(0);
+            expect(rowsIds).toEqual([]);
+        });
+    });
+
+    describe('tree-search', () => {
+        const onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
+            currentValue = newValue;
+        };
+
+        beforeEach(() => {
+            currentValue = { visibleCount: 5 };
+        });
+
+        function expectRows(
+            view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+            rows: Partial<DataRowProps<LocationItem, string>>[],
+        ) {
+            const viewRows = view.getVisibleRows();
+            expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+        }
+
+        it('should show unfolded tree results', async () => {
+            const { dataSource: locationsDS } = getAsyncLocationsDS({
+                getSearchFields: ({ name }) => [name],
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+        });
+
+        it.each<CascadeSelection>([true, 'explicit'])('should check all children for search results with cascadeSelection = %s', async (cascadeSelection) => {
+            const { dataSource: locationsDS } = getAsyncLocationsDS({
+                cascadeSelection,
+                getSearchFields: ({ name }) => [name],
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            let view = hookResult.result.current;
+            expectRows(
+                view,
+                [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                    { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                    { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                ],
+            );
+
+            const rows = view.getVisibleRows();
+            const rowDZ = rows[1];
+
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            expect(currentValue.checked).toEqual([
+                'DZ',
+                '2474141',
+                '2475744',
+                '2475740',
+                '2475752',
+                '2475687',
+                '2475612',
+                '2475475',
+                '2474638',
+                '2474583',
+                '2474506',
+            ]);
+
+            currentValue.search = 'Touggourt';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rowTouggourt = view.getVisibleRows()[2];
+
+            await act(() => {
+                rowTouggourt.onCheck?.(rowTouggourt);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                        { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                    ],
+                );
+            });
+        });
+
+        it('should check all children for search results with cascadeSelection = implicit', async () => {
+            const { dataSource: locationsDS } = getAsyncLocationsDS({
+                cascadeSelection: 'implicit',
+                getSearchFields: ({ name }) => [name],
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            let view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+            const rowDZ = rows[1];
+
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            expect(currentValue.checked).toEqual(['DZ']);
+
+            currentValue.search = 'Touggourt';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rowTouggourt = view.getVisibleRows()[2];
+
+            await act(() => {
+                rowTouggourt.onCheck?.(rowTouggourt);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                        { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                    ],
+                );
+            });
+        });
+
+        it('should check all children for search results with cascadeSelection = false', async () => {
+            const { dataSource: locationsDS } = getAsyncLocationsDS({
+                cascadeSelection: false,
+                getSearchFields: ({ name }) => [name],
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            let view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+            const rowDZ = rows[1];
+
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            expect(currentValue.checked).toEqual(['DZ']);
+
+            currentValue.search = 'Benin';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'BJ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                    ],
+                );
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                        { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                    ],
+                );
+            });
+        });
+    });
+
+    describe('updateTree', () => {
+        const getFilter = (filter) => (item) => filter(item);
+        const filter = (item) => item.parentId === 6;
+
+        it('should update tree if filter was changed', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: currentValue, onValueChange: onValueChangeFn, props: viewProps } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+            hookResult.rerender({
+                value: { ...currentValue, topIndex: 0, visibleCount: 20, filter },
+                onValueChange: onValueChangeFn,
+                props: { ...viewProps, getFilter },
+            });
+
+            let view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+            const rowsIds = rows.map((i) => i.id);
+
+            expect(rows).toHaveLength(1);
+            expect(rowsIds).toEqual([6]);
+
+            const [row] = rows;
+            await act(() => {
+                row.onFold?.(row);
+            });
+
+            hookResult.rerender({
+                value: { ...currentValue, topIndex: 0, visibleCount: 20, filter },
+                onValueChange: onValueChangeFn,
+                props: { ...viewProps, getFilter },
+            });
+
+            view = hookResult.result.current;
+
+            const unfoldedRows = view.getVisibleRows();
+            const unfoldedRowsIds = unfoldedRows.map((i) => i.id);
+            expect(unfoldedRows).toHaveLength(4);
+            expect(unfoldedRowsIds).toEqual([
+                6, 7, 8, 9,
+            ]);
+        });
+
+        it('should update tree if filter and search was changed', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: currentValue, onValueChange: onValueChangeFn, props: viewProps } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+            hookResult.rerender({
+                value: { ...currentValue, topIndex: 0, visibleCount: 20, filter, search: 'B1' },
+                onValueChange: onValueChangeFn,
+                props: { ...viewProps, getFilter },
+            });
+
+            const view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+            const rowsIds = rows.map((i) => i.id);
+
+            expect(rows).toHaveLength(2);
+            expect(rowsIds).toEqual([6, 7]);
+        });
+
+        it('should update tree if filter, search and sorting was changed', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: currentValue, onValueChange: onValueChangeFn, props: viewProps } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+            hookResult.rerender({
+                value: {
+                    ...currentValue,
+                    topIndex: 0,
+                    visibleCount: 20,
+                    filter,
+                    search: 'B',
+                    sorting: [{ field: 'level', direction: 'desc' as SortDirection }],
+                },
+                onValueChange: onValueChangeFn,
+                props: { ...viewProps, getFilter },
+            });
+
+            const view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+            const rowsIds = rows.map((i) => i.id);
+
+            expect(rows).toHaveLength(4);
+            expect(rowsIds).toEqual([
+                6, 9, 8, 7,
+            ]);
+        });
+    });
+
+    describe('rows check', () => {
+        let updatedValue = { ...initialValue };
+        const onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                updatedValue = newValue(updatedValue);
+                return;
+            }
+            updatedValue = newValue;
+        };
+
+        beforeEach(() => {
+            updatedValue = { ...initialValue };
+            currentValue = initialValue;
+        });
+
+        function expectRows(
+            view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+            rows: Partial<DataRowProps<LocationItem, string>>[],
+        ) {
+            const viewRows = view.getVisibleRows();
+            expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+        }
+
+        describe('cascadeSelection = false', () => {
+            it('should select item in single mode', async () => {
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                    { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+                );
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeTruthy();
+                });
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeFalsy();
+                });
+                const view = hookResult.result.current;
+
+                const row = view.getById(6, 6);
+                row.onSelect?.(row);
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    selectedId: 6,
+                });
+            });
+
+            it('onCheck handler should set id to checked Async in value', async () => {
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                    { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+                );
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeTruthy();
+                });
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeFalsy();
+                });
+                let view = hookResult.result.current;
+                const row1 = view.getById(6, 6);
+
+                await act(() => {
+                    row1.onCheck?.(row1);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [6],
+                });
+
+                hookResult.rerender({ value: { ...initialValue, checked: [6] }, onValueChange: onValueChangeFn, props: viewProps });
+                view = hookResult.result.current;
+
+                const row2 = view.getById(7, 7);
+                await act(() => {
+                    row2.onCheck?.(row2);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(2);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [6, 7],
+                });
+            });
+
+            it('should clear specific unknown record', async () => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+                const { dataSource: locationsDS } = getAsyncLocationsDS({
+                    cascadeSelection: false,
+                    showSelectedOnly: true,
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    unknownRow.onCheck?.(unknownRow);
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                expect(updatedValue.checked).toEqual(['BJ']);
+            });
+
+            it('should clear unknown record via clearAll', async () => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+                const { dataSource: locationsDS } = getAsyncLocationsDS({
+                    cascadeSelection: false,
+                    showSelectedOnly: true,
+                    rowOptions: {
+                        checkbox: {
+                            isVisible: true,
+                            isDisabled: false,
+                        },
+                    },
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                expect(updatedValue.checked).toEqual([unknownId, 'BJ']);
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    view.clearAllChecked();
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                await waitFor(() => {
+                    expect(updatedValue.checked).toEqual([]);
+                });
+            });
+        });
+
+        it('should select all top items with cascadeSelection = false', async () => {
+            const currentViewProps: AsyncListViewProps<TItem, number, any> = {
+                api: testApi,
+                getId: (i) => i.id,
+                cascadeSelection: false,
+                getRowOptions: () => ({
+                    checkbox: { isVisible: true },
+                }),
+            };
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: { ...initialValue, checked: [7, 8] }, onValueChange: onValueChangeFn, props: currentViewProps } },
+            );
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeTruthy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+            const view = hookResult.result.current;
+            await act(() => {
+                view.selectAll?.onValueChange(true);
+            });
+
+            expect(onValueChangeFn).toBeCalledTimes(1);
+            expect(currentValue).toEqual({
+                ...initialValue,
+                checked: [
+                    7, 8, 2, 5, 1, 3, 4, 6, 9, 10, 11, 12,
+                ],
+            });
+
+            await act(() => {
+                view.selectAll?.onValueChange(false);
+            });
+
+            expect(onValueChangeFn).toBeCalledTimes(2);
+            expect(currentValue).toEqual({
+                ...initialValue,
+                checked: [],
+            });
+        });
+
+        describe("cascadeSelection = true | cascadeSelection = 'explicit'", () => {
+            it.each<[CascadeSelection]>([[true], ['explicit']])('should check all children when parent checked with cascadeSelection = %s', async (cascadeSelection) => {
+                const currentViewProps: AsyncListViewProps<TItem, number, any> = {
+                    api: testApi,
+                    getId: (i) => i.id,
+                    cascadeSelection,
+                    getRowOptions: () => ({
+                        checkbox: { isVisible: true },
+                    }),
+                };
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                    { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: currentViewProps } },
+                );
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeTruthy();
+                });
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeFalsy();
+                });
+                const view = hookResult.result.current;
+                const row1 = view.getById(6, 6);
+
+                await act(() => {
+                    row1.onCheck?.(row1);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [
+                        6, 7, 8, 9,
+                    ],
+                });
+            });
+
+            it.each<[CascadeSelection]>([[true], ['explicit']])('should check parent if all siblings checked with cascadeSelection = %s', async (cascadeSelection) => {
+                const currentViewProps: AsyncListViewProps<TItem, number, any> = {
+                    api: testApi,
+                    getId: (i) => i.id,
+                    cascadeSelection,
+                    getRowOptions: () => ({
+                        checkbox: { isVisible: true },
+                    }),
+                };
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                    { initialProps: { value: { ...initialValue, checked: [7, 8] }, onValueChange: onValueChangeFn, props: currentViewProps } },
+                );
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeTruthy();
+                });
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeFalsy();
+                });
+                const view = hookResult.result.current;
+
+                const row = view.getById(9, 9);
+
+                await act(() => {
+                    row.onCheck?.(row);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [
+                        7, 8, 9, 6,
+                    ],
+                });
+            });
+
+            it.each<[CascadeSelection]>([[true], ['explicit']])('should select all top items with cascadeSelection = %s', async (cascadeSelection) => {
+                const currentViewProps: AsyncListViewProps<TItem, number, any> = {
+                    api: testApi,
+                    getId: (i) => i.id,
+                    cascadeSelection,
+                    getRowOptions: () => ({
+                        checkbox: { isVisible: true },
+                    }),
+                };
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                    { initialProps: { value: { ...initialValue, checked: [7, 8] }, onValueChange: onValueChangeFn, props: currentViewProps } },
+                );
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeTruthy();
+                });
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeFalsy();
+                });
+                const view = hookResult.result.current;
+                await act(() => {
+                    view.selectAll?.onValueChange(true);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [
+                        7, 8, 2, 5, 1, 3, 4, 6, 9, 10, 11, 12,
+                    ],
+                });
+
+                await act(() => {
+                    view.selectAll?.onValueChange(false);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(2);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [],
+                });
+            });
+
+            it.each<[CascadeSelection]>([[true], ['explicit']])
+            ('should clear specific unknown record cascadeSelection = %s', async (cascadeSelection) => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+                const { dataSource: locationsDS } = getAsyncLocationsDS({
+                    cascadeSelection,
+                    showSelectedOnly: true,
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    unknownRow.onCheck?.(unknownRow);
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                expect(updatedValue.checked).toEqual(['BJ']);
+            });
+
+            it.each<[CascadeSelection]>([[true], ['explicit']])
+            ('should clear unknown record via clearAll with cascadeSelection = %s', async (cascadeSelection) => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue,
+                    checked: [
+                        'BJ',
+                        '2392505',
+                        '2392308',
+                        '2392204',
+                        '2392108',
+                        '2392087',
+                        '2392009',
+                        '2391895',
+                        '2391893',
+                        '2391455',
+                        '2391377',
+                        unknownId,
+                    ],
+                };
+
+                const { dataSource: locationsDS } = getAsyncLocationsDS({
+                    cascadeSelection,
+                    showSelectedOnly: true,
+                    rowOptions: {
+                        checkbox: {
+                            isVisible: true,
+                            isDisabled: false,
+                        },
+                    },
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                expect(updatedValue.checked).toEqual([
+                    'BJ',
+                    '2392505',
+                    '2392308',
+                    '2392204',
+                    '2392108',
+                    '2392087',
+                    '2392009',
+                    '2391895',
+                    '2391893',
+                    '2391455',
+                    '2391377',
+                    unknownId,
+                ]);
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                            { id: '2392505', isChecked: true },
+                            { id: '2392308', isChecked: true },
+                            { id: '2392204', isChecked: true },
+                            { id: '2392108', isChecked: true },
+                            { id: '2392087', isChecked: true },
+                            { id: '2392009', isChecked: true },
+                            { id: '2391895', isChecked: true },
+                            { id: '2391893', isChecked: true },
+                            { id: '2391455', isChecked: true },
+                            { id: '2391377', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    view.clearAllChecked();
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                await waitFor(() => {
+                    expect(updatedValue.checked).toEqual([]);
+                });
+            });
+        });
+
+        describe("cascadeSelection = 'implicit'", () => {
+            it('should check only parent when parent checked with cascadeSelection = implicit', async () => {
+                const currentViewProps: AsyncListViewProps<TItem, number, any> = {
+                    api: testApi,
+                    getId: (i) => i.id,
+                    cascadeSelection: 'implicit',
+                    getRowOptions: () => ({
+                        checkbox: { isVisible: true },
+                    }),
+                };
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                    { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: currentViewProps } },
+                );
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeTruthy();
+                });
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeFalsy();
+                });
+                const view = hookResult.result.current;
+
+                const row1 = view.getById(6, 6);
+
+                await act(() => {
+                    row1.onCheck?.(row1);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [6],
+                });
+            });
+
+            it('should check parent if all siblings checked with cascadeSelection = implicit', async () => {
+                const currentViewProps: AsyncListViewProps<TItem, number, any> = {
+                    api: testApi,
+                    getId: (i) => i.id,
+                    cascadeSelection: 'implicit',
+                    getRowOptions: () => ({
+                        checkbox: { isVisible: true },
+                    }),
+                };
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                    { initialProps: { value: { ...initialValue, checked: [7, 8] }, onValueChange: onValueChangeFn, props: currentViewProps } },
+                );
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeTruthy();
+                });
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeFalsy();
+                });
+                const view = hookResult.result.current;
+
+                const row = view.getById(9, 9);
+                await act(() => {
+                    row.onCheck?.(row);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [6],
+                });
+            });
+
+            it('should select all top items with cascadeSelection = implicit', async () => {
+                const currentViewProps: AsyncListViewProps<TItem, number, any> = {
+                    api: testApi,
+                    getId: (i) => i.id,
+                    cascadeSelection: 'implicit',
+                    getRowOptions: () => ({
+                        checkbox: { isVisible: true },
+                    }),
+                };
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                    { initialProps: { value: { ...initialValue, checked: [7, 8] }, onValueChange: onValueChangeFn, props: currentViewProps } },
+                );
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeTruthy();
+                });
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expect(view.getListProps().isReloading).toBeFalsy();
+                });
+                const view = hookResult.result.current;
+                await act(() => {
+                    view.selectAll?.onValueChange(true);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(1);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [
+                        2, 5, 1, 3, 4, 6, 10, 11, 12,
+                    ],
+                });
+
+                await act(() => {
+                    view.selectAll?.onValueChange(false);
+                });
+
+                expect(onValueChangeFn).toBeCalledTimes(2);
+                expect(currentValue).toEqual({
+                    ...initialValue,
+                    checked: [],
+                });
+            });
+
+            it('should clear specific unknown record', async () => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+                const { dataSource: locationsDS } = getAsyncLocationsDS({
+                    cascadeSelection: 'implicit',
+                    showSelectedOnly: true,
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    unknownRow.onCheck?.(unknownRow);
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                expect(updatedValue.checked).toEqual(['BJ']);
+            });
+
+            it('should clear unknown record via clearAll', async () => {
+                const unknownId = '-10000';
+                updatedValue = { ...updatedValue,
+                    checked: [
+                        'BJ',
+                        unknownId,
+                    ],
+                };
+
+                const { dataSource: locationsDS } = getAsyncLocationsDS({
+                    cascadeSelection: 'implicit',
+                    showSelectedOnly: true,
+                    rowOptions: {
+                        checkbox: {
+                            isVisible: true,
+                            isDisabled: false,
+                        },
+                    },
+                });
+
+                const hookResult = renderHook(
+                    ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                    { initialProps: {
+                        value: updatedValue,
+                        onValueChange: onValueChanged,
+                        props: {},
+                    } },
+                );
+
+                expect(updatedValue.checked).toEqual([
+                    'BJ',
+                    unknownId,
+                ]);
+                await waitFor(() => {
+                    const view = hookResult.result.current;
+                    expectRows(
+                        view,
+                        [
+                            { id: 'BJ', isChecked: true },
+                        ],
+                    );
+                });
+                const view = hookResult.result.current;
+                const unknownRow = view.getById(unknownId, -1000);
+
+                expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+                await act(() => {
+                    view.clearAllChecked();
+                });
+
+                hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+                await waitFor(() => {
+                    expect(updatedValue.checked).toEqual([]);
+                });
+            });
+        });
+    });
+
+    it('should set focusedItem', async () => {
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+        const view = hookResult.result.current;
+        const row = view.getById(6, 6);
+        row.onFocus?.(row.index);
+
+        expect(onValueChangeFn).toBeCalledTimes(1);
+        expect(currentValue).toEqual({ ...initialValue, focusedIndex: row.index });
+    });
+
+    it('should fold/unfold item', async () => {
+        currentValue.visibleCount = 10;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: { value: initialValue, onValueChange: onValueChangeFn, props: viewProps } },
+        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+        const view = hookResult.result.current;
+        const row = view.getVisibleRows()[5];
+        row.onFold?.(row);
+
+        expect(onValueChangeFn).toBeCalledTimes(1);
+        expect(currentValue).toEqual({ ...initialValue, folded: { [row.id]: !row.isFolded } });
+    });
+
+    it('Correctly computes path and isLastChild', async () => {
+        currentValue.folded = { 120: true };
+        currentValue.visibleCount = 10;
+
+        const hookResult = renderHook(
+            ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                cascadeSelection: true,
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+            }),
+            { initialProps: { value: currentValue, onValueChange: onValueChangeFn } },
+        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, path: [], isLastChild: false },
+                    { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
+                    { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
+                    { id: 200, path: [], isLastChild: false },
+                    { id: 300, path: [], isLastChild: true },
+                    { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
+                ],
+            );
+        });
+
+        currentValue.folded = { 120: false };
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChangeFn });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toBe(10);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, path: [], isLastChild: false },
+                    { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
+                    { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
+                    {
+                        id: 121,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: false,
+                    },
+                    {
+                        id: 122,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: true,
+                    },
+                    { id: 200, path: [], isLastChild: false },
+                    { id: 300, path: [], isLastChild: true },
+                    { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toBe(10);
+    });
+
+    it('handles empty result', async () => {
+        const props: Partial<AsyncDataSourceProps<TestItem, number, any>> = {
+            getFilter: () => (item) => item.id === -100500,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
+            { initialProps: { value: { visibleCount: 3, filter: { id: -100500 } }, onValueChange: onValueChangeFn, props } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+        let view = hookResult.result.current;
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, []);
+        });
+
+        expect(view.getListProps().rowsCount).toBe(0);
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/AsyncListView.tree.test.ts b/uui-core/src/data/processing/views/__tests__/AsyncListView.tree.test.ts
new file mode 100644
index 0000000000..5de6b0b3a8
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/AsyncListView.tree.test.ts
@@ -0,0 +1,1180 @@
+import { AsyncDataSource } from '../../AsyncDataSource';
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+
+import {
+    DataSourceState, DataQueryFilter, DataRowProps, IDataSourceView,
+} from '../../../../types';
+
+interface TestItem {
+    id: number;
+    parentId?: number;
+    childrenCount?: number;
+}
+
+describe('AsyncListView', () => {
+    const testData: TestItem[] = [
+        { id: 100 }, //  0   100
+        { id: 110, parentId: 100 }, //  1   110
+        { id: 120, parentId: 100 }, //  2     120
+        { id: 121, parentId: 120 }, //  3       121
+        { id: 122, parentId: 120 }, //  4       122
+        { id: 200 }, //  5   200
+        { id: 300 }, //  6   300
+        { id: 310, parentId: 300 }, //  7     310
+        { id: 320, parentId: 300 }, //  8     320
+        { id: 330, parentId: 300 }, //  9     330
+    ];
+
+    testData.forEach((i) => {
+        i.childrenCount = testData.filter((x) => x.parentId === i.id).length;
+    });
+
+    const testDataById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
+
+    let currentValue: DataSourceState;
+    let onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+
+    const testApi = jest.fn(() => Promise.resolve(testData));
+
+    const treeDataSource = new AsyncDataSource({
+        api: testApi,
+        getParentId: (i) => i.parentId,
+    });
+
+    beforeEach(() => {
+        currentValue = { topIndex: 0, visibleCount: 3 };
+        onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
+            currentValue = newValue;
+        };
+        testApi.mockClear();
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, number, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, number>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+
+        rows.forEach((r) => {
+            if (r.id) {
+                r.value = testDataById[r.id];
+            }
+        });
+
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('can load tree, unfold nodes, and scroll down', async () => {
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    isLoading: true, depth: 0, indent: 0, path: [],
+                }, {
+                    isLoading: true, depth: 0, indent: 0, path: [],
+                }, {
+                    isLoading: true, depth: 0, indent: 0, path: [],
+                },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
+
+        await waitFor(() => {
+            expect(testApi).toBeCalledTimes(1);
+        });
+
+        testApi.mockClear();
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    id: 100, isFoldable: true, isFolded: true, path: [],
+                }, { id: 200, isFoldable: false, path: [] }, {
+                    id: 300, isFoldable: true, isFolded: true, path: [],
+                },
+            ]);
+        });
+
+        // Unfold some rows
+        let rows = view.getVisibleRows();
+        hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            rows = view.getVisibleRows();
+            expect(typeof rows[0].onFold).toBe('function');
+        });
+
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
+
+        hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
+                }, {
+                    id: 110, depth: 1, indent: 2, isFoldable: false,
+                }, {
+                    id: 120, depth: 1, indent: 2, isFoldable: true,
+                }, { id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 },
+            ]);
+        });
+
+        let listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(5);
+
+        // Unfold more rows
+        rows = view.getVisibleRows();
+
+        await act(() => {
+            rows[2].onFold?.(rows[2]);
+        });
+
+        hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
+                }, {
+                    id: 110, depth: 1, indent: 2, isFoldable: false,
+                }, {
+                    id: 120, depth: 1, indent: 2, isFoldable: true,
+                }, {
+                    id: 121, depth: 2, indent: 3, isFoldable: false,
+                }, {
+                    id: 122, depth: 2, indent: 3, isFoldable: false,
+                }, { id: 200, depth: 0, indent: 1 },
+            ]);
+        });
+
+        // Scroll down to bottom
+        hookResult.rerender({ value: { ...currentValue, topIndex: 5, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 }]);
+        });
+
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(7);
+    });
+
+    it('Multi-level folding', async () => {
+        currentValue.visibleCount = 10;
+        const hookResult = renderHook(
+            ({ value }) => treeDataSource.useView(value, onValueChanged, {
+                cascadeSelection: true,
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+            }),
+            { initialProps: { value: currentValue } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 110 }, { id: 120 }, { id: 121 }, { id: 122 }, { id: 200 }, { id: 300 }, { id: 310 }, { id: 320 }, { id: 330 },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        let listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
+
+        // fold row #120
+        let rows = view.getVisibleRows();
+        await act(() => {
+            rows[2].onFold?.(rows[2]);
+        });
+
+        hookResult.rerender({ value: currentValue });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 110 }, { id: 120 }, { id: 200 }, { id: 300 }, { id: 310 }, { id: 320 }, { id: 330 },
+            ]);
+        });
+
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(8);
+
+        // fold row #100
+        rows = view.getVisibleRows();
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
+
+        hookResult.rerender({ value: currentValue });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 200 }, { id: 300 }, { id: 310 }, { id: 320 }, { id: 330 },
+            ]);
+        });
+
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(6);
+    });
+
+    it('Checkboxes works', async () => {
+        currentValue.visibleCount = 3;
+        const hookResult = renderHook(
+            ({ value }) => treeDataSource.useView(value, onValueChanged, {
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+            }),
+            { initialProps: { value: currentValue } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 110, isChecked: false }, { id: 120 },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        let row110 = view.getVisibleRows()[1];
+        await act(() => {
+            row110.onCheck?.(row110);
+        });
+
+        hookResult.rerender({ value: currentValue });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChecked: false }, { id: 110, isChecked: true }, { id: 120, isChecked: false },
+            ]);
+        });
+
+        row110 = view.getVisibleRows()[1];
+        await act(() => {
+            row110.onCheck?.(row110);
+        });
+        hookResult.rerender({ value: currentValue });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChecked: false }, { id: 110, isChecked: false }, { id: 120, isChecked: false },
+            ]);
+        });
+    });
+
+    it('Adjust parent checkbox if children are checked', async () => {
+        currentValue.visibleCount = 10;
+        currentValue.checked = [
+            121, 122, 310, 320,
+        ];
+
+        const hookResult = renderHook(
+            ({ value }) => treeDataSource.useView(value, onValueChanged, {
+                cascadeSelection: true,
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+            }),
+            { initialProps: { value: currentValue } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChildrenChecked: true },
+                { id: 110 },
+                { id: 120, isChildrenChecked: true },
+                { id: 121, isChecked: true },
+                { id: 122, isChecked: true },
+                { id: 200 },
+                { id: 300, isChildrenChecked: true },
+                { id: 310, isChecked: true },
+                { id: 320, isChecked: true },
+                { id: 330 },
+            ]);
+        });
+    });
+
+    it('CascadeSelection = false - Select All', async () => {
+        currentValue.visibleCount = 2; // to check that Select All works even if not all rows are loaded
+        currentValue.checked = [
+            121, 122, 310, 320,
+        ];
+
+        const hookResult = renderHook(
+            ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                cascadeSelection: false,
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+            }),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().selectAll?.value).toBe(false);
+        });
+
+        let view = hookResult.result.current;
+
+        let selectAll = view.getListProps().selectAll;
+        expect(selectAll?.indeterminate).toBe(true);
+
+        await act(() => {
+            selectAll?.onValueChange(true);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.value).toBe(true);
+        });
+
+        selectAll = view.getListProps().selectAll;
+        expect(selectAll?.indeterminate).toBe(false);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isChecked: true, isChildrenChecked: true },
+                    { id: 110, isChecked: true },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: true },
+                    { id: 300, isChecked: true, isChildrenChecked: true },
+                    { id: 310, isChecked: true },
+                    { id: 320, isChecked: true },
+                    { id: 330, isChecked: true },
+                ],
+            );
+        });
+
+        expect(view.getListProps().rowsCount).toBe(10);
+        selectAll = view.getListProps().selectAll;
+        expect(selectAll?.indeterminate).toBe(false);
+        await act(() => {
+            selectAll?.onValueChange(false);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.value).toBe(false);
+        });
+
+        selectAll = view.getListProps().selectAll;
+        expect(selectAll?.indeterminate).toBe(false);
+        await waitFor(() => {
+            view = hookResult.result.current;
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isChecked: false, isChildrenChecked: false },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: false, isChildrenChecked: false },
+                    { id: 121, isChecked: false },
+                    { id: 122, isChecked: false },
+                    { id: 200, isChecked: false },
+                    { id: 300, isChecked: false, isChildrenChecked: false },
+                    { id: 310, isChecked: false },
+                    { id: 320, isChecked: false },
+                    { id: 330, isChecked: false },
+                ],
+            );
+        });
+
+        expect(view.getListProps().rowsCount).toBe(10);
+    });
+
+    describe('CascadeSelection - explicit mode', () => {
+        it('Cascade selection works', async () => {
+            currentValue.visibleCount = 6;
+            const hookResult = renderHook(
+                ({ value }) => treeDataSource.useView(value, onValueChanged, {
+                    getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                    isFoldedByDefault: () => false,
+                    cascadeSelection: true,
+                }),
+                { initialProps: { value: currentValue } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100 }, //  0   100
+                    { id: 110, parentId: 100 }, //  1   110
+                    { id: 120, parentId: 100, isChecked: false }, //  2     120
+                    { id: 121, parentId: 120 }, //  3       121
+                    { id: 122, parentId: 120 }, //  4       122
+                    { id: 200 }, //  5   200
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            let row120 = view.getVisibleRows()[2];
+
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
+
+            hookResult.rerender({ value: currentValue });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: true },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: false },
+                ]);
+            });
+
+            row120 = view.getVisibleRows()[2];
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
+
+            hookResult.rerender({ value: currentValue });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: false },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: false, isChildrenChecked: false },
+                    { id: 121, isChecked: false },
+                    { id: 122, isChecked: false },
+                    { id: 200, isChecked: false },
+                ]);
+            });
+        });
+
+        it('Cascade selection - handles quick (simultaneous) clicks', async () => {
+            currentValue.visibleCount = 10;
+
+            const hookResult = renderHook(
+                ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                    getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                    isFoldedByDefault: () => false,
+                    cascadeSelection: true,
+                }),
+                { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100 }, //  0   100
+                    { id: 110, parentId: 100 }, //  1   110
+                    { id: 120, parentId: 100, isChecked: false }, //  2     120
+                    { id: 121, parentId: 120 }, //  3       121
+                    { id: 122, parentId: 120 }, //  4       122
+                    { id: 200 }, //  5   200
+                    { id: 300 }, //  6   300
+                    { id: 310, parentId: 300 }, //  7     310
+                    { id: 320, parentId: 300 }, //  8     320
+                    { id: 330, parentId: 300 }, //  9     330
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            const row120 = view.getVisibleRows()[2];
+
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            view = hookResult.result.current;
+            const row300 = view.getVisibleRows()[6];
+            expect(row300.id).toBe(300);
+
+            await act(() => {
+                row300.onCheck?.(row300);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: true },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: false },
+                    { id: 300, isChecked: true, isChildrenChecked: true },
+                    { id: 310, isChecked: true },
+                    { id: 320, isChecked: true },
+                    { id: 330, isChecked: true },
+                ]);
+            });
+        });
+
+        it('Select All', async () => {
+            currentValue.visibleCount = 2; // to check that Select All works even if not all rows are loaded
+            currentValue.checked = [
+                121, 122, 310, 320,
+            ];
+
+            const hookResult = renderHook(
+                ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                    cascadeSelection: true,
+                    getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                    isFoldedByDefault: () => false,
+                }),
+                { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().selectAll?.value).toBe(false);
+            });
+
+            let view = hookResult.result.current;
+
+            let selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(true);
+
+            await act(() => {
+                selectAll?.onValueChange(true);
+            });
+
+            currentValue.visibleCount = 10;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(true);
+            });
+
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(false);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 100, isChecked: true, isChildrenChecked: true },
+                        { id: 110, isChecked: true },
+                        { id: 120, isChecked: true, isChildrenChecked: true },
+                        { id: 121, isChecked: true },
+                        { id: 122, isChecked: true },
+                        { id: 200, isChecked: true },
+                        { id: 300, isChecked: true, isChildrenChecked: true },
+                        { id: 310, isChecked: true },
+                        { id: 320, isChecked: true },
+                        { id: 330, isChecked: true },
+                    ],
+                );
+            });
+
+            expect(view.getListProps().rowsCount).toBe(10);
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(false);
+            await act(() => {
+                selectAll?.onValueChange(false);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(false);
+            });
+
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(false);
+            await waitFor(() => {
+                view = hookResult.result.current;
+
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 100, isChecked: false, isChildrenChecked: false },
+                        { id: 110, isChecked: false },
+                        { id: 120, isChecked: false, isChildrenChecked: false },
+                        { id: 121, isChecked: false },
+                        { id: 122, isChecked: false },
+                        { id: 200, isChecked: false },
+                        { id: 300, isChecked: false, isChildrenChecked: false },
+                        { id: 310, isChecked: false },
+                        { id: 320, isChecked: false },
+                        { id: 330, isChecked: false },
+                    ],
+                );
+            });
+
+            expect(view.getListProps().rowsCount).toBe(10);
+        });
+    });
+
+    describe('CascadeSelection - implicit mode', () => {
+        it('Cascade selection works', async () => {
+            currentValue.visibleCount = 6;
+            const hookResult = renderHook(
+                ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                    getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                    isFoldedByDefault: () => false,
+                    cascadeSelection: 'implicit',
+                }),
+                { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100 }, //  0   100
+                    { id: 110, parentId: 100 }, //  1   110
+                    { id: 120, parentId: 100, isChecked: false }, //  2     120
+                    { id: 121, parentId: 120 }, //  3       121
+                    { id: 122, parentId: 120 }, //  4       122
+                    { id: 200 }, //  5   200
+                ]);
+            });
+
+            let view = hookResult.result.current;
+
+            let row120 = view.getVisibleRows()[2];
+            expect(row120.id).toBe(120);
+            expect(row120.isChecked).toBe(false);
+
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
+            expect(currentValue.checked).toEqual([120]);
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: true },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: false },
+                ]);
+            });
+
+            expect(currentValue.checked).toEqual([120]);
+
+            row120 = view.getVisibleRows()[2];
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: false },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: false, isChildrenChecked: false },
+                    { id: 121, isChecked: false },
+                    { id: 122, isChecked: false },
+                    { id: 200, isChecked: false },
+                ]);
+            });
+
+            expect(currentValue.checked).toEqual([]);
+        });
+
+        it('Cascade selection - handles quick (simultaneous) clicks', async () => {
+            currentValue.visibleCount = 10;
+
+            const hookResult = renderHook(
+                ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                    getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                    isFoldedByDefault: () => false,
+                    cascadeSelection: 'implicit',
+                }),
+                { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100 }, //  0   100
+                    { id: 110, parentId: 100 }, //  1   110
+                    { id: 120, parentId: 100, isChecked: false }, //  2     120
+                    { id: 121, parentId: 120 }, //  3       121
+                    { id: 122, parentId: 120 }, //  4       122
+                    { id: 200 }, //  5   200
+                    { id: 300 }, //  6   300
+                    { id: 310, parentId: 300 }, //  7     310
+                    { id: 320, parentId: 300 }, //  8     320
+                    { id: 330, parentId: 300 }, //  9     330
+                ]);
+            });
+            let view = hookResult.result.current;
+            const row120 = view.getVisibleRows()[2];
+            expect(row120.id).toBe(120);
+
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            view = hookResult.result.current;
+            const row300 = view.getVisibleRows()[6];
+            expect(row300.id).toBe(300);
+
+            await act(() => {
+                row300.onCheck?.(row300);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: true },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: false },
+                    { id: 300, isChecked: true, isChildrenChecked: true },
+                    { id: 310, isChecked: true },
+                    { id: 320, isChecked: true },
+                    { id: 330, isChecked: true },
+                ]);
+            });
+
+            expect(currentValue.checked).toEqual([120, 300]);
+        });
+
+        it('Select All', async () => {
+            currentValue.visibleCount = 2; // to check that Select All works even if not all rows are loaded
+            currentValue.checked = [
+                121, 122, 310, 320,
+            ];
+            const hookResult = renderHook(
+                ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                    cascadeSelection: 'implicit',
+                    getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                    isFoldedByDefault: () => false,
+                }),
+                { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(false);
+            });
+
+            let view = hookResult.result.current;
+            let selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(true);
+
+            await act(() => {
+                selectAll?.onValueChange(true);
+            });
+
+            currentValue.visibleCount = 10;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(true);
+            });
+
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(false);
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 100, isChecked: true, isChildrenChecked: true },
+                        { id: 110, isChecked: true },
+                        { id: 120, isChecked: true, isChildrenChecked: true },
+                        { id: 121, isChecked: true },
+                        { id: 122, isChecked: true },
+                        { id: 200, isChecked: true },
+                        { id: 300, isChecked: true, isChildrenChecked: true },
+                        { id: 310, isChecked: true },
+                        { id: 320, isChecked: true },
+                        { id: 330, isChecked: true },
+                    ],
+                );
+            });
+
+            expect(view.getListProps().rowsCount).toBe(10);
+
+            expect(currentValue.checked).toEqual([
+                100, 200, 300,
+            ]);
+
+            view = hookResult.result.current;
+            selectAll = view.getListProps().selectAll;
+            await act(() => {
+                selectAll?.onValueChange(false);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(false);
+            });
+
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(false);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                // console.log(view.getVisibleRows());
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 100, isChecked: false, isChildrenChecked: false },
+                        { id: 110, isChecked: false },
+                        { id: 120, isChecked: false, isChildrenChecked: false },
+                        { id: 121, isChecked: false },
+                        { id: 122, isChecked: false },
+                        { id: 200, isChecked: false },
+                        { id: 300, isChecked: false, isChildrenChecked: false },
+                        { id: 310, isChecked: false },
+                        { id: 320, isChecked: false },
+                        { id: 330, isChecked: false },
+                    ],
+                );
+            });
+
+            expect(view.getListProps().rowsCount).toBe(10);
+        });
+    });
+
+    it('FocusedIndex works', async () => {
+        currentValue.visibleCount = 3;
+
+        const hookResult = renderHook(
+            ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+                cascadeSelection: true,
+            }),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isFocused: false }, { id: 110, isFocused: false }, { id: 120, isFocused: false },
+                ],
+            );
+        });
+
+        let view = hookResult.result.current;
+
+        currentValue.focusedIndex = 0;
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isFocused: true }, { id: 110, isFocused: false }, { id: 120, isFocused: false },
+                ],
+            );
+        });
+
+        currentValue.focusedIndex = 2;
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isFocused: false }, { id: 110, isFocused: false }, { id: 120, isFocused: true },
+                ],
+            );
+        });
+    });
+
+    it('Correctly computes path and isLastChild', async () => {
+        currentValue.folded = { 120: true };
+        currentValue.visibleCount = 10;
+
+        const hookResult = renderHook(
+            ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                cascadeSelection: true,
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+            }),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, path: [], isLastChild: false },
+                    { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
+                    { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
+                    { id: 200, path: [], isLastChild: false },
+                    { id: 300, path: [], isLastChild: true },
+                    { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
+                ],
+            );
+        });
+
+        currentValue.folded = { 120: false };
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, path: [], isLastChild: false },
+                    { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
+                    { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
+                    {
+                        id: 121,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: false,
+                    },
+                    {
+                        id: 122,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: true,
+                    },
+                    { id: 200, path: [], isLastChild: false },
+                    { id: 300, path: [], isLastChild: true },
+                    { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
+                ],
+            );
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toBe(10);
+    });
+
+    it('Correctly fold inner children in hierarchy', async () => {
+        const testDataLocal: TestItem[] = [
+            { id: 100 },
+            { id: 110, parentId: 100 }, // we add a lot of row here, to prevent loading some rows on initial load
+            { id: 111, parentId: 110 },
+            { id: 112, parentId: 110 },
+            { id: 113, parentId: 110 },
+            { id: 114, parentId: 110 },
+            { id: 115, parentId: 110 },
+            { id: 116, parentId: 110 },
+            { id: 120, parentId: 100 },
+            { id: 121, parentId: 120 }, // these children won't be loaded.
+            { id: 122, parentId: 120 }, // there was bug that non-loaded children was still produce loading rows
+            { id: 123, parentId: 120 }, // as there were missing check that parent is folded
+            { id: 124, parentId: 120 },
+            { id: 125, parentId: 120 },
+            { id: 200 },
+            { id: 300 },
+            { id: 400 },
+            { id: 500 },
+            { id: 600 },
+            { id: 700 },
+            { id: 800 },
+            { id: 900 },
+        ];
+
+        testDataLocal.forEach((i) => {
+            i.childrenCount = testDataLocal.filter((x) => x.parentId === i.id).length;
+        });
+
+        currentValue.visibleCount = 5;
+
+        const testApiLocal = jest.fn(() => Promise.resolve(testDataLocal));
+
+        const ds = new AsyncDataSource({
+            api: testApiLocal,
+        });
+
+        const hookResult = renderHook(
+            ({ value, onValueChange }) => ds.useView(value, onValueChange, {
+                cascadeSelection: true,
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+                getParentId: (i) => i.parentId,
+            }),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const viewRows = view.getVisibleRows();
+
+            const expectedRows = [
+                { id: 100, isFolded: false },
+                { id: 110, isFolded: false, parentId: 100 }, // we add a lot of row here, to prevent loading some rows on initial load
+                { id: 111, isFolded: false, parentId: 110 },
+                { id: 112, isFolded: false, parentId: 110 },
+                { id: 113, isFolded: false, parentId: 110 },
+            ];
+
+            expect(viewRows).toEqual(expectedRows.map((r) => expect.objectContaining(r)));
+        });
+
+        let view = hookResult.result.current;
+        // fold row #100
+        let rows = view.getVisibleRows();
+
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            rows = view.getVisibleRows();
+
+            expect(rows).toEqual([
+                { id: 100 }, { id: 200 }, { id: 300 }, { id: 400 }, { id: 500 },
+            ].map((r) => expect.objectContaining(r)));
+        });
+    });
+
+    it('should check/uncheck parents if all/no siblings checked', async () => {
+        currentValue.visibleCount = 10;
+
+        const hookResult = renderHook(
+            ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+                cascadeSelection: true,
+            }),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+
+            expectViewToLookLike(view, [
+                { id: 100, isChildrenChecked: false, isFolded: false },
+                { id: 110, isChildrenChecked: false, isFolded: false },
+                { id: 120, isFolded: false },
+                { id: 121, isFolded: false },
+                { id: 122, isFolded: false },
+                { id: 200, isFolded: false },
+                { id: 300, isFolded: false },
+                { id: 310, isFolded: false },
+                { id: 320, isFolded: false },
+                { id: 330, isFolded: false },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        let row121 = view.getVisibleRows()[3];
+
+        await act(() => {
+            row121.onCheck?.(row121);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+        view = hookResult.result.current;
+        const row122 = view.getVisibleRows()[4];
+        await act(() => {
+            row122.onCheck?.(row122);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChildrenChecked: true },
+                { id: 110 },
+                { id: 120, isChecked: true, isChildrenChecked: true },
+                { id: 121, isChecked: true },
+                { id: 122, isChecked: true },
+                { id: 200 },
+                { id: 300, isChildrenChecked: false },
+                { id: 310, isChecked: false },
+                { id: 320, isChecked: false },
+                { id: 330 },
+            ]);
+        });
+
+        view = hookResult.result.current;
+        row121 = view.getVisibleRows()[3];
+        await act(() => {
+            row121.onCheck?.(row121);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChildrenChecked: true },
+                { id: 110 },
+                { id: 120, isChecked: false, isChildrenChecked: true },
+                { id: 121, isChecked: false },
+                { id: 122, isChecked: true },
+                { id: 200 },
+                { id: 300, isChildrenChecked: false },
+                { id: 310, isChecked: false },
+                { id: 320, isChecked: false },
+                { id: 330 },
+            ]);
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.background-reload.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.background-reload.test.ts
new file mode 100644
index 0000000000..ed2b6abd22
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.background-reload.test.ts
@@ -0,0 +1,1023 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getLazyLocationsDS, getLazyPagedLocationsDS } from '../../__tests__/mocks';
+
+describe('LazyListView - background reload', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it.each([true, false])
+    ('should show placeholders and isReloading flag on init when backgroundReload = %s', async (backgroundReload) => {
+        const { dataSource } = getLazyLocationsDS({
+            backgroundReload,
+        });
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        let view = hookResult.result.current;
+        await waitFor(() => {
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+        });
+
+        expect(view.getListProps().rowsCount).toEqual(2);
+    });
+
+    describe('backgroundReload = true', () => {
+        it('should not show placeholders on filter (from props) change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                backgroundReload: true,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { filter: { id: 'c-EU' } } });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' }, { id: 'c-EU' },
+                ],
+            );
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+
+        it('should not show placeholders on filter (from state) change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                backgroundReload: true,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            currentValue.filter = { id: 'c-EU' };
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' }, { id: 'c-EU' },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+
+        it('should not show placeholders on search change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                backgroundReload: true,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            currentValue.search = 'Eur';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' }, { id: 'c-EU' },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+
+        it('should not show placeholders on sort change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                backgroundReload: true,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' }, { id: 'c-EU' },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' }, { id: 'c-AF' },
+                ],
+            );
+        });
+
+        it('should not show placeholders on force reload with backgroundReload = true', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                backgroundReload: true,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            view.reload();
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+        });
+
+        it('should not show placeholders on page change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyPagedLocationsDS({
+                backgroundReload: true,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            currentValue.page = 1;
+            currentValue.pageSize = 1;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            expectViewToLookLike(view, [{ id: 'c-AF' }]);
+
+            currentValue.page = 2;
+            currentValue.pageSize = 1;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(view, [{ id: 'c-AF' }]);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            expectViewToLookLike(view, [{ id: 'c-EU' }]);
+        });
+
+        it('should not show placeholders on pageSize change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyPagedLocationsDS({
+                backgroundReload: true,
+                isFoldedByDefault: () => false,
+            });
+            const viewProps = { filter: { parentId: 'BJ' } };
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: viewProps,
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: '2392505', parentId: 'BJ', indent: 0 },
+                { id: '2392308', parentId: 'BJ', indent: 0 },
+                { id: '2392204', parentId: 'BJ', indent: 0 },
+            ]);
+
+            currentValue.page = 1;
+            currentValue.pageSize = 2;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(view, [
+                { id: '2392505', parentId: 'BJ', indent: 0 },
+                { id: '2392308', parentId: 'BJ', indent: 0 },
+                { id: '2392204', parentId: 'BJ', indent: 0 },
+            ]);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: '2392505', parentId: 'BJ', indent: 0 },
+                { id: '2392308', parentId: 'BJ', indent: 0 },
+            ]);
+            currentValue.page = 1;
+            currentValue.pageSize = 4;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(view, [
+                { id: '2392505', parentId: 'BJ', indent: 0 },
+                { id: '2392308', parentId: 'BJ', indent: 0 },
+            ]);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: '2392505', parentId: 'BJ', indent: 0 },
+                { id: '2392308', parentId: 'BJ', indent: 0 },
+                { id: '2392204', parentId: 'BJ', indent: 0 },
+            ]);
+        });
+    });
+
+    describe('backgroundReload = false', () => {
+        it('should show placeholders on filter (from props) change with backgroundReload = false', async () => {
+            const { dataSource } = getLazyLocationsDS({});
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { filter: { id: 'c-EU' } } });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+
+        it('should show placeholders on filter (from state) change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyLocationsDS({});
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            currentValue.filter = { id: 'c-EU' };
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+
+        it('should show placeholders on search change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyLocationsDS({});
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            currentValue.search = 'Eur';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+
+        it('should show placeholders on sort change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyLocationsDS({});
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' }, { id: 'c-AF' },
+                ],
+            );
+        });
+
+        it('should show placeholders on page change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyPagedLocationsDS({});
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 'c-AF' }, { id: 'c-EU' }]);
+
+            expect(view.getListProps().rowsCount).toEqual(2);
+
+            currentValue.page = 1;
+            currentValue.pageSize = 1;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            expectViewToLookLike(view, [{ id: 'c-AF' }]);
+
+            currentValue.page = 2;
+            currentValue.pageSize = 1;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            expectViewToLookLike(view, [{ id: 'c-EU' }]);
+        });
+
+        it('should show placeholders on pageSize change with backgroundReload = true', async () => {
+            const { dataSource } = getLazyPagedLocationsDS({
+                isFoldedByDefault: () => false,
+            });
+            const viewProps = { filter: { parentId: 'BJ' } };
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: viewProps,
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true }, { isLoading: true }, { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: '2392505', parentId: 'BJ', indent: 0 },
+                { id: '2392308', parentId: 'BJ', indent: 0 },
+                { id: '2392204', parentId: 'BJ', indent: 0 },
+            ]);
+
+            currentValue.page = 1;
+            currentValue.pageSize = 2;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: '2392505', parentId: 'BJ', indent: 0 },
+                { id: '2392308', parentId: 'BJ', indent: 0 },
+            ]);
+            currentValue.page = 1;
+            currentValue.pageSize = 4;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeTruthy();
+            });
+
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: '2392505', parentId: 'BJ', indent: 0 },
+                { id: '2392308', parentId: 'BJ', indent: 0 },
+                { id: '2392204', parentId: 'BJ', indent: 0 },
+            ]);
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.bad-child-counts.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.bad-child-counts.test.ts
index 96f97c56d4..54f2941a37 100644
--- a/uui-core/src/data/processing/views/__tests__/LazyListView.bad-child-counts.test.ts
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.bad-child-counts.test.ts
@@ -1,10 +1,10 @@
 import { LazyDataSource } from '../../LazyDataSource';
-import { LazyListView, LazyListViewProps } from '../LazyListView';
 import {
-    DataSourceState, LazyDataSourceApiRequest, DataQueryFilter, DataRowProps,
+    DataSourceState, LazyDataSourceApiRequest, DataQueryFilter, DataRowProps, IDataSourceView,
 } from '../../../../types';
 import { runDataQuery } from '../../../querying/runDataQuery';
-import { delay, renderHook } from '@epam/uui-test-utils';
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { LazyListViewProps } from '../types';
 
 interface TestItem {
     id: number;
@@ -27,9 +27,14 @@ describe('LazyListView', () => {
     ];
 
     let currentValue: DataSourceState;
-    const onValueChanged = (newValue: DataSourceState) => {
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
         currentValue = newValue;
     };
+
     let viewProps: Partial<LazyListViewProps<TestItem, number, DataQueryFilter<TestItem>>>;
 
     const testApi = (rq: LazyDataSourceApiRequest<TestItem, number, DataQueryFilter<TestItem>>) => Promise.resolve(runDataQuery(testData, rq));
@@ -44,7 +49,7 @@ describe('LazyListView', () => {
         currentValue = { topIndex: 0, visibleCount: 10 };
     });
 
-    function expectViewToLookLike(view: LazyListView<TestItem, number>, rows: Partial<DataRowProps<TestItem, number>>[], rowsCount?: number) {
+    function expectViewToLookLike(view: IDataSourceView<TestItem, number, any>, rows: Partial<DataRowProps<TestItem, number>>[], rowsCount?: number) {
         const viewRows = view.getVisibleRows();
         expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
         const listProps = view.getListProps();
@@ -59,42 +64,48 @@ describe('LazyListView', () => {
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: viewProps } },
         );
 
-        const view = hookResult.result.current;
-        expectViewToLookLike(view, [
-            { isLoading: true },
-            { isLoading: true },
-            { isLoading: true },
-            { isLoading: true },
-            { isLoading: true },
-            { isLoading: true },
-            { isLoading: true },
-            { isLoading: true },
-            { isLoading: true },
-            { isLoading: true },
-        ]);
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+                { isLoading: true },
+            ]);
+        });
+
+        let view = hookResult.result.current;
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        await delay();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    {
+                        id: 100, depth: 0, isFoldable: true, isFolded: false,
+                    }, //  0   100 // less children than specified
+                    { id: 110, depth: 1, isFoldable: false }, //  1     110
+                    {
+                        id: 120, depth: 1, isFoldable: true, isFolded: false,
+                    }, //  2       120   // more children than specified
+                    { id: 121, depth: 2 }, //  3         121
+                    { id: 122, depth: 2 }, //  4         122
+                    { id: 200, depth: 0, isFoldable: false }, //  5   200 // declared 1 child, but there's none
+                    { id: 300, depth: 0 }, //  6   300
+                    { id: 310, depth: 1 }, //  7     310
+                    { id: 320, depth: 1 }, //  8     320
+                    { id: 330, depth: 1 }, //  9     330
+                ],
+            );
+        });
 
-        expectViewToLookLike(
-            view,
-            [
-                {
-                    id: 100, depth: 0, isFoldable: true, isFolded: false,
-                }, //  0   100 // less children than specified
-                { id: 110, depth: 1, isFoldable: false }, //  1     110
-                {
-                    id: 120, depth: 1, isFoldable: true, isFolded: false,
-                }, //  2       120   // more children than specified
-                { id: 121, depth: 2 }, //  3         121
-                { id: 122, depth: 2 }, //  4         122
-                { id: 200, depth: 0, isFoldable: false }, //  5   200 // declared 1 child, but there's none
-                { id: 300, depth: 0 }, //  6   300
-                { id: 310, depth: 1 }, //  7     310
-                { id: 320, depth: 1 }, //  8     320
-                { id: 330, depth: 1 }, //  9     330
-            ],
-            10,
-        );
+        expect(view.getListProps().rowsCount).toEqual(10);
     });
 });
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.complex-ids.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.complex-ids.test.ts
index 774397968d..c73aea7723 100644
--- a/uui-core/src/data/processing/views/__tests__/LazyListView.complex-ids.test.ts
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.complex-ids.test.ts
@@ -1,8 +1,8 @@
 import { LazyDataSource } from '../../LazyDataSource';
-import { LazyListView, LazyListViewProps } from '../LazyListView';
 import { runDataQuery } from '../../../querying/runDataQuery';
-import { delay, renderHook } from '@epam/uui-test-utils';
-import { DataQueryFilter, DataRowProps, DataSourceState } from '../../../../types';
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataQueryFilterCondition, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LazyListViewProps } from '../types';
 
 interface TestParent {
     type: 'parent';
@@ -26,12 +26,24 @@ describe('LazyListView - can work with id like [string, number]', () => {
     ];
 
     let currentValue: DataSourceState<DataQueryFilter<TestItem>, TestItemId>;
-    const onValueChanged = (newValue: typeof currentValue) => {
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<TestItem>, TestItemId>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
         currentValue = newValue;
     };
 
     const treeDataSource = new LazyDataSource<TestItem, TestItemId, DataQueryFilter<TestItem>>({
-        api: async (_, ctx) => {
+        api: async (request, ctx) => {
+            if (request.ids && request.ids.length) {
+                const data = request.ids.map(([type, id]) => runDataQuery(testData, {
+                    filter: { type: type as DataQueryFilterCondition<'child'>, id },
+                }));
+
+                return { items: data.flatMap(({ items }) => items) };
+            }
+
             if (ctx?.parent) {
                 return runDataQuery(testData, { filter: { type: 'child', parentId: ctx.parent.id } });
             } else {
@@ -49,11 +61,12 @@ describe('LazyListView - can work with id like [string, number]', () => {
         currentValue = { topIndex: 0, visibleCount: 3 };
     });
 
-    function expectViewToLookLike(view: LazyListView<TestItem, TestItemId>, rows: Partial<DataRowProps<TestItem, TestItemId>>[], rowsCount?: number) {
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, TestItemId, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, TestItemId>>[],
+    ) {
         const viewRows = view.getVisibleRows();
         expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
-        const listProps = view.getListProps();
-        rowsCount != null && expect(listProps.rowsCount).toEqual(rowsCount);
     }
 
     it('can load tree, unfold nodes, and scroll down', async () => {
@@ -62,16 +75,22 @@ describe('LazyListView - can work with id like [string, number]', () => {
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
         );
 
-        const view = hookResult.result.current;
+        await waitFor(() => {
+            const view = hookResult.result.current;
 
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
-        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
 
-        await delay();
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        expectViewToLookLike(view, [{ id: ['parent', 1], isFoldable: true, isFolded: true }], 1);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: ['parent', 1], isFoldable: true, isFolded: true }]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(1);
     });
 
     it('can unfold nodes', async () => {
@@ -80,26 +99,32 @@ describe('LazyListView - can work with id like [string, number]', () => {
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
         );
 
-        const view = hookResult.result.current;
+        let view = hookResult.result.current;
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        await delay();
-
-        expectViewToLookLike(view, [{ id: ['parent', 1], isFoldable: true, isFolded: true }], 1);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: ['parent', 1], isFoldable: true, isFolded: true }]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(1);
 
         // Unfold a row
-        let rows = view.getVisibleRows();
-        rows[0].onFold?.(rows[0]);
+        const rows = view.getVisibleRows();
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
 
         hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
+        view = hookResult.result.current;
 
-        rows = view.getVisibleRows();
-
-        await delay();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: ['parent', 1] }, { id: ['child', 1] }, { id: ['child', 2] },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            { id: ['parent', 1] }, { id: ['child', 1] }, { id: ['child', 2] },
-        ], 3);
+        expect(view.getListProps().rowsCount).toEqual(3);
     });
 
     it('Checkboxes works', async () => {
@@ -118,72 +143,54 @@ describe('LazyListView - can work with id like [string, number]', () => {
                 props: viewProps,
             } },
         );
-
-        const view = hookResult.result.current;
-        view.getVisibleRows(); // load;
-        await delay();
-
-        expectViewToLookLike(
-            view,
-            [
-                { id: ['parent', 1], isChildrenChecked: true, isChecked: false }, { id: ['child', 1], isChecked: true }, { id: ['child', 2], isChecked: false },
-            ],
-            3,
-        );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: ['parent', 1], isChildrenChecked: true, isChecked: false }, { id: ['child', 1], isChecked: true }, { id: ['child', 2], isChecked: false },
+                ],
+            );
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
 
         let row = view.getVisibleRows()[2]; // -> all children checked = parent checked
-        row.onCheck?.(row);
-        await delay(); // checkboxes are async in LazyDataSource
+        await act(() => {
+            row.onCheck?.(row);
+        });
 
         hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
 
-        await delay();
-
-        expectViewToLookLike(
-            view,
-            [
-                { id: ['parent', 1], isChildrenChecked: true, isChecked: true }, { id: ['child', 1], isChecked: true }, { id: ['child', 2], isChecked: true },
-            ],
-            3,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: ['parent', 1], isChildrenChecked: true, isChecked: true }, { id: ['child', 1], isChecked: true }, { id: ['child', 2], isChecked: true },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(3);
 
         row = view.getVisibleRows()[0];
-        row.onCheck?.(row);
-        await delay(); // checkboxes are async in LazyDataSource
-
-        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
 
-        await delay();
+        await act(() => {
+            row.onCheck?.(row);
+        });
 
-        expectViewToLookLike(
-            view,
-            [
-                { id: ['parent', 1], isChildrenChecked: false, isChecked: false }, { id: ['child', 1], isChecked: false }, { id: ['child', 2], isChecked: false },
-            ],
-            3,
-        );
-    });
-
-    // ListApiCache can't work with complex ids.
-    // However, it looks we
-    it.skip('should receive item by id', async () => {
-        const hookResult = renderHook(
-            ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
-            { initialProps: {
-                value: currentValue,
-                onValueChange: onValueChanged,
-                props: {},
-            } },
-        );
-        const view = hookResult.result.current;
-        view.getVisibleRows();
-
-        await delay();
-
-        const firstRow = view.getVisibleRows()[0];
-
-        const item = view.getById(firstRow.id, 0);
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: viewProps });
 
-        expect(item.value).toEqual(firstRow.value);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: ['parent', 1], isChildrenChecked: false, isChecked: false }, { id: ['child', 1], isChecked: false }, { id: ['child', 2], isChecked: false },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(3);
     });
 });
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.duplicated-records.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.duplicated-records.test.ts
index ff5d95c930..66d661cf54 100644
--- a/uui-core/src/data/processing/views/__tests__/LazyListView.duplicated-records.test.ts
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.duplicated-records.test.ts
@@ -1,8 +1,7 @@
 import { LazyDataSource } from '../../LazyDataSource';
-import { LazyListView } from '../LazyListView';
-import { delay, renderHook } from '@epam/uui-test-utils';
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
 import {
-    DataSourceState, LazyDataSourceApiRequest, DataQueryFilter, DataRowProps, IEditable,
+    DataSourceState, LazyDataSourceApiRequest, DataQueryFilter, DataRowProps, IDataSourceView,
 } from '../../../../types';
 import { runDataQuery } from '../../../querying/runDataQuery';
 
@@ -19,7 +18,8 @@ describe('LazyListView with flat list', () => {
 
     const testDataById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
 
-    let { value: currentValue, onValueChange: onValueChangeFn }: IEditable<DataSourceState<DataQueryFilter<TestItem>, number>> = {} as any;
+    let currentValue: DataSourceState<DataQueryFilter<TestItem>, number> = {};
+    let onValueChangeFn: (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => void;
 
     const testApi = (rq: LazyDataSourceApiRequest<TestItem, number, DataQueryFilter<TestItem>>) => Promise.resolve(runDataQuery(testData, rq));
 
@@ -29,16 +29,21 @@ describe('LazyListView with flat list', () => {
 
     beforeEach(() => {
         currentValue = { topIndex: 0, visibleCount: 3 };
-        onValueChangeFn = (newValue) => {
+        onValueChangeFn = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
             currentValue = newValue;
         };
     });
 
-    function expectViewToLookLike(view: LazyListView<TestItem, number>, rows: Partial<DataRowProps<TestItem, number>>[], rowsCount?: number) {
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, number, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, number>>[],
+    ) {
         const viewRows = view.getVisibleRows();
         expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
-        const listProps = view.getListProps();
-        rowsCount != null && expect(listProps.rowsCount).toEqual(rowsCount);
     }
 
     it('can scroll thru plain lists', async () => {
@@ -47,57 +52,72 @@ describe('LazyListView with flat list', () => {
             { initialProps: { value: currentValue, onValueChange: onValueChangeFn, props: {} } },
         );
 
-        const view = hookResult.result.current;
+        await waitFor(() => {
+            const view = hookResult.result.current;
 
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
 
+        let view = hookResult.result.current;
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        await delay();
-
-        expectViewToLookLike(
-            view,
-            [
-                { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
-            ],
-            11,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(11);
 
         // Scroll down by 1 row
         hookResult.rerender({ value: { topIndex: 1, visibleCount: 3 }, onValueChange: onValueChangeFn, props: {} });
 
-        expectViewToLookLike(view, [
-            { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { isLoading: true },
-        ], 11);
-
-        await delay();
-
-        expectViewToLookLike(
-            view,
-            [
-                { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { id: 120, value: testDataById[120] },
-            ],
-            11,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { isLoading: true },
+            ]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(11);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { id: 120, value: testDataById[120] },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(11);
 
         // Scroll down to bottom
         hookResult.rerender({ value: { topIndex: 8, visibleCount: 3 }, onValueChange: onValueChangeFn, props: {} });
 
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ], 11);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
 
-        await delay();
+        expect(view.getListProps().rowsCount).toEqual(11);
 
-        expectViewToLookLike(
-            view,
-            [
-                { id: 310, value: testDataById[310] }, { id: 320, value: testDataById[320] }, { id: 330, value: testDataById[330] },
-            ],
-            11,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 310, value: testDataById[310] }, { id: 320, value: testDataById[320] }, { id: 330, value: testDataById[330] },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(11);
     });
 });
 
@@ -126,7 +146,11 @@ describe('LazyListView with tree table', () => {
     const testDataById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
 
     let currentValue: DataSourceState;
-    let onValueChanged = (newValue: DataSourceState) => {
+    let onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
         currentValue = newValue;
     };
 
@@ -141,7 +165,11 @@ describe('LazyListView with tree table', () => {
 
     beforeEach(() => {
         currentValue = { topIndex: 0, visibleCount: 3 };
-        onValueChanged = (newValue: DataSourceState) => {
+        onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
             currentValue = newValue;
         };
         testApi.mockClear();
@@ -155,7 +183,10 @@ describe('LazyListView with tree table', () => {
         });
     });
 
-    function expectViewToLookLike(view: LazyListView<TestItem, number>, rows: Partial<DataRowProps<TestItem, number>>[], rowsCount?: number) {
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, number, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, number>>[],
+    ) {
         const viewRows = view.getVisibleRows();
 
         rows.forEach((r) => {
@@ -165,8 +196,6 @@ describe('LazyListView with tree table', () => {
         });
 
         expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
-        const listProps = view.getListProps();
-        rowsCount != null && expect(listProps.rowsCount).toEqual(rowsCount);
     }
 
     it('can load tree, unfold nodes, and scroll down', async () => {
@@ -174,126 +203,161 @@ describe('LazyListView with tree table', () => {
             ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
         );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    isLoading: true, depth: 0, indent: 0, path: [],
+                }, {
+                    isLoading: true, depth: 0, indent: 0, path: [],
+                }, {
+                    isLoading: true, depth: 0, indent: 0, path: [],
+                },
+            ]);
+        });
+        let view = hookResult.result.current;
 
-        const view = hookResult.result.current;
-        expectViewToLookLike(view, [
-            {
-                isLoading: true, depth: 0, indent: 0, path: [],
-            }, {
-                isLoading: true, depth: 0, indent: 0, path: [],
-            }, {
-                isLoading: true, depth: 0, indent: 0, path: [],
-            },
-        ]);
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        await delay();
-        expect(testApi).toBeCalledTimes(1);
+        await waitFor(() => {
+            expect(testApi).toBeCalledTimes(1);
+        });
+
         testApi.mockClear();
 
-        expectViewToLookLike(
-            view,
-            [
-                {
-                    id: 100, isFoldable: true, isFolded: true, path: [],
-                }, { id: 200, isFoldable: false, path: [] }, {
-                    id: 300, isFoldable: true, isFolded: true, path: [],
-                },
-            ],
-            3,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    {
+                        id: 100, isFoldable: true, isFolded: true, path: [],
+                    }, { id: 200, isFoldable: false, path: [] }, {
+                        id: 300, isFoldable: true, isFolded: true, path: [],
+                    },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(3);
 
         // // Unfold some rows
         let rows = view.getVisibleRows();
 
         hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
 
-        rows[0].onFold?.(rows[0]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            rows = view.getVisibleRows();
+            expect(typeof rows[0].onFold).toBe('function');
+        });
+
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
 
         hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(
-            view,
-            [
-                { id: 100, depth: 0, indent: 1 },
-                { isLoading: true, depth: 1, indent: 2 },
-                { isLoading: true, depth: 1, indent: 2 },
-                { id: 200, depth: 0, indent: 1 },
-                { id: 300, depth: 0, indent: 1 },
-            ],
-            5,
-        ); // even we don't know if there are children of a children of #100, we understand that there's no row below 300, so we need to receive exact rows count here
-
-        await delay();
-
-        expectViewToLookLike(
-            view,
-            [
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, depth: 0, indent: 1 },
+                    { isLoading: true, depth: 1, indent: 2 },
+                    { isLoading: true, depth: 1, indent: 2 },
+                    { id: 200, depth: 0, indent: 1 },
+                    { id: 300, depth: 0, indent: 1 },
+                ],
+            ); // even we don't know if there are children of a children of #100, we understand that there's no row below 300, so we need to receive exact rows count here
+        });
+        expect(view.getListProps().rowsCount).toEqual(5);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    {
+                        id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
+                    }, {
+                        id: 110, depth: 1, indent: 2, isFoldable: false,
+                    }, {
+                        id: 120, depth: 1, indent: 2, isFoldable: true,
+                    }, { id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(5);
+
+        // // Unfold more rows
+        rows = view.getVisibleRows();
+        await act(() => {
+            rows[2].onFold?.(rows[2]);
+        });
+
+        hookResult.rerender({ value: { ...currentValue, visibleCount: 5 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
                 {
                     id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
                 }, {
                     id: 110, depth: 1, indent: 2, isFoldable: false,
                 }, {
                     id: 120, depth: 1, indent: 2, isFoldable: true,
-                }, { id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 },
-            ],
-            5,
-        );
-
-        // // Unfold more rows
-        rows = view.getVisibleRows();
-        rows[2].onFold?.(rows[2]);
+                }, { isLoading: true, depth: 2, indent: 3 }, { isLoading: true, depth: 2, indent: 3 },
+            ]);
+        });
 
-        hookResult.rerender({ value: { ...currentValue, visibleCount: 5 }, onValueChange: onValueChanged, props: {} });
-        expectViewToLookLike(view, [
-            {
-                id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
-            }, {
-                id: 110, depth: 1, indent: 2, isFoldable: false,
-            }, {
-                id: 120, depth: 1, indent: 2, isFoldable: true,
-            }, { isLoading: true, depth: 2, indent: 3 }, { isLoading: true, depth: 2, indent: 3 },
-        ]);
-
-        await delay();
-
-        expectViewToLookLike(view, [
-            {
-                id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
-            }, {
-                id: 110, depth: 1, indent: 2, isFoldable: false,
-            }, {
-                id: 120, depth: 1, indent: 2, isFoldable: true,
-            }, {
-                id: 121, depth: 2, indent: 3, isFoldable: false,
-            }, {
-                id: 122, depth: 2, indent: 3, isFoldable: false,
-            },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
+                }, {
+                    id: 110, depth: 1, indent: 2, isFoldable: false,
+                }, {
+                    id: 120, depth: 1, indent: 2, isFoldable: true,
+                }, {
+                    id: 121, depth: 2, indent: 3, isFoldable: false,
+                }, {
+                    id: 122, depth: 2, indent: 3, isFoldable: false,
+                },
+            ]);
+        });
 
         expect(view.getListProps().rowsCount).toBeGreaterThan(5);
         hookResult.rerender({ value: { ...currentValue, visibleCount: 4, topIndex: 4 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(view, [
-            { id: 122, depth: 2, isFoldable: false }, { isLoading: true, depth: 2 }, { id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 },
-        ]);
-
-        await delay();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 122, depth: 2, isFoldable: false }, { isLoading: true, depth: 2 }, { id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            {
-                id: 122, depth: 2, indent: 3, isFoldable: false,
-            }, {
-                id: 122, depth: 2, indent: 3, isFoldable: false,
-            }, { id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    id: 122, depth: 2, indent: 3, isFoldable: false,
+                }, {
+                    id: 122, depth: 2, indent: 3, isFoldable: false,
+                }, { id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 },
+            ]);
+        });
 
         // // Scroll down to bottom
         hookResult.rerender({ value: { ...currentValue, visibleCount: 4, topIndex: 6 }, onValueChange: onValueChanged, props: {} });
-        expectViewToLookLike(
-            view,
-            [{ id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 }],
-            8,
-        );
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [{ id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 }],
+            );
+        });
+        expect(view.getListProps().rowsCount).toEqual(8);
     });
 });
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.flat.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.flat.test.ts
index b30c2ac0b6..6c78be3e09 100644
--- a/uui-core/src/data/processing/views/__tests__/LazyListView.flat.test.ts
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.flat.test.ts
@@ -1,10 +1,9 @@
 import { LazyDataSource } from '../../LazyDataSource';
-import { LazyListView } from '../LazyListView';
 import {
-    DataSourceState, LazyDataSourceApiRequest, DataQueryFilter, DataRowProps, IEditable,
+    DataSourceState, LazyDataSourceApiRequest, DataQueryFilter, DataRowProps, IDataSourceView,
 } from '../../../../types';
 import { runDataQuery } from '../../../querying/runDataQuery';
-import { delay, renderHook } from '@epam/uui-test-utils';
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
 
 interface TestItem {
     id: number;
@@ -17,8 +16,14 @@ describe('LazyListView - flat list test', () => {
 
     const testDataById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
 
-    let { value: currentValue, onValueChange: onValueChanged }: IEditable<DataSourceState<DataQueryFilter<TestItem>, number>> = {} as any;
-
+    let currentValue: DataSourceState<DataQueryFilter<TestItem>, number>;
+    let onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<TestItem>, number>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
     const testApi = (rq: LazyDataSourceApiRequest<TestItem, number, DataQueryFilter<TestItem>>) => Promise.resolve(runDataQuery(testData, rq));
 
     const flatDataSource = new LazyDataSource({
@@ -28,15 +33,20 @@ describe('LazyListView - flat list test', () => {
     beforeEach(() => {
         currentValue = { topIndex: 0, visibleCount: 3 };
         onValueChanged = (newValue) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
             currentValue = newValue;
         };
     });
 
-    function expectViewToLookLike(view: LazyListView<TestItem, number>, rows: Partial<DataRowProps<TestItem, number>>[], rowsCount?: number) {
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, number, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, number>>[],
+    ) {
         const viewRows = view.getVisibleRows();
         expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
-        const listProps = view.getListProps();
-        rowsCount != null && expect(listProps.rowsCount).toEqual(rowsCount);
     }
 
     it('can scroll through plain lists', async () => {
@@ -44,52 +54,83 @@ describe('LazyListView - flat list test', () => {
             ({ value, onValueChange, props }) => flatDataSource.useView(value, onValueChange, props),
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
         );
-        const view = hookResult.result.current;
 
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
+        await waitFor(() => {
+            const view = hookResult.result.current;
+
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
+
+        let view = hookResult.result.current;
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        await delay();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
+                ],
+            );
+        });
 
-        expectViewToLookLike(
-            view,
-            [
-                { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
-            ],
-            10,
-        );
+        view = hookResult.result.current;
+        let listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
 
         // Scroll down by 1 row
         hookResult.rerender({ value: { topIndex: 1, visibleCount: 3 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(view, [
-            { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { isLoading: true },
-        ], 10);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { isLoading: true },
+            ]);
+        });
 
-        await delay();
+        view = hookResult.result.current;
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { id: 121, value: testDataById[121] },
+                ],
+            );
+        });
 
-        expectViewToLookLike(
-            view,
-            [
-                { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { id: 121, value: testDataById[121] },
-            ],
-            10,
-        );
+        view = hookResult.result.current;
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
 
         // Scroll down to bottom
         hookResult.rerender({ value: { topIndex: 8, visibleCount: 3 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(view, [{ isLoading: true }, { isLoading: true }], 10);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ isLoading: true }, { isLoading: true }]);
+        });
 
-        await delay();
+        view = hookResult.result.current;
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
 
-        expectViewToLookLike(
-            view,
-            [{ id: 320, value: testDataById[320] }, { id: 330, value: testDataById[330] }],
-            10,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [{ id: 320, value: testDataById[320] }, { id: 330, value: testDataById[330] }],
+            );
+        });
+
+        view = hookResult.result.current;
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
     });
 
     it('can reload', async () => {
@@ -97,44 +138,39 @@ describe('LazyListView - flat list test', () => {
             ({ value, onValueChange, props }) => flatDataSource.useView(value, onValueChange, props),
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
         );
-        const view = hookResult.result.current;
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
-        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
-
-        await delay();
-
-        expectViewToLookLike(
-            view,
-            [
-                { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
-            ],
-            10,
-        );
+        let view = hookResult.result.current;
 
         view.reload();
 
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
 
-        await delay();
+        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        expectViewToLookLike(
-            view,
-            [
-                { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
-            ],
-            10,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
+                ],
+            );
+        });
 
         // Scroll down by 1 row
         hookResult.rerender({ value: { topIndex: 1, visibleCount: 3 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(view, [
-            { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { isLoading: true },
-        ], 10);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { isLoading: true },
+            ]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(10);
     });
 
     it('handles concurrent filter updates', async () => {
@@ -142,8 +178,7 @@ describe('LazyListView - flat list test', () => {
             ({ value, onValueChange, props }) => flatDataSource.useView(value, onValueChange, props),
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
         );
-        const view = hookResult.result.current;
-        view.getVisibleRows();
+        let view = hookResult.result.current;
 
         // immediately set another filter and query again
         currentValue = { ...currentValue, filter: { id: { gte: 200 } } };
@@ -156,20 +191,27 @@ describe('LazyListView - flat list test', () => {
             },
         });
 
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
-        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
 
-        await delay();
+        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        expectViewToLookLike(view, [
-            { id: 200 }, { id: 300 }, { id: 310 },
-        ], 5);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 200 }, { id: 300 }, { id: 310 },
+            ]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(5);
 
         const rows = view.getVisibleRows();
-        rows[0].onCheck?.(rows[0]);
-        await delay();
+        await act(() => {
+            rows[0].onCheck?.(rows[0]);
+        });
 
         hookResult.rerender({
             value: currentValue,
@@ -179,9 +221,13 @@ describe('LazyListView - flat list test', () => {
             },
         });
 
-        expectViewToLookLike(view, [
-            { id: 200, isChecked: true }, { id: 300 }, { id: 310 },
-        ], 5);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 200, isChecked: true }, { id: 300 }, { id: 310 },
+            ]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(5);
     });
 
     it('applies the filter from props', async () => {
@@ -189,11 +235,13 @@ describe('LazyListView - flat list test', () => {
             ({ value, onValueChange, props }) => flatDataSource.useView(value, onValueChange, props),
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: { filter: { id: { gte: 320 } } } } },
         );
-        const view = hookResult.result.current;
-        view.getListProps(); // trigger loading
-        await delay();
+        let view = hookResult.result.current;
 
-        expectViewToLookLike(view, [{ id: 320 }, { id: 330 }], 2);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 320 }, { id: 330 }]);
+        });
+        expect(view.getListProps().rowsCount).toEqual(2);
     });
 
     const testApiNoCount = (rq: LazyDataSourceApiRequest<TestItem, number, DataQueryFilter<TestItem>>) =>
@@ -208,50 +256,68 @@ describe('LazyListView - flat list test', () => {
             ({ value, onValueChange, props }) => flatDataSourceNoCount.useView(value, onValueChange, props),
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
         );
-        const view = hookResult.result.current;
 
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
+        let view = hookResult.result.current;
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
+
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        await delay();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            { id: 100, value: testDataById[100], depth: 0 }, { id: 110, value: testDataById[110], depth: 0 }, { id: 120, value: testDataById[120], depth: 0 },
-        ]);
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
         // Scroll down by 1 row
         hookResult.rerender({ value: { topIndex: 1, visibleCount: 3 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(view, [
-            { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { isLoading: true },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { isLoading: true },
+            ]);
+        });
+
         expect(view.getListProps().rowsCount).toBeGreaterThan(4);
 
-        await delay();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { id: 121, value: testDataById[121] },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            { id: 110, value: testDataById[110] }, { id: 120, value: testDataById[120] }, { id: 121, value: testDataById[121] },
-        ]);
         expect(view.getListProps().rowsCount).toBeGreaterThan(4);
 
         // Scroll down to bottom
         hookResult.rerender({ value: { topIndex: 8, visibleCount: 3 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
-        expect(view.getListProps().rowsCount).toBeGreaterThan(11);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
 
-        await delay();
+        expect(view.getListProps().rowsCount).toBeGreaterThan(11);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [{ id: 320, value: testDataById[320] }, { id: 330, value: testDataById[330] }],
+            ); // correctly detected the end of the list
+        });
 
-        expectViewToLookLike(
-            view,
-            [{ id: 320, value: testDataById[320] }, { id: 330, value: testDataById[330] }],
-            10,
-        ); // correctly detected the end of the list
+        expect(view.getListProps().rowsCount).toEqual(10);
     });
 
     it('handles empty result', async () => {
@@ -259,15 +325,19 @@ describe('LazyListView - flat list test', () => {
             ({ value, onValueChange, props }) => flatDataSourceNoCount.useView(value, onValueChange, props),
             { initialProps: { value: { visibleCount: 3, filter: { id: -100500 } }, onValueChange: onValueChanged, props: {} } },
         );
-        const view = hookResult.result.current;
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
-        expect(view.getListProps().rowsCount).toBeGreaterThan(3);
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
+        let view = hookResult.result.current;
 
-        await delay();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, []);
+        });
 
-        expectViewToLookLike(view, []);
         expect(view.getListProps().rowsCount).toBe(0);
     });
 });
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.fold-all.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.fold-all.test.ts
new file mode 100644
index 0000000000..4ed04ab259
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.fold-all.test.ts
@@ -0,0 +1,259 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getLazyLocationsDS } from '../../__tests__/mocks';
+
+describe('LazyListView - fold all', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('should pass foldAll to isFoldedByDefault callback on init', async () => {
+        const { dataSource } = getLazyLocationsDS({
+            isFoldedByDefault: (_, state) => state.foldAll ?? false,
+        });
+
+        currentValue.visibleCount = 50;
+        currentValue.foldAll = true;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+
+    it('should pass foldAll to isFoldedByDefault callback', async () => {
+        const { dataSource } = getLazyLocationsDS({
+            isFoldedByDefault: (_, state) => state.foldAll ?? false,
+        });
+
+        currentValue.visibleCount = 50;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'DZ', parentId: 'c-AF' },
+                { id: '2474141', parentId: 'DZ' },
+                { id: '2475744', parentId: 'DZ' },
+                { id: '2475740', parentId: 'DZ' },
+                { id: '2475752', parentId: 'DZ' },
+                { id: '2475687', parentId: 'DZ' },
+                { id: '2475612', parentId: 'DZ' },
+                { id: '2475475', parentId: 'DZ' },
+                { id: '2474638', parentId: 'DZ' },
+                { id: '2474583', parentId: 'DZ' },
+                { id: '2474506', parentId: 'DZ' },
+                { id: 'BJ', parentId: 'c-AF' },
+                { id: '2392505', parentId: 'BJ' },
+                { id: '2392308', parentId: 'BJ' },
+                { id: '2392204', parentId: 'BJ' },
+                { id: '2392108', parentId: 'BJ' },
+                { id: '2392087', parentId: 'BJ' },
+                { id: '2392009', parentId: 'BJ' },
+                { id: '2391895', parentId: 'BJ' },
+                { id: '2391893', parentId: 'BJ' },
+                { id: '2391455', parentId: 'BJ' },
+                { id: '2391377', parentId: 'BJ' },
+                { id: 'GM', parentId: 'c-AF' },
+                { id: '2413920', parentId: 'GM' },
+                { id: '2413876', parentId: 'GM' },
+                { id: '2413753', parentId: 'GM' },
+                { id: '2413515', parentId: 'GM' },
+                { id: '2412749', parentId: 'GM' },
+                { id: '2411880', parentId: 'GM' },
+                { id: 'c-EU', parentId: undefined },
+                { id: 'GB', parentId: 'c-EU' },
+                { id: '2633655', parentId: 'GB' },
+                { id: '2633563', parentId: 'GB' },
+                { id: '2633553', parentId: 'GB' },
+                { id: '2633551', parentId: 'GB' },
+                { id: '2633521', parentId: 'GB' },
+                { id: '2633485', parentId: 'GB' },
+                { id: '2633406', parentId: 'GB' },
+                { id: '2633397', parentId: 'GB' },
+                { id: '2633373', parentId: 'GB' },
+                { id: '2633352', parentId: 'GB' },
+            ]);
+        });
+
+        currentValue.foldAll = true;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+
+    it('should unfold all nodes on foldAll: false if isFoldedByDefault is not passed', async () => {
+        const { dataSource } = getLazyLocationsDS({});
+
+        currentValue.visibleCount = 50;
+        currentValue.foldAll = false;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'DZ', parentId: 'c-AF' },
+                { id: '2474141', parentId: 'DZ' },
+                { id: '2475744', parentId: 'DZ' },
+                { id: '2475740', parentId: 'DZ' },
+                { id: '2475752', parentId: 'DZ' },
+                { id: '2475687', parentId: 'DZ' },
+                { id: '2475612', parentId: 'DZ' },
+                { id: '2475475', parentId: 'DZ' },
+                { id: '2474638', parentId: 'DZ' },
+                { id: '2474583', parentId: 'DZ' },
+                { id: '2474506', parentId: 'DZ' },
+                { id: 'BJ', parentId: 'c-AF' },
+                { id: '2392505', parentId: 'BJ' },
+                { id: '2392308', parentId: 'BJ' },
+                { id: '2392204', parentId: 'BJ' },
+                { id: '2392108', parentId: 'BJ' },
+                { id: '2392087', parentId: 'BJ' },
+                { id: '2392009', parentId: 'BJ' },
+                { id: '2391895', parentId: 'BJ' },
+                { id: '2391893', parentId: 'BJ' },
+                { id: '2391455', parentId: 'BJ' },
+                { id: '2391377', parentId: 'BJ' },
+                { id: 'GM', parentId: 'c-AF' },
+                { id: '2413920', parentId: 'GM' },
+                { id: '2413876', parentId: 'GM' },
+                { id: '2413753', parentId: 'GM' },
+                { id: '2413515', parentId: 'GM' },
+                { id: '2412749', parentId: 'GM' },
+                { id: '2411880', parentId: 'GM' },
+                { id: 'c-EU', parentId: undefined },
+                { id: 'GB', parentId: 'c-EU' },
+                { id: '2633655', parentId: 'GB' },
+                { id: '2633563', parentId: 'GB' },
+                { id: '2633553', parentId: 'GB' },
+                { id: '2633551', parentId: 'GB' },
+                { id: '2633521', parentId: 'GB' },
+                { id: '2633485', parentId: 'GB' },
+                { id: '2633406', parentId: 'GB' },
+                { id: '2633397', parentId: 'GB' },
+                { id: '2633373', parentId: 'GB' },
+                { id: '2633352', parentId: 'GB' },
+            ]);
+        });
+
+        currentValue.foldAll = true;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+
+    it('should fold all nodes on foldAll: true', async () => {
+        const { dataSource } = getLazyLocationsDS({});
+
+        currentValue.visibleCount = 50;
+        currentValue.folded = { 'c-AF': false };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'DZ', parentId: 'c-AF' },
+                { id: 'BJ', parentId: 'c-AF' },
+                { id: 'GM', parentId: 'c-AF' },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+
+        currentValue.foldAll = true;
+        currentValue.folded = {};
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', parentId: undefined },
+                { id: 'c-EU', parentId: undefined },
+            ]);
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.old.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.old.test.ts
index 37467cbd0a..44c25b4f58 100644
--- a/uui-core/src/data/processing/views/__tests__/LazyListView.old.test.ts
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.old.test.ts
@@ -1,7 +1,7 @@
 import { LazyDataSource } from '../../LazyDataSource';
-import { LazyListViewProps } from '../LazyListView';
-import { delay, renderHook } from '@epam/uui-test-utils';
-import { DataSourceState } from '../../../../types';
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataSourceState, LazyDataSourceApi } from '../../../../types';
+import { LazyListViewProps } from '../types';
 
 interface TItem {
     id: number;
@@ -10,12 +10,29 @@ interface TItem {
 }
 
 const testItems = [
-    { id: 2, level: 'A1' }, { id: 5, level: 'A2+' }, { id: 1, level: 'A0' }, { id: 3, level: 'A1+' }, { id: 4, level: 'A2' }, { id: 6, level: 'B' }, { id: 7, level: 'B1+', parentId: 6 }, { id: 8, level: 'B2', parentId: 6 }, { id: 9, level: 'B2+', parentId: 6 }, { id: 10, level: 'C1' }, { id: 11, level: 'C1+' }, { id: 12, level: 'C2' },
+    { id: 2, level: 'A1' },
+    { id: 5, level: 'A2+' },
+    { id: 1, level: 'A0' },
+    { id: 3, level: 'A1+' },
+    { id: 4, level: 'A2' },
+    { id: 6, level: 'B' },
+    { id: 7, level: 'B1+', parentId: 6 },
+    { id: 8, level: 'B2', parentId: 6 },
+    { id: 9, level: 'B2+', parentId: 6 },
+    { id: 10, level: 'C1' },
+    { id: 11, level: 'C1+' },
+    { id: 12, level: 'C2' },
 ];
 
 describe('LazyListView - old tests', () => {
     const initialValue: DataSourceState = { topIndex: 0, visibleCount: 20 };
-    const testApi = jest.fn(() => Promise.resolve({ items: testItems }));
+    const testApi: jest.MockedFn<LazyDataSourceApi<TItem, number, any>> = jest.fn().mockImplementation(({ ids }) => {
+        if (ids) {
+            return Promise.resolve({ items: testItems.filter((item) => ids.includes(item.id)) });
+        }
+        return Promise.resolve({ items: testItems });
+    });
+
     let viewProps: LazyListViewProps<TItem, number, any>;
     let dataSource: LazyDataSource<TItem, number>;
 
@@ -32,30 +49,54 @@ describe('LazyListView - old tests', () => {
                 { initialProps: { value: initialValue, onValueChange: () => {}, props: {} } },
             );
 
-            const view = hookResult.result.current;
+            let view = hookResult.result.current;
             const loadingRow = view.getById(testItems[4].id, 4);
-            expect(loadingRow.isLoading).toBe(true);
+            expect(loadingRow.isUnknown).toBe(true);
             expect(loadingRow.id).not.toBeNull();
 
-            await delay();
+            await waitFor(async () => {
+                view = hookResult.result.current;
+                const row = view.getById(testItems[4].id, 4);
+                expect(row.isUnknown).toBeFalsy();
+            });
 
             const row = view.getById(testItems[4].id, 4);
-
             expect(row.id).toBe(testItems[4].id);
             expect(row.value).toEqual(testItems[4]);
             expect(row.index).toEqual(4);
         });
 
-        it("should return loading row if item don't exist in dataSource", () => {
+        it("should return unknown row if item don't exist in dataSource", async () => {
             const hookResult = renderHook(
                 ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
                 { initialProps: { value: initialValue, onValueChange: () => {}, props: {} } },
             );
 
+            await waitFor(async () => {
+                const view = hookResult.result.current;
+                const row = view.getById(111, 111);
+                expect(row.isUnknown).toBeTruthy();
+            });
+
             const view = hookResult.result.current;
             const row = view.getById(111, 111);
+            expect(row.id).not.toBeNull();
+        });
 
-            expect(row.isLoading).toBe(true);
+        it('should return loading row if item is fetching by dataSource', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: { value: { checked: [11], ...initialValue }, onValueChange: () => {}, props: { showSelectedOnly: true } } },
+            );
+
+            await waitFor(async () => {
+                const view = hookResult.result.current;
+                const row = view.getById(11, 11);
+                expect(row.isLoading).toBeTruthy();
+            });
+
+            const view = hookResult.result.current;
+            const row = view.getById(11, 11);
             expect(row.id).not.toBeNull();
         });
     });
@@ -66,7 +107,7 @@ describe('LazyListView - old tests', () => {
             { initialProps: { value: initialValue, onValueChange: () => {}, props: {} } },
         );
 
-        const view = hookResult.result.current;
+        let view = hookResult.result.current;
         let rows = view.getVisibleRows();
 
         // Should return loading rows for first call
@@ -74,8 +115,13 @@ describe('LazyListView - old tests', () => {
         expect(rows[5].isLoading).toBe(true);
         expect(rows[5].id).not.toBeNull();
 
-        await delay();
+        await waitFor(async () => {
+            view = hookResult.result.current;
+            const viewRows = view.getVisibleRows();
+            expect(viewRows[5].isLoading).toBeFalsy();
+        });
 
+        view = hookResult.result.current;
         rows = view.getVisibleRows();
 
         expect(rows[5].id).toEqual(testItems[5].id);
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.patch-items.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.patch-items.test.ts
new file mode 100644
index 0000000000..d9a285c915
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.patch-items.test.ts
@@ -0,0 +1,1353 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getLazyLocationsDS } from '../../__tests__/mocks';
+import { ItemsMap } from '../tree/ItemsMap';
+import { act } from 'react-dom/test-utils';
+import { PatchOrdering } from '../tree';
+import { LazyListViewProps } from '../types';
+
+type ExtendedLocationItem = LocationItem & { isDeleted?: boolean };
+
+describe('LazyListView - patch items', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    function createItemsMap(itemsObj: Record<string, LocationItem | ExtendedLocationItem>) {
+        return ItemsMap.fromObject<string, LocationItem | ExtendedLocationItem>(itemsObj, { getId: ({ id }) => id });
+    }
+
+    it.each([
+        undefined,
+        () => PatchOrdering.TOP,
+    ])
+    ('should add items to the beginning of the list if item is not in list', async (getNewItemPosition) => {
+        const { dataSource } = getLazyLocationsDS({
+            patch: createItemsMap({
+                'c-AS': {
+                    id: 'c-AS',
+                    name: 'Asia',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-NA': {
+                    id: 'c-NA',
+                    name: 'North America',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-NA' },
+                { id: 'c-AN' },
+                { id: 'c-AS' },
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(5);
+    });
+
+    it('should add items to the end of the list if item is not in list and position is BOTTOM', async () => {
+        const { dataSource } = getLazyLocationsDS({
+            patch: createItemsMap({
+                'c-AS': {
+                    id: 'c-AS',
+                    name: 'Asia',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+                'c-NA': {
+                    id: 'c-NA',
+                    name: 'North America',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition: () => PatchOrdering.BOTTOM,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+                { id: 'c-AS' },
+                { id: 'c-AN' },
+                { id: 'c-NA' },
+            ]);
+        });
+
+        const view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(5);
+    });
+
+    it.each([
+        undefined,
+        () => PatchOrdering.TOP,
+    ])('should add items to the top by parent', async (getNewItemPosition) => {
+        const patch = createItemsMap({
+            'c-AS': {
+                id: 'c-AS',
+                name: 'Asia',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA': {
+                id: 'c-NA',
+                name: 'North America',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        const { dataSource } = getLazyLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {
+                    patch, getNewItemPosition,
+                },
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[0];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' },
+                    { id: 'c-NA', parentId: 'c-AF' },
+                    { id: 'c-AN', parentId: 'c-AF' },
+                    { id: 'c-AS', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+    });
+
+    it('should add items to the bottom by parent', async () => {
+        const getNewItemPosition = () => PatchOrdering.BOTTOM;
+        const patch = createItemsMap({
+            'c-AS': {
+                id: 'c-AS',
+                name: 'Asia',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA': {
+                id: 'c-NA',
+                name: 'North America',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        const { dataSource } = getLazyLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {
+                    patch, getNewItemPosition,
+                },
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[0];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'c-AS', parentId: 'c-AF' },
+                    { id: 'c-AN', parentId: 'c-AF' },
+                    { id: 'c-NA', parentId: 'c-AF' },
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+    });
+
+    it('should fix position of item from patch till the next sorting change and apply sorting after sorting change', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'Asia1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS2': {
+                id: 'c-AS2',
+                name: 'Asia2',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS3': {
+                id: 'c-AS3',
+                name: 'Asia3',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN1': {
+                id: 'c-AN1',
+                name: 'Antarctica1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN2': {
+                id: 'c-AN2',
+                name: 'Antarctica2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN3': {
+                id: 'c-AN3',
+                name: 'Antarctica3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'North America1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA2': {
+                id: 'c-NA2',
+                name: 'North America2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA3': {
+                id: 'c-NA3',
+                name: 'North America3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+        const emptyPatch: ItemsMap<string, LocationItem> | undefined = undefined;
+
+        const { dataSource } = getLazyLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<LazyListViewProps<LocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: emptyPatch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        currentValue.visibleCount = 20;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch, getNewItemPosition } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+
+                    { id: 'c-NA3', parentId: 'c-AF' },
+                    { id: 'c-NA2', parentId: 'c-AF' },
+                    { id: 'c-NA1', parentId: 'c-AF' },
+
+                    { id: 'c-AN3', parentId: 'c-AF' },
+                    { id: 'c-AN2', parentId: 'c-AF' },
+                    { id: 'c-AN1', parentId: 'c-AF' },
+
+                    { id: 'c-AS3', parentId: 'c-AF' },
+                    { id: 'c-AS2', parentId: 'c-AF' },
+                    { id: 'c-AS1', parentId: 'c-AF' },
+
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+        const newPatch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'XA1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS2': {
+                id: 'c-AS2',
+                name: 'XA2',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AS3': {
+                id: 'c-AS3',
+                name: 'XA3',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-AN1': {
+                id: 'c-AN1',
+                name: 'BA1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN2': {
+                id: 'c-AN2',
+                name: 'BA2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-AN3': {
+                id: 'c-AN3',
+                name: 'BA3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'DA1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA2': {
+                id: 'c-NA2',
+                name: 'DA2',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-NA3': {
+                id: 'c-NA3',
+                name: 'DA3',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        hookResult.rerender({
+            value: currentValue,
+            onValueChange: onValueChanged,
+            props: {
+                patch: newPatch,
+                getNewItemPosition,
+            },
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    {
+                        id: 'c-NA3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA3',
+                            name: 'DA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-NA2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA2',
+                            name: 'DA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-NA1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA1',
+                            name: 'DA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN3',
+                            name: 'BA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN2',
+                            name: 'BA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN1',
+                            name: 'BA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS3',
+                            name: 'XA3',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS2',
+                            name: 'XA2',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS1',
+                            name: 'XA1',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        currentValue.sorting = [{ field: 'name', direction: 'asc' }];
+        hookResult.rerender({
+            value: currentValue,
+            onValueChange: onValueChanged,
+            props: {
+                patch: newPatch,
+                getNewItemPosition,
+            },
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                    {
+                        id: 'c-AN1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN1',
+                            name: 'BA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN2',
+                            name: 'BA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AN3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AN3',
+                            name: 'BA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    {
+                        id: 'c-NA1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA1',
+                            name: 'DA1',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+
+                    {
+                        id: 'c-NA2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA2',
+                            name: 'DA2',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-NA3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-NA3',
+                            name: 'DA3',
+                            type: 'continent',
+                            parentId: 'c-AF',
+                            __typename: 'Location',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'GM', parentId: 'c-AF' },
+                    {
+                        id: 'c-AS1',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS1',
+                            name: 'XA1',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS2',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS2',
+                            name: 'XA2',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    {
+                        id: 'c-AS3',
+                        parentId: 'c-AF',
+                        value: {
+                            id: 'c-AS3',
+                            name: 'XA3',
+                            type: 'continent',
+                            __typename: 'Location',
+                            parentId: 'c-AF',
+                            childCount: 0,
+                        },
+                    },
+                    { id: 'c-EU' },
+                ],
+            );
+        });
+    });
+
+    it('should delete items from tree', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'Asia1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+                isDeleted: true,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'North America1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                type: 'continent',
+                name: 'Europe',
+                __typename: 'Location',
+                childCount: 1,
+                isDeleted: true,
+            },
+            GM: {
+                id: 'GM',
+                name: 'Gambia',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 6,
+                isDeleted: true,
+            },
+            BJ: {
+                id: 'BJ',
+                name: 'Benin',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 10,
+            },
+        });
+
+        const emptyPatch: ItemsMap<string, ExtendedLocationItem> | undefined = undefined;
+        const { dataSource } = getLazyLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<LazyListViewProps<ExtendedLocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+            isDeleted: (item) => item.isDeleted ?? false,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch: emptyPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    // { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'c-NA1', parentId: 'c-AF' },
+                    // { id: 'c-AS1', parentId: 'c-AF' },
+                    // { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+    });
+
+    it('should update items', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            'c-AS1': {
+                id: 'c-AS1',
+                name: 'Asia1',
+                type: 'continent',
+                __typename: 'Location',
+                parentId: 'c-AF',
+                childCount: 0,
+            },
+            'c-NA1': {
+                id: 'c-NA1',
+                name: 'North America1',
+                type: 'continent',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                type: 'continent',
+                name: 'Europe',
+                __typename: 'Location',
+                childCount: 1,
+            },
+            GM: {
+                id: 'GM',
+                name: 'Gambia',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 6,
+            },
+            BJ: {
+                id: 'BJ',
+                name: 'Benin',
+                type: 'country',
+                parentId: 'c-AF',
+                __typename: 'Location',
+                childCount: 10,
+            },
+        });
+
+        const emptyPatch: ItemsMap<string, ExtendedLocationItem> | undefined = undefined;
+        const { dataSource } = getLazyLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<LazyListViewProps<ExtendedLocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch: emptyPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'c-NA1', parentId: 'c-AF' },
+                    { id: 'c-AS1', parentId: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+    });
+
+    it('should move items from parent to parent', async () => {
+        const getNewItemPosition = () => PatchOrdering.TOP;
+        const patch = createItemsMap({
+            GM: {
+                id: 'GM',
+                name: 'Gambia',
+                type: 'country',
+                parentId: 'c-EU',
+                __typename: 'Location',
+                childCount: 6,
+            },
+            BJ: {
+                id: 'BJ',
+                name: 'Benin',
+                type: 'country',
+                parentId: 'c-EU',
+                __typename: 'Location',
+                childCount: 10,
+            },
+        });
+
+        const emptyPatch: ItemsMap<string, ExtendedLocationItem> | undefined = undefined;
+        const { dataSource } = getLazyLocationsDS({});
+
+        currentValue.visibleCount = 10;
+        currentValue.sorting = [{ field: 'name', direction: 'desc' }];
+        const props: Partial<LazyListViewProps<ExtendedLocationItem, string, any>> = {
+            patch: emptyPatch,
+            getNewItemPosition,
+        };
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props,
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-EU' },
+                { id: 'c-AF' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(2);
+
+        const rowAF = view.getVisibleRows()[1];
+        await act(() => {
+            rowAF.onFold?.(rowAF);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch: emptyPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'GM', parentId: 'c-AF' },
+                    { id: 'BJ', parentId: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+
+        const rowEU = view.getVisibleRows()[0];
+        await act(() => {
+            rowEU.onFold?.(rowEU);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { ...props, patch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 'c-EU' },
+                    { id: 'BJ', parentId: 'c-EU' },
+                    { id: 'GM', parentId: 'c-EU' },
+                    { id: 'GB', parentId: 'c-EU' },
+
+                    { id: 'c-AF' },
+                    { id: 'DZ', parentId: 'c-AF' },
+                ],
+            );
+        });
+    });
+
+    it('should add item to the end of the list and updated previous existing item', async () => {
+        const { dataSource } = getLazyLocationsDS({
+            patch: createItemsMap({
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition: () => PatchOrdering.BOTTOM,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+                { id: 'c-AN' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        const updatedPatch = createItemsMap({
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                name: 'EU',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: updatedPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU',
+                    value: {
+                        id: 'c-EU',
+                        name: 'EU',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+                { id: 'c-AN',
+                    value: {
+                        id: 'c-AN',
+                        name: 'Antarctica',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+            ]);
+        });
+    });
+
+    it('should remove updated item and add new to the bottom', async () => {
+        const { dataSource } = getLazyLocationsDS({
+            patch: createItemsMap({
+                'c-AN': {
+                    id: 'c-AN',
+                    name: 'Antarctica',
+                    type: 'continent',
+                    __typename: 'Location',
+                    childCount: 0,
+                },
+            }),
+
+            getNewItemPosition: () => PatchOrdering.BOTTOM,
+            isDeleted: (item: ExtendedLocationItem) => item.isDeleted ?? false,
+        });
+
+        currentValue.visibleCount = 5;
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+                { id: 'c-AN' },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toEqual(3);
+
+        const updatedPatch = createItemsMap({
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                name: 'EU',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: updatedPatch } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU',
+                    value: {
+                        id: 'c-EU',
+                        name: 'EU',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+                { id: 'c-AN',
+                    value: {
+                        id: 'c-AN',
+                        name: 'Antarctica',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+            ]);
+        });
+
+        const updatedPatchWithDeleted = createItemsMap({
+            'c-AN': {
+                id: 'c-AN',
+                name: 'Antarctica',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+            },
+            'c-EU': {
+                id: 'c-EU',
+                name: 'EU',
+                type: 'continent',
+                __typename: 'Location',
+                childCount: 0,
+                isDeleted: true,
+            },
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { patch: updatedPatchWithDeleted } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-AN',
+                    value: {
+                        id: 'c-AN',
+                        name: 'Antarctica',
+                        type: 'continent',
+                        __typename: 'Location',
+                        childCount: 0,
+                    },
+                },
+            ]);
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.row-options.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.row-options.test.ts
new file mode 100644
index 0000000000..e4181bd0f9
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.row-options.test.ts
@@ -0,0 +1,1143 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getLazyLocationsDS } from '../../__tests__/mocks';
+import { act } from 'react-dom/test-utils';
+
+describe('LazyListView - row options', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+    describe('rowOptions', () => {
+        it('should not allow checking if checkbox is not configured at rowOptions', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: {},
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is not visible at rowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is disabled at rowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should selectAll be null, if checkbox is not configured at rowOptions', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: {},
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should selectAll be null, if checkbox is not visible at rowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return selectAll, if checkbox is disabled at rowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeUndefined();
+        });
+
+        it('should selectAll be null, if selectAll = false', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { checkbox: { isVisible: true, isDisabled: false } },
+                selectAll: false,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return indeterminate = false for selectAll, if checkbox is visible and disabled at rowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeFalsy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should return indeterminate = true for selectAll, if checkbox is visible and enabled at rowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true };
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { checkbox },
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeTruthy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should disable rows if isDisabled is passed to rowOptions', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { isDisabled: true },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: true },
+                    { id: 'c-EU', parentId: undefined, isDisabled: true },
+                ]);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { rowOptions: { isDisabled: false } } });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: false },
+                    { id: 'c-EU', parentId: undefined, isDisabled: false },
+                ]);
+            });
+        });
+
+        it('should allow row to be selectable if isSelectable is passed to rowOptions', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { isSelectable: true },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: true },
+                    { id: 'c-EU', parentId: undefined, isSelectable: true },
+                ]);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { rowOptions: { isSelectable: false } } });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: false },
+                    { id: 'c-EU', parentId: undefined, isSelectable: false },
+                ]);
+            });
+        });
+
+        it('should pass onClick to rows if is specified at rowOptions', async () => {
+            const onClick = jest.fn();
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { onClick },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, onClick },
+                    { id: 'c-EU', parentId: undefined, onClick },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onClick?.(afRow);
+            });
+
+            expect(onClick).toBeCalledTimes(1);
+            expect(onClick).toBeCalledWith(afRow);
+        });
+
+        it('should pass link to rows if is specified at rowOptions', async () => {
+            const link = {
+                pathname: '/some-link',
+            };
+
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions: { link },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, link },
+                    { id: 'c-EU', parentId: undefined, link },
+                ]);
+            });
+        });
+
+        it('should pass value/onValueChange to rows if is specified at rowOptions', async () => {
+            const value = { id: 'someID' } as LocationItem;
+            const onValueChange = jest.fn();
+            const rowOptions = { value, onValueChange };
+
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, ...rowOptions },
+                    { id: 'c-EU', parentId: undefined, ...rowOptions },
+                ]);
+            });
+        });
+
+        it('should pass isReadonly to rows if is specified at rowOptions', async () => {
+            const rowOptions = { isReadonly: true };
+
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, ...rowOptions },
+                    { id: 'c-EU', parentId: undefined, ...rowOptions },
+                ]);
+            });
+        });
+
+        it('should pass isInvalid to rows if is specified at rowOptions', async () => {
+            const rowOptions = { isInvalid: true };
+
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, ...rowOptions },
+                    { id: 'c-EU', parentId: undefined, ...rowOptions },
+                ]);
+            });
+        });
+
+        it('should pin rows if pin function is specified at rowOptions', async () => {
+            const rowOptions = { pin: (item) => item.id === 'c-AF' };
+
+            const { dataSource } = getLazyLocationsDS({
+                rowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            const euRow = view.getVisibleRows()[1];
+
+            await act(() => {
+                euRow.onFold?.(euRow);
+            });
+
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'DZ', parentId: 'c-AF', isPinned: false },
+                    { id: 'BJ', parentId: 'c-AF', isPinned: false },
+                ]);
+            });
+
+            currentValue.topIndex = 3;
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'GM', parentId: 'c-AF', isPinned: false },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+        });
+    });
+
+    describe('getRowOptions', () => {
+        it('should not allow checking if checkbox is not configured at getRowOptions', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({}),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is not visible at getRowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should not allow checking if checkbox is disabled at getRowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+        });
+
+        it('should selectAll be null, if checkbox is not configured at getRowOptions', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({}),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should selectAll be null, if checkbox is not visible at getRowOptions', async () => {
+            const checkbox = { isVisible: false };
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return selectAll, if checkbox is disabled at getRowOptions', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeUndefined();
+        });
+
+        it('should selectAll be null, if selectAll = false', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ checkbox: { isVisible: true, isDisabled: false } }),
+                selectAll: false,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            expect(view.selectAll).toBeNull();
+        });
+
+        it('should return indeterminate = false for selectAll, if checkbox is visible and disabled at getRowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true, isDisabled: true };
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeFalsy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should return indeterminate = true for selectAll, if checkbox is visible and enabled at getRowOptions and some item is checked', async () => {
+            const checkbox = { isVisible: true };
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ checkbox }),
+            });
+
+            currentValue.checked = ['BJ'];
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'c-EU', parentId: undefined, isCheckable: true, checkbox },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            expect(view.selectAll).not.toBeNull();
+            expect(view.selectAll!.value).toBeFalsy();
+            expect(typeof view.selectAll!.onValueChange).toBe('function');
+            expect(view.selectAll!.indeterminate).toBeTruthy();
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
+                    { id: 'DZ', isChecked: false },
+                    { id: 'BJ', isChecked: true },
+                ]);
+            });
+        });
+
+        it('should disable rows if isDisabled is passed to getRowOptions', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ isDisabled: true }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: true },
+                    { id: 'c-EU', parentId: undefined, isDisabled: true },
+                ]);
+            });
+
+            hookResult.rerender({
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: { getRowOptions: () => ({ isDisabled: false }) },
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isDisabled: false },
+                    { id: 'c-EU', parentId: undefined, isDisabled: false },
+                ]);
+            });
+        });
+
+        it('should allow row to be selectable if isSelectable is passed to getRowOptions', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ isSelectable: true }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: true },
+                    { id: 'c-EU', parentId: undefined, isSelectable: true },
+                ]);
+            });
+
+            hookResult.rerender({
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: { getRowOptions: () => ({ isSelectable: false }) } });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isSelectable: false },
+                    { id: 'c-EU', parentId: undefined, isSelectable: false },
+                ]);
+            });
+        });
+
+        it('should pass onClick to rows if is specified at getRowOptions', async () => {
+            const onClick = jest.fn();
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ onClick }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, onClick },
+                    { id: 'c-EU', parentId: undefined, onClick },
+                ]);
+            });
+
+            const view = hookResult.result.current;
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onClick?.(afRow);
+            });
+
+            expect(onClick).toBeCalledTimes(1);
+            expect(onClick).toBeCalledWith(afRow);
+        });
+
+        it('should pass link to rows if is specified at getRowOptions', async () => {
+            const link = {
+                pathname: '/some-link',
+            };
+
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions: () => ({ link }),
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, link },
+                    { id: 'c-EU', parentId: undefined, link },
+                ]);
+            });
+        });
+
+        it('should pass value/onValueChange to rows if is specified at getRowOptions', async () => {
+            const value = { id: 'someID' } as LocationItem;
+            const onValueChange = jest.fn();
+            const getRowOptions = () => ({ value, onValueChange });
+
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, value, onValueChange },
+                    { id: 'c-EU', parentId: undefined, value, onValueChange },
+                ]);
+            });
+        });
+
+        it('should pass isReadonly to rows if is specified at getRowOptions', async () => {
+            const getRowOptions = () => ({ isReadonly: true });
+
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isReadonly: true },
+                    { id: 'c-EU', parentId: undefined, isReadonly: true },
+                ]);
+            });
+        });
+
+        it('should pass isInvalid to rows if is specified at getRowOptions', async () => {
+            const getRowOptions = () => ({ isInvalid: true });
+
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isInvalid: true },
+                    { id: 'c-EU', parentId: undefined, isInvalid: true },
+                ]);
+            });
+        });
+
+        it('should pin rows if pin function is specified at getRowOptions', async () => {
+            const getRowOptions = () => ({ pin: (item) => item.id === 'c-AF' });
+
+            const { dataSource } = getLazyLocationsDS({
+                getRowOptions,
+            });
+
+            const hookResult = renderHook(
+                ({ dataSourceState, setDataSourceState, props }) => dataSource.useView(dataSourceState, setDataSourceState, props),
+                { initialProps: {
+                    dataSourceState: currentValue,
+                    setDataSourceState: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            const euRow = view.getVisibleRows()[1];
+
+            await act(() => {
+                euRow.onFold?.(euRow);
+            });
+
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+
+            const afRow = view.getVisibleRows()[0];
+
+            await act(() => {
+                afRow.onFold?.(afRow);
+            });
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'DZ', parentId: 'c-AF', isPinned: false },
+                    { id: 'BJ', parentId: 'c-AF', isPinned: false },
+                ]);
+            });
+
+            currentValue.topIndex = 3;
+            hookResult.rerender({ dataSourceState: currentValue, setDataSourceState: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isPinned: true },
+                    { id: 'GM', parentId: 'c-AF', isPinned: false },
+                    { id: 'c-EU', parentId: undefined, isPinned: false },
+                    { id: 'GB', parentId: 'c-EU', isPinned: false },
+                ]);
+            });
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.search.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.search.test.ts
new file mode 100644
index 0000000000..508af8b273
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.search.test.ts
@@ -0,0 +1,1145 @@
+import { CascadeSelection, DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView, LazyDataSourceApiRequest } from '../../../../types';
+import { runDataQuery } from '../../../querying';
+import { LazyDataSource } from '../../LazyDataSource';
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+import { LocationItem, getLazyLocationsDS, getLazyTreeSearchLocationsDS } from '../../__tests__/mocks';
+
+interface TestItem {
+    name: string;
+    id: number;
+    parentId?: number;
+    childrenCount?: number;
+}
+describe('LazyListView - search', () => {
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    describe('flattenSearchResults', () => {
+        const testData: TestItem[] = [
+            { id: 100, name: 'A1' }, { id: 110, name: 'AA2', parentId: 100 }, { id: 111, name: 'AA3', parentId: 110 }, { id: 112, name: 'AA4', parentId: 110 }, { id: 113, name: 'AA5', parentId: 110 }, { id: 114, name: 'AA6', parentId: 110 }, { id: 115, name: 'AA7', parentId: 110 }, { id: 116, name: 'AA8', parentId: 110 }, { id: 120, name: 'AB9', parentId: 100 }, { id: 121, name: 'ABC1', parentId: 120 }, { id: 122, name: 'ABC2', parentId: 120 }, { id: 123, name: 'ABC3', parentId: 120 }, { id: 124, name: 'ABC4', parentId: 120 }, { id: 125, name: 'ABC5', parentId: 120 }, { id: 200, name: 'B1' }, { id: 300, name: 'C1' }, { id: 400, name: 'D1' }, { id: 500, name: 'E1' }, { id: 600, name: 'F1' }, { id: 700, name: 'G1' }, { id: 800, name: 'H1' }, { id: 900, name: 'I1' },
+        ];
+
+        testData.forEach((i) => {
+            i.childrenCount = testData.filter((x) => x.parentId === i.id).length;
+        });
+
+        const testApi = jest.fn((rq: LazyDataSourceApiRequest<TestItem, number, DataQueryFilter<TestItem>>) => Promise.resolve(runDataQuery(testData, rq)));
+        const api = (rq, ctx) => {
+            const search = ctx?.parentId ? undefined : rq.search;
+            const filter = search ? { ...rq.filter } : { ...rq.filter, parentId: ctx?.parentId };
+            return testApi({ ...rq, filter, search });
+        };
+
+        const ds = new LazyDataSource({ api, getChildCount: (i) => i.childrenCount ?? 0 });
+        const viewProps = {
+            flattenSearchResults: true,
+            getRowOptions: () => ({ checkbox: { isVisible: true } }),
+            isFoldedByDefault: () => false,
+            getParentId: (i) => i.parentId,
+            getId: (i) => i.id,
+            api,
+        };
+
+        let currentValue: DataSourceState = { visibleCount: 5 };
+        const onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
+            currentValue = newValue;
+        };
+
+        beforeEach(() => {
+            currentValue = { visibleCount: 5 };
+        });
+
+        it('should search for nested children and build correct path, indent, depth, isLastChild', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => ds.useView(value, onValueChange, props),
+                { initialProps: { value: currentValue, onValueChange: onValueChanged, props: viewProps } },
+            );
+
+            hookResult.rerender({ value: { search: 'ABC5', topIndex: 0, visibleCount: 20 }, onValueChange: onValueChanged, props: viewProps });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const rows = view.getVisibleRows();
+                expect(rows).toEqual([
+                    expect.objectContaining({
+                        id: 125,
+                        depth: 2,
+                        indent: 0,
+                        index: 0,
+                        parentId: 120,
+                        path: [
+                            { id: 100, isLastChild: false, value: { childrenCount: 2, id: 100, name: 'A1' } }, {
+                                id: 120,
+                                isLastChild: false,
+                                value: {
+                                    childrenCount: 5, id: 120, name: 'AB9', parentId: 100,
+                                },
+                            },
+                        ],
+                        isLastChild: true,
+                        value: {
+                            childrenCount: 0, id: 125, name: 'ABC5', parentId: 120,
+                        },
+                    }),
+                ]);
+            });
+            const view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+            expect(rows).toHaveLength(1);
+        });
+
+        it('should detect if found item is last child in parent', async () => {
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => ds.useView(value, onValueChange, props),
+                { initialProps: { value: currentValue, onValueChange: onValueChanged, props: viewProps } },
+            );
+
+            hookResult.rerender({ value: { search: 'ABC', topIndex: 0, visibleCount: 20 }, onValueChange: onValueChanged, props: viewProps });
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const rows = view.getVisibleRows();
+                const path = [
+                    { id: 100, isLastChild: false, value: { childrenCount: 2, id: 100, name: 'A1' } }, {
+                        id: 120,
+                        isLastChild: false,
+                        value: {
+                            childrenCount: 5, id: 120, name: 'AB9', parentId: 100,
+                        },
+                    },
+                ];
+                expect(rows).toEqual(
+                    [
+                        {
+                            id: 121,
+                            depth: 2,
+                            indent: 0,
+                            index: 0,
+                            parentId: 120,
+                            path,
+                            isLastChild: false,
+                            value: {
+                                childrenCount: 0, id: 121, name: 'ABC1', parentId: 120,
+                            },
+                        }, {
+                            id: 122,
+                            depth: 2,
+                            indent: 0,
+                            index: 1,
+                            parentId: 120,
+                            path,
+                            isLastChild: false,
+                            value: {
+                                childrenCount: 0, id: 122, name: 'ABC2', parentId: 120,
+                            },
+                        }, {
+                            id: 123,
+                            depth: 2,
+                            indent: 0,
+                            index: 2,
+                            parentId: 120,
+                            path,
+                            isLastChild: false,
+                            value: {
+                                childrenCount: 0, id: 123, name: 'ABC3', parentId: 120,
+                            },
+                        }, {
+                            id: 124,
+                            depth: 2,
+                            indent: 0,
+                            index: 3,
+                            parentId: 120,
+                            path,
+                            isLastChild: false,
+                            value: {
+                                childrenCount: 0, id: 124, name: 'ABC4', parentId: 120,
+                            },
+                        }, {
+                            id: 125,
+                            depth: 2,
+                            indent: 0,
+                            index: 4,
+                            parentId: 120,
+                            path,
+                            isLastChild: true,
+                            value: {
+                                childrenCount: 0, id: 125, name: 'ABC5', parentId: 120,
+                            },
+                        },
+                    ].map(expect.objectContaining),
+                );
+            });
+
+            const view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+
+            expect(rows).toHaveLength(5);
+        });
+
+        it.each<CascadeSelection>([true, 'explicit'])('should work correctly with cascadeSelection = %s', async (cascadeSelection) => {
+            const { dataSource } = getLazyLocationsDS({
+                flattenSearchResults: true,
+                cascadeSelection,
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.visibleCount = 50;
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined },
+                    { id: 'c-EU', parentId: undefined },
+                ]);
+            });
+
+            currentValue.search = 'Alge';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'DZ', parentId: 'c-AF' },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            let rows = view.getVisibleRows();
+            const rowDZ = rows[0];
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'DZ', parentId: 'c-AF', isChecked: true, isChildrenChecked: true },
+                ]);
+            });
+
+            await waitFor(() => {
+                expect(currentValue.checked).toEqual([
+                    'DZ',
+                    '2474141',
+                    '2475744',
+                    '2475740',
+                    '2475752',
+                    '2475687',
+                    '2475612',
+                    '2475475',
+                    '2474638',
+                    '2474583',
+                    '2474506',
+                ]);
+            });
+
+            currentValue.search = 'Afr';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true },
+                ]);
+            });
+
+            currentValue.search = 'Zeralda';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: '2474583', parentId: 'DZ', isChecked: true, isChildrenChecked: false },
+                ]);
+            });
+
+            rows = view.getVisibleRows();
+            const rowZeralda = rows[0];
+
+            await act(() => {
+                rowZeralda.onCheck?.(rowZeralda);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: '2474583', parentId: 'DZ', isChecked: false, isChildrenChecked: false },
+                ]);
+            });
+
+            currentValue.search = 'Alge';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'DZ', parentId: 'c-AF', isChecked: false, isChildrenChecked: true },
+                ]);
+            });
+
+            currentValue.search = 'Afr';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true },
+                ]);
+            });
+
+            currentValue.search = 'Tlemcen';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: '2475687', isChecked: true, isChildrenChecked: false },
+                ]);
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isChecked: false, isChildrenChecked: true },
+                    { id: 'c-EU', parentId: undefined },
+                ]);
+            });
+        });
+
+        it('should work correctly with cascadeSelection = implicit', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                flattenSearchResults: true,
+                cascadeSelection: 'implicit',
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.visibleCount = 50;
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined },
+                    { id: 'c-EU', parentId: undefined },
+                ]);
+            });
+
+            currentValue.search = 'Alge';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'DZ', parentId: 'c-AF' },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            let rows = view.getVisibleRows();
+            const rowDZ = rows[0];
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'DZ', parentId: 'c-AF', isChecked: true, isChildrenChecked: true },
+                ]);
+            });
+
+            await waitFor(() => {
+                expect(currentValue.checked).toEqual([
+                    'DZ',
+                ]);
+            });
+
+            currentValue.search = 'Afr';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true },
+                ]);
+            });
+
+            currentValue.search = 'Zeralda';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: '2474583', parentId: 'DZ', isChecked: true },
+                ]);
+            });
+
+            rows = view.getVisibleRows();
+            const rowZeralda = rows[0];
+
+            await act(() => {
+                rowZeralda.onCheck?.(rowZeralda);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: '2474583', parentId: 'DZ', isChecked: false },
+                ]);
+            });
+
+            await waitFor(() => {
+                expect(currentValue.checked).toEqual([
+                    '2474141',
+                    '2475744',
+                    '2475740',
+                    '2475752',
+                    '2475687',
+                    '2475612',
+                    '2475475',
+                    '2474638',
+                    '2474506',
+                ]);
+            });
+
+            currentValue.search = 'Alge';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'DZ', parentId: 'c-AF', isChecked: false, isChildrenChecked: true },
+                ]);
+            });
+
+            currentValue.search = 'Afr';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true },
+                ]);
+            });
+
+            currentValue.search = 'Tlemcen';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: '2475687', isChecked: true },
+                ]);
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isChecked: false, isChildrenChecked: true },
+                    { id: 'c-EU', parentId: undefined },
+                ]);
+            });
+        });
+
+        it('should work correctly with cascadeSelection = false', async () => {
+            const { dataSource } = getLazyLocationsDS({
+                flattenSearchResults: true,
+                cascadeSelection: false,
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.visibleCount = 50;
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined },
+                    { id: 'c-EU', parentId: undefined },
+                ]);
+            });
+
+            currentValue.search = 'Alge';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'DZ', parentId: 'c-AF' },
+                ]);
+            });
+
+            let view = hookResult.result.current;
+            let rows = view.getVisibleRows();
+            const rowDZ = rows[0];
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'DZ', parentId: 'c-AF', isChecked: true, isChildrenChecked: false },
+                ]);
+            });
+
+            await waitFor(() => {
+                expect(currentValue.checked).toEqual([
+                    'DZ',
+                ]);
+            });
+
+            currentValue.search = 'Afr';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true },
+                ]);
+            });
+
+            currentValue.search = 'Zeralda';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: '2474583', parentId: 'DZ', isChecked: false },
+                ]);
+            });
+
+            rows = view.getVisibleRows();
+            const rowZeralda = rows[0];
+
+            await act(() => {
+                rowZeralda.onCheck?.(rowZeralda);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: '2474583', parentId: 'DZ', isChecked: true },
+                ]);
+            });
+
+            await waitFor(() => {
+                expect(currentValue.checked).toEqual([
+                    'DZ',
+                    '2474583',
+                ]);
+            });
+
+            currentValue.search = 'Alge';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'DZ', parentId: 'c-AF', isChecked: true, isChildrenChecked: true },
+                ]);
+            });
+
+            currentValue.search = 'Afr';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', isChecked: false, isChildrenChecked: true },
+                ]);
+            });
+
+            currentValue.search = 'Tlemcen';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: '2475687', isChecked: false },
+                ]);
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expect(view.getListProps().isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 'c-AF', parentId: undefined, isChecked: false, isChildrenChecked: true },
+                    { id: 'c-EU', parentId: undefined },
+                ]);
+            });
+        });
+    });
+
+    describe('tree-search', () => {
+        let currentValue: DataSourceState = { visibleCount: 5 };
+        const onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
+            currentValue = newValue;
+        };
+
+        beforeEach(() => {
+            currentValue = { visibleCount: 5 };
+        });
+
+        it('should show unfolded tree results', async () => {
+            const { dataSource } = getLazyTreeSearchLocationsDS({
+                flattenSearchResults: false,
+            });
+
+            currentValue.search = 'Zeral';
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+        });
+
+        it.each<CascadeSelection>([true, 'explicit'])('should check all children for search results with cascadeSelection = %s', async (cascadeSelection) => {
+            const { dataSource } = getLazyTreeSearchLocationsDS({
+                cascadeSelection,
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rows = view.getVisibleRows();
+            const rowDZ = rows[1];
+
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            expect(currentValue.checked).toEqual([
+                'DZ',
+                '2474141',
+                '2475744',
+                '2475740',
+                '2475752',
+                '2475687',
+                '2475612',
+                '2475475',
+                '2474638',
+                '2474583',
+                '2474506',
+            ]);
+
+            currentValue.search = 'Touggourt';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rowTouggourt = view.getVisibleRows()[2];
+
+            await act(() => {
+                rowTouggourt.onCheck?.(rowTouggourt);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                        { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                    ],
+                );
+            });
+        });
+
+        it('should check all children for search results with cascadeSelection = implicit', async () => {
+            const { dataSource } = getLazyTreeSearchLocationsDS({
+                cascadeSelection: 'implicit',
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rows = view.getVisibleRows();
+            const rowDZ = rows[1];
+
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            expect(currentValue.checked).toEqual(['DZ']);
+
+            currentValue.search = 'Touggourt';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: true, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rowTouggourt = view.getVisibleRows()[2];
+
+            await act(() => {
+                rowTouggourt.onCheck?.(rowTouggourt);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2475475', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                        { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                    ],
+                );
+            });
+        });
+
+        it('should check all children for search results with cascadeSelection = false', async () => {
+            const { dataSource } = getLazyTreeSearchLocationsDS({
+                cascadeSelection: false,
+                rowOptions: { checkbox: { isVisible: true } },
+            });
+
+            currentValue.search = 'Zeral';
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: currentValue,
+                    onValueChange: onValueChanged,
+                    props: {},
+                } },
+            );
+
+            let view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                    { isLoading: true },
+                ],
+            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                const listProps = view.getListProps();
+                expect(listProps.isReloading).toBeFalsy();
+            });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            const rows = view.getVisibleRows();
+            const rowDZ = rows[1];
+
+            await act(() => {
+                rowDZ.onCheck?.(rowDZ);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'DZ', isChecked: true, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                        { id: '2474583', isChecked: false, isFolded: false, indent: 3, depth: 2 },
+                    ],
+                );
+            });
+
+            expect(currentValue.checked).toEqual(['DZ']);
+
+            currentValue.search = 'Benin';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: false, indent: 1, depth: 0 },
+                        { id: 'BJ', isChecked: false, isChildrenChecked: false, isFolded: false, indent: 2, depth: 1 },
+                    ],
+                );
+            });
+
+            currentValue.search = '';
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 'c-AF', isChecked: false, isChildrenChecked: true, isFolded: true, indent: 1, depth: 0 },
+                        { id: 'c-EU', isChecked: false, isChildrenChecked: false, isFolded: true, indent: 1, depth: 0 },
+                    ],
+                );
+            });
+        });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.show-only-selected.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.show-only-selected.test.ts
new file mode 100644
index 0000000000..e3c4389582
--- /dev/null
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.show-only-selected.test.ts
@@ -0,0 +1,537 @@
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+import { DataQueryFilter, DataRowProps, DataSourceState, IDataSourceView } from '../../../../types';
+import { LocationItem, getLazyLocationsDS } from '../../__tests__/mocks';
+
+describe('LazyListView - show only selected', () => {
+    let currentValue: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
+        currentValue = newValue;
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+        currentValue = { topIndex: 0, visibleCount: 3 };
+    });
+
+    function expectViewToLookLike(
+        view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+        rows: Partial<DataRowProps<LocationItem, string>>[],
+    ) {
+        const viewRows = view.getVisibleRows();
+        expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+    }
+
+    it('should load only checked items if showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getLazyLocationsDS({
+            showSelectedOnly: true,
+        });
+
+        currentValue.checked = ['BJ', 'c-AF', 'DZ'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        expect(apiMock).toBeCalledWith({ ids: ['BJ', 'c-AF', 'DZ'] }, undefined);
+    });
+
+    it('should load only selected item if showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getLazyLocationsDS({
+            showSelectedOnly: true,
+        });
+
+        currentValue.selectedId = 'c-EU';
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        expect(apiMock).toBeCalledWith({ ids: ['c-EU'] }, undefined);
+    });
+
+    it('should load checked and selected items if showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getLazyLocationsDS({
+            showSelectedOnly: true,
+        });
+
+        currentValue.checked = ['BJ', 'c-AF', 'DZ'];
+        currentValue.selectedId = 'c-EU';
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeFalsy();
+        });
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        expect(apiMock).toBeCalledWith({ ids: ['BJ', 'c-AF', 'DZ', 'c-EU'] }, undefined);
+    });
+
+    it('should load checked and selected items and their parents if showSelectedOnly = false', async () => {
+        const { apiMock, dataSource } = getLazyLocationsDS({
+            showSelectedOnly: false,
+        });
+
+        currentValue.checked = ['BJ', '2392308'];
+        currentValue.selectedId = '2474506';
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const listProps = view.getListProps();
+            expect(listProps.isReloading).toBeTruthy();
+        });
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(3);
+        });
+
+        expect(apiMock).toHaveBeenCalledWith(
+            {
+                filter: {}, page: undefined, pageSize: undefined, range: { count: 3, from: 0 }, search: undefined, sorting: undefined,
+            },
+            { parent: null, parentId: null },
+        );
+
+        expect(apiMock).toHaveBeenCalledWith({ ids: ['BJ', '2392308', '2474506'] }, undefined);
+        expect(apiMock).toHaveBeenCalledWith({ ids: ['DZ'] }, undefined);
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        const view = hookResult.result.current;
+        expectViewToLookLike(view, [
+            { id: 'c-AF' },
+            { id: 'c-EU' },
+        ]);
+    });
+
+    it('should show only selected rows in order of selection', async () => {
+        const { apiMock, dataSource } = getLazyLocationsDS({
+            showSelectedOnly: false,
+        });
+
+        currentValue.checked = ['BJ', '2392308', 'c-AF'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(2);
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        let view = hookResult.result.current;
+        expectViewToLookLike(view, [
+            { id: 'c-AF' },
+            { id: 'c-EU' },
+        ]);
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: true } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', parentId: 'c-AF', indent: 0, depth: 1 },
+                { id: '2392308', parentId: 'BJ', indent: 0, depth: 2 },
+                { id: 'c-AF', indent: 0, depth: 0 },
+            ]);
+        });
+    });
+
+    it('should show only selected rows if on init showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getLazyLocationsDS({
+            showSelectedOnly: true,
+        });
+
+        currentValue.checked = ['BJ', '2392308', 'c-AF'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(1);
+        });
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        const view = hookResult.result.current;
+        expectViewToLookLike(view, [
+            { id: 'BJ' },
+            { id: '2392308' },
+            { id: 'c-AF' },
+        ]);
+    });
+
+    it('should remove items from showSelectedOnly rows on uncheck with cascadeSelection = explicit', async () => {
+        const { dataSource } = getLazyLocationsDS({
+            showSelectedOnly: false,
+            cascadeSelection: 'explicit',
+            rowOptions: { checkbox: { isVisible: true } },
+        });
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', isChecked: false },
+                { id: 'c-EU', isChecked: false },
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        let rows = view.getVisibleRows();
+        const rowAF = rows[0];
+        await act(() => {
+            rowAF.onCheck?.(rowAF);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', isChecked: true },
+                { id: 'c-EU', isChecked: false },
+            ]);
+        });
+
+        expect(currentValue).toEqual(
+            expect.objectContaining({ checked: [
+                'c-AF',
+                'DZ',
+                '2474141',
+                '2475744',
+                '2475740',
+                '2475752',
+                '2475687',
+                '2475612',
+                '2475475',
+                '2474638',
+                '2474583',
+                '2474506',
+                'BJ',
+                '2392505',
+                '2392308',
+                '2392204',
+                '2392108',
+                '2392087',
+                '2392009',
+                '2391895',
+                '2391893',
+                '2391455',
+                '2391377',
+                'GM',
+                '2413920',
+                '2413876',
+                '2413753',
+                '2413515',
+                '2412749',
+                '2411880',
+            ],
+            topIndex: 0,
+            visibleCount: 3 }),
+        );
+
+        currentValue.visibleCount = 5;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: true } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF', isChecked: true },
+                { id: 'DZ', isChecked: true },
+                { id: '2474141', isChecked: true },
+                { id: '2475744', isChecked: true },
+                { id: '2475740', isChecked: true },
+            ]);
+        });
+
+        rows = view.getVisibleRows();
+        const checkedRowDZ = rows[1];
+
+        await act(() => {
+            checkedRowDZ.onCheck?.(checkedRowDZ);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: true } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', isChecked: true },
+                { id: '2392505', isChecked: true },
+                { id: '2392308', isChecked: true },
+                { id: '2392204', isChecked: true },
+                { id: '2392108', isChecked: true },
+            ]);
+        });
+
+        expect(currentValue).toEqual(
+            expect.objectContaining({ checked: [
+                'BJ',
+                '2392505',
+                '2392308',
+                '2392204',
+                '2392108',
+                '2392087',
+                '2392009',
+                '2391895',
+                '2391893',
+                '2391455',
+                '2391377',
+                'GM',
+                '2413920',
+                '2413876',
+                '2413753',
+                '2413515',
+                '2412749',
+                '2411880',
+            ],
+            topIndex: 0,
+            visibleCount: 5 }),
+        );
+    });
+
+    it('should not clear loading checked items if showSelectedOnly = true', async () => {
+        const { dataSource } = getLazyLocationsDS({
+            showSelectedOnly: true,
+            rowOptions: { checkbox: { isVisible: true } },
+        }, 0);
+
+        currentValue.checked = ['BJ', 'c-AF', 'DZ'];
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        let view = hookResult.result.current;
+        await act(() => {
+            view.clearAllChecked();
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expect(view.getListProps().isReloading).toBeFalsy();
+        });
+
+        expect(currentValue).toEqual(
+            expect.objectContaining({ checked: ['BJ', 'c-AF', 'DZ'], topIndex: 0, visibleCount: 3 }),
+        );
+    });
+
+    it('should clear loaded checked items if showSelectedOnly = true', async () => {
+        const { apiMock, dataSource } = getLazyLocationsDS({
+            showSelectedOnly: true,
+            rowOptions: { checkbox: { isVisible: true } },
+        }, 0);
+
+        currentValue.checked = [
+            'BJ',
+            'DZ',
+            '2392505',
+            '2392308',
+            '2392204',
+            '2392108',
+            '2392087',
+            '2392009',
+            '2391895',
+            '2391893',
+            '2391455',
+        ];
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            expect(apiMock).toBeCalledTimes(2);
+        });
+
+        expect(apiMock).toBeCalledWith({ ids: [
+            'BJ',
+            'DZ',
+            '2392505',
+            '2392308',
+            '2392204',
+            '2392108',
+            '2392087',
+            '2392009',
+            '2391895',
+            '2391893',
+            '2391455',
+        ] }, undefined);
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', isChecked: true },
+                { id: 'DZ', isChecked: true },
+                { id: '2392505', isChecked: true },
+            ]);
+        }, { timeout: 1000 });
+
+        const view = hookResult.result.current;
+        await act(() => {
+            view.clearAllChecked();
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            expect(currentValue).toEqual(
+                expect.objectContaining({ checked: [], topIndex: 0, visibleCount: 3 }),
+            );
+        });
+    });
+
+    it('should load tree after clearing checked values with showSelectedOnly = true', async () => {
+        const { dataSource } = getLazyLocationsDS({
+            showSelectedOnly: true,
+            rowOptions: { checkbox: { isVisible: true } },
+        }, 0);
+
+        currentValue.checked = [
+            'SOME_UNKNONW_ITEM',
+            'BJ',
+            'DZ',
+            '2392505',
+            '2392308',
+            '2392204',
+            '2392108',
+            '2392087',
+            '2392009',
+            '2391895',
+            '2391893',
+            '2391455',
+        ];
+
+        const hookResult = renderHook(
+            ({ value, onValueChange, props }) => dataSource.useView(value, onValueChange, props),
+            { initialProps: {
+                value: currentValue,
+                onValueChange: onValueChanged,
+                props: {},
+            } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'BJ', isChecked: true },
+                { id: 'DZ', isChecked: true },
+                { id: '2392505', isChecked: true },
+            ]);
+        }, { timeout: 1000 });
+
+        let view = hookResult.result.current;
+        await act(() => {
+            view.clearAllChecked();
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            expect(currentValue).toEqual(
+                expect.objectContaining({ checked: [], topIndex: 0, visibleCount: 3 }),
+            );
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged, props: { showSelectedOnly: false } });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 'c-AF' },
+                { id: 'c-EU' },
+            ]);
+        }, { timeout: 1000 });
+    });
+});
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.tree-no-counts.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.tree-no-counts.test.ts
index db515152a9..558dd73a22 100644
--- a/uui-core/src/data/processing/views/__tests__/LazyListView.tree-no-counts.test.ts
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.tree-no-counts.test.ts
@@ -1,10 +1,10 @@
 import { LazyDataSource } from '../../LazyDataSource';
-import { LazyListView, LazyListViewProps } from '../LazyListView';
 import {
-    DataSourceState, LazyDataSourceApi, DataQueryFilter, DataRowProps,
+    DataSourceState, LazyDataSourceApi, DataQueryFilter, DataRowProps, IDataSourceView,
 } from '../../../../types';
 import { runDataQuery } from '../../../querying/runDataQuery';
-import { delay, renderHook } from '@epam/uui-test-utils';
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { LazyListViewProps } from '../types';
 
 interface TestItem {
     id: number;
@@ -33,7 +33,11 @@ describe('LazyListView', () => {
     const testDataById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
 
     let currentValue: DataSourceState;
-    const onValueChanged = (newValue: DataSourceState) => {
+    const onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
         currentValue = newValue;
     };
 
@@ -62,7 +66,10 @@ describe('LazyListView', () => {
         });
     });
 
-    function expectViewToLookLike(view: LazyListView<TestItem, number>, rows: Partial<DataRowProps<TestItem, number>>[], rowsCount?: number) {
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, number, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, number>>[],
+    ) {
         const viewRows = view.getVisibleRows();
 
         rows.forEach((r) => {
@@ -72,8 +79,6 @@ describe('LazyListView', () => {
         });
 
         expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
-        const listProps = view.getListProps();
-        rowsCount != null && expect(listProps.rowsCount).toEqual(rowsCount);
     }
 
     it('can load tree, unfold nodes, and scroll down', async () => {
@@ -86,58 +91,80 @@ describe('LazyListView', () => {
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: viewProps } },
         );
 
-        const view = hookResult.result.current;
+        let view;
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ isLoading: true }, { isLoading: true }, { isLoading: true }]);
+        });
 
-        expectViewToLookLike(view, [
-            { isLoading: true }, { isLoading: true }, { isLoading: true },
-        ]);
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        await delay();
         expect(testApi).toBeCalledTimes(1);
         testApi.mockClear();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isFoldable: true, isFolded: true }, { id: 200, isFoldable: false }, { id: 300, isFoldable: true, isFolded: true },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            { id: 100, isFoldable: true, isFolded: true }, { id: 200, isFoldable: false }, { id: 300, isFoldable: true, isFolded: true },
-        ]);
+        view = hookResult.result.current;
         expect(view.getListProps().rowsCount).toBeGreaterThan(3); // actually read all items, but we don't know if that's the end of the list
 
         // scroll 1 row down
         hookResult.rerender({ value: { ...currentValue, topIndex: 1 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(view, [
-            { id: 200, isFoldable: false }, { id: 300, isFoldable: true, isFolded: true }, { isLoading: true },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 200, isFoldable: false }, { id: 300, isFoldable: true, isFolded: true }, { isLoading: true },
+            ]);
+        });
+
         expect(view.getListProps().rowsCount).toBeGreaterThan(4);
 
-        await delay();
         expect(testApi).toBeCalledTimes(1);
         testApi.mockClear();
 
-        expectViewToLookLike(view, [{ id: 200, isFoldable: false }, { id: 300, isFoldable: true, isFolded: true }]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 200, isFoldable: false }, { id: 300, isFoldable: true, isFolded: true },
+            ]);
+        });
+
         expect(view.getListProps().rowsCount).toBe(3); // now we know that item #4 doesn't exists, so we know count
 
         // scroll top
         hookResult.rerender({ value: { ...currentValue, topIndex: 0, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            const rows = view.getVisibleRows();
+            expect(typeof rows[0].onFold).toEqual('function');
+        });
+        view = hookResult.result.current;
         const rows = view.getVisibleRows();
 
         // unfold first row
-        rows[0].onFold?.(rows[0]);
+        rows[0].onFold(rows[0]);
         hookResult.rerender({ value: { ...currentValue, topIndex: 0, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
-        expectViewToLookLike(view, [
-            { id: 100 }, { isLoading: true }, { isLoading: true }, { id: 200 }, { id: 300 },
-        ], 5); // even we don't know if there are children of a children of #100, we understand that there's no row below 300, so we need to recieve exact rows count here
-
-        await delay();
-
-        expectViewToLookLike(
-            view,
-            [
-                {
-                    id: 100, isFolded: false, depth: 0, isFoldable: true,
-                }, { id: 110, depth: 1, isFoldable: false }, { id: 120, depth: 1, isFoldable: true }, { id: 200, depth: 0 }, { id: 300, depth: 0 },
-            ],
-            5,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { isLoading: true }, { isLoading: true }, { id: 200 }, { id: 300 },
+            ]);
+        });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isFolded: false, depth: 0, isFoldable: true },
+                { id: 110, depth: 1, isFoldable: false },
+                { id: 120, depth: 1, isFoldable: true },
+                { id: 200, depth: 0 },
+                { id: 300, depth: 0 },
+            ]);
+        });
     });
 });
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.tree-search.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.tree-search.test.ts
deleted file mode 100644
index 956be39087..0000000000
--- a/uui-core/src/data/processing/views/__tests__/LazyListView.tree-search.test.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import { DataQueryFilter, DataSourceState, LazyDataSourceApiRequest } from '../../../../types';
-import { runDataQuery } from '../../../querying';
-import { LazyDataSource } from '../../LazyDataSource';
-import { delay, renderHook } from '@epam/uui-test-utils';
-
-interface TestItem {
-    name: string;
-    id: number;
-    parentId?: number;
-    childrenCount?: number;
-}
-describe('LazyListView', () => {
-    const testData: TestItem[] = [
-        { id: 100, name: 'A1' }, { id: 110, name: 'AA2', parentId: 100 }, { id: 111, name: 'AA3', parentId: 110 }, { id: 112, name: 'AA4', parentId: 110 }, { id: 113, name: 'AA5', parentId: 110 }, { id: 114, name: 'AA6', parentId: 110 }, { id: 115, name: 'AA7', parentId: 110 }, { id: 116, name: 'AA8', parentId: 110 }, { id: 120, name: 'AB9', parentId: 100 }, { id: 121, name: 'ABC1', parentId: 120 }, { id: 122, name: 'ABC2', parentId: 120 }, { id: 123, name: 'ABC3', parentId: 120 }, { id: 124, name: 'ABC4', parentId: 120 }, { id: 125, name: 'ABC5', parentId: 120 }, { id: 200, name: 'B1' }, { id: 300, name: 'C1' }, { id: 400, name: 'D1' }, { id: 500, name: 'E1' }, { id: 600, name: 'F1' }, { id: 700, name: 'G1' }, { id: 800, name: 'H1' }, { id: 900, name: 'I1' },
-    ];
-
-    testData.forEach((i) => {
-        i.childrenCount = testData.filter((x) => x.parentId === i.id).length;
-    });
-
-    let currentValue: DataSourceState = { visibleCount: 5 };
-    const onValueChanged = (newValue: DataSourceState) => {
-        currentValue = newValue;
-    };
-
-    const testApi = jest.fn((rq: LazyDataSourceApiRequest<TestItem, number, DataQueryFilter<TestItem>>) => Promise.resolve(runDataQuery(testData, rq)));
-    const api = (rq, ctx) => {
-        const search = ctx?.parentId ? undefined : rq.search;
-        const filter = search ? { ...rq.filter } : { ...rq.filter, parentId: ctx?.parentId };
-        return testApi({ ...rq, filter, search });
-    };
-
-    const ds = new LazyDataSource({ api, getChildCount: (i) => i.childrenCount ?? 0 });
-    const viewProps = {
-        flattenSearchResults: true,
-        getRowOptions: () => ({ checkbox: { isVisible: true } }),
-        isFoldedByDefault: () => false,
-        getParentId: (i) => i.parentId,
-        getId: (i) => i.id,
-        api,
-    };
-
-    it('should search for nested children and build correct path, indent, depth, isLastChild', async () => {
-        const hookResult = renderHook(
-            ({ value, onValueChange, props }) => ds.useView(value, onValueChange, props),
-            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: viewProps } },
-        );
-
-        hookResult.rerender({ value: { search: 'ABC5', topIndex: 0, visibleCount: 20 }, onValueChange: onValueChanged, props: viewProps });
-
-        const view = hookResult.result.current;
-
-        view.getVisibleRows();
-        await delay();
-        const rows = view.getVisibleRows();
-
-        expect(rows).toHaveLength(1);
-        expect(rows).toEqual([
-            expect.objectContaining({
-                id: 125,
-                depth: 2,
-                indent: 0,
-                index: 0,
-                parentId: 120,
-                path: [
-                    { id: 100, isLastChild: false, value: { childrenCount: 2, id: 100, name: 'A1' } }, {
-                        id: 120,
-                        isLastChild: false,
-                        value: {
-                            childrenCount: 5, id: 120, name: 'AB9', parentId: 100,
-                        },
-                    },
-                ],
-                isLastChild: true,
-                value: {
-                    childrenCount: 0, id: 125, name: 'ABC5', parentId: 120,
-                },
-            }),
-        ]);
-    });
-
-    it('should detect if found item is last child in parent', async () => {
-        const hookResult = renderHook(
-            ({ value, onValueChange, props }) => ds.useView(value, onValueChange, props),
-            { initialProps: { value: currentValue, onValueChange: onValueChanged, props: viewProps } },
-        );
-
-        hookResult.rerender({ value: { search: 'ABC', topIndex: 0, visibleCount: 20 }, onValueChange: onValueChanged, props: viewProps });
-
-        const view = hookResult.result.current;
-
-        view.getVisibleRows();
-        await delay();
-        const rows = view.getVisibleRows();
-
-        expect(rows).toHaveLength(5);
-        const path = [
-            { id: 100, isLastChild: false, value: { childrenCount: 2, id: 100, name: 'A1' } }, {
-                id: 120,
-                isLastChild: false,
-                value: {
-                    childrenCount: 5, id: 120, name: 'AB9', parentId: 100,
-                },
-            },
-        ];
-        expect(rows).toEqual(
-            [
-                {
-                    id: 121,
-                    depth: 2,
-                    indent: 0,
-                    index: 0,
-                    parentId: 120,
-                    path,
-                    isLastChild: false,
-                    value: {
-                        childrenCount: 0, id: 121, name: 'ABC1', parentId: 120,
-                    },
-                }, {
-                    id: 122,
-                    depth: 2,
-                    indent: 0,
-                    index: 1,
-                    parentId: 120,
-                    path,
-                    isLastChild: false,
-                    value: {
-                        childrenCount: 0, id: 122, name: 'ABC2', parentId: 120,
-                    },
-                }, {
-                    id: 123,
-                    depth: 2,
-                    indent: 0,
-                    index: 2,
-                    parentId: 120,
-                    path,
-                    isLastChild: false,
-                    value: {
-                        childrenCount: 0, id: 123, name: 'ABC3', parentId: 120,
-                    },
-                }, {
-                    id: 124,
-                    depth: 2,
-                    indent: 0,
-                    index: 3,
-                    parentId: 120,
-                    path,
-                    isLastChild: false,
-                    value: {
-                        childrenCount: 0, id: 124, name: 'ABC4', parentId: 120,
-                    },
-                }, {
-                    id: 125,
-                    depth: 2,
-                    indent: 0,
-                    index: 4,
-                    parentId: 120,
-                    path,
-                    isLastChild: true,
-                    value: {
-                        childrenCount: 0, id: 125, name: 'ABC5', parentId: 120,
-                    },
-                },
-            ].map(expect.objectContaining),
-        );
-    });
-});
diff --git a/uui-core/src/data/processing/views/__tests__/LazyListView.tree.test.ts b/uui-core/src/data/processing/views/__tests__/LazyListView.tree.test.ts
index 3d1fdbd83f..870afb0a26 100644
--- a/uui-core/src/data/processing/views/__tests__/LazyListView.tree.test.ts
+++ b/uui-core/src/data/processing/views/__tests__/LazyListView.tree.test.ts
@@ -1,10 +1,11 @@
 import { LazyDataSource } from '../../LazyDataSource';
-import { LazyListView } from '../LazyListView';
-import { delay, renderHook } from '@epam/uui-test-utils';
+import { act, renderHook, waitFor } from '@epam/uui-test-utils';
+
 import {
-    DataSourceState, LazyDataSourceApiRequest, DataQueryFilter, DataRowProps,
+    DataSourceState, LazyDataSourceApiRequest, DataQueryFilter, DataRowProps, IDataSourceView,
 } from '../../../../types';
 import { runDataQuery } from '../../../querying/runDataQuery';
+import { LocationItem, getLazyLocationsDS } from '../../__tests__/mocks';
 
 interface TestItem {
     id: number;
@@ -33,7 +34,11 @@ describe('LazyListView', () => {
     const testDataById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
 
     let currentValue: DataSourceState;
-    let onValueChanged = (newValue: DataSourceState) => {
+    let onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+        if (typeof newValue === 'function') {
+            currentValue = newValue(currentValue);
+            return;
+        }
         currentValue = newValue;
     };
 
@@ -48,7 +53,11 @@ describe('LazyListView', () => {
 
     beforeEach(() => {
         currentValue = { topIndex: 0, visibleCount: 3 };
-        onValueChanged = (newValue: DataSourceState) => {
+        onValueChanged = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                currentValue = newValue(currentValue);
+                return;
+            }
             currentValue = newValue;
         };
         testApi.mockClear();
@@ -62,7 +71,10 @@ describe('LazyListView', () => {
         });
     });
 
-    function expectViewToLookLike(view: LazyListView<TestItem, number>, rows: Partial<DataRowProps<TestItem, number>>[], rowsCount?: number) {
+    function expectViewToLookLike(
+        view: IDataSourceView<TestItem, number, DataQueryFilter<TestItem>>,
+        rows: Partial<DataRowProps<TestItem, number>>[],
+    ) {
         const viewRows = view.getVisibleRows();
 
         rows.forEach((r) => {
@@ -72,8 +84,6 @@ describe('LazyListView', () => {
         });
 
         expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
-        const listProps = view.getListProps();
-        rowsCount != null && expect(listProps.rowsCount).toEqual(rowsCount);
     }
 
     it('can load tree, unfold nodes, and scroll down', async () => {
@@ -81,58 +91,72 @@ describe('LazyListView', () => {
             ({ value, onValueChange, props }) => treeDataSource.useView(value, onValueChange, props),
             { initialProps: { value: currentValue, onValueChange: onValueChanged, props: {} } },
         );
-        const view = hookResult.result.current;
-
-        expectViewToLookLike(view, [
-            {
-                isLoading: true, depth: 0, indent: 0, path: [],
-            }, {
-                isLoading: true, depth: 0, indent: 0, path: [],
-            }, {
-                isLoading: true, depth: 0, indent: 0, path: [],
-            },
-        ]);
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    isLoading: true, depth: 0, indent: 0, path: [],
+                }, {
+                    isLoading: true, depth: 0, indent: 0, path: [],
+                }, {
+                    isLoading: true, depth: 0, indent: 0, path: [],
+                },
+            ]);
+        });
+
+        let view = hookResult.result.current;
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
-        await delay();
-        expect(testApi).toBeCalledTimes(1);
+        await waitFor(() => {
+            expect(testApi).toBeCalledTimes(1);
+        });
+
         testApi.mockClear();
 
-        expectViewToLookLike(
-            view,
-            [
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
                 {
                     id: 100, isFoldable: true, isFolded: true, path: [],
                 }, { id: 200, isFoldable: false, path: [] }, {
                     id: 300, isFoldable: true, isFolded: true, path: [],
                 },
-            ],
-            3,
-        );
+            ]);
+        });
 
         // Unfold some rows
         let rows = view.getVisibleRows();
         hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
-        rows[0].onFold?.(rows[0]);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            rows = view.getVisibleRows();
+            expect(typeof rows[0].onFold).toBe('function');
+        });
+
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
+
         hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(
-            view,
-            [
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
                 { id: 100, depth: 0, indent: 1 },
                 { isLoading: true, depth: 1, indent: 2 },
                 { isLoading: true, depth: 1, indent: 2 },
                 { id: 200, depth: 0, indent: 1 },
                 { id: 300, depth: 0, indent: 1 },
-            ],
-            5,
-        ); // even we don't know if there are children of a children of #100, we understand that there's no row below 300, so we need to receive exact rows count here
-
-        await delay();
+            ]);
+        });
+        let listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(5);
 
-        expectViewToLookLike(
-            view,
-            [
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
                 {
                     id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
                 }, {
@@ -140,50 +164,60 @@ describe('LazyListView', () => {
                 }, {
                     id: 120, depth: 1, indent: 2, isFoldable: true,
                 }, { id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 },
-            ],
-            5,
-        );
+            ]);
+        });
+
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(5);
 
         // Unfold more rows
         rows = view.getVisibleRows();
-        rows[2].onFold?.(rows[2]);
+
+        await act(() => {
+            rows[2].onFold?.(rows[2]);
+        });
 
         hookResult.rerender({ value: { ...currentValue, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
+                }, {
+                    id: 110, depth: 1, indent: 2, isFoldable: false,
+                }, {
+                    id: 120, depth: 1, indent: 2, isFoldable: true,
+                }, { isLoading: true, depth: 2, indent: 3 }, { isLoading: true, depth: 2, indent: 3 }, { id: 200, depth: 0, indent: 1 },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            {
-                id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
-            }, {
-                id: 110, depth: 1, indent: 2, isFoldable: false,
-            }, {
-                id: 120, depth: 1, indent: 2, isFoldable: true,
-            }, { isLoading: true, depth: 2, indent: 3 }, { isLoading: true, depth: 2, indent: 3 }, { id: 200, depth: 0, indent: 1 },
-        ]);
-
-        await delay();
-
-        expectViewToLookLike(view, [
-            {
-                id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
-            }, {
-                id: 110, depth: 1, indent: 2, isFoldable: false,
-            }, {
-                id: 120, depth: 1, indent: 2, isFoldable: true,
-            }, {
-                id: 121, depth: 2, indent: 3, isFoldable: false,
-            }, {
-                id: 122, depth: 2, indent: 3, isFoldable: false,
-            }, { id: 200, depth: 0, indent: 1 },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                {
+                    id: 100, isFolded: false, depth: 0, indent: 1, isFoldable: true,
+                }, {
+                    id: 110, depth: 1, indent: 2, isFoldable: false,
+                }, {
+                    id: 120, depth: 1, indent: 2, isFoldable: true,
+                }, {
+                    id: 121, depth: 2, indent: 3, isFoldable: false,
+                }, {
+                    id: 122, depth: 2, indent: 3, isFoldable: false,
+                }, { id: 200, depth: 0, indent: 1 },
+            ]);
+        });
 
         // Scroll down to bottom
         hookResult.rerender({ value: { ...currentValue, topIndex: 5, visibleCount: 6 }, onValueChange: onValueChanged, props: {} });
 
-        expectViewToLookLike(
-            view,
-            [{ id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 }],
-            7,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [{ id: 200, depth: 0, indent: 1 }, { id: 300, depth: 0, indent: 1 }]);
+        });
+
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(7);
     });
 
     it('Multi-level folding', async () => {
@@ -197,38 +231,82 @@ describe('LazyListView', () => {
             { initialProps: { value: currentValue } },
         );
 
-        const view = hookResult.result.current;
-        view.getListProps(); // trigger loading
-        await delay();
-
-        expectViewToLookLike(
-            view,
-            [
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
                 { id: 100 }, { id: 110 }, { id: 120 }, { id: 121 }, { id: 122 }, { id: 200 }, { id: 300 }, { id: 310 }, { id: 320 }, { id: 330 },
-            ],
-            10,
-        );
+            ]);
+        });
+
+        let view = hookResult.result.current;
+        let listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(10);
 
         // fold row #120
         let rows = view.getVisibleRows();
-        rows[2].onFold?.(rows[2]);
+        await act(() => {
+            rows[2].onFold?.(rows[2]);
+        });
+
         hookResult.rerender({ value: currentValue });
 
-        await delay();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 110 }, { id: 120 }, { id: 200 }, { id: 300 }, { id: 310 }, { id: 320 }, { id: 330 },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            { id: 100 }, { id: 110 }, { id: 120 }, { id: 200 }, { id: 300 }, { id: 310 }, { id: 320 }, { id: 330 },
-        ], 8);
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(8);
 
         // fold row #100
         rows = view.getVisibleRows();
-        rows[0].onFold?.(rows[0]);
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
+
+        hookResult.rerender({ value: currentValue });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 200 }, { id: 300 }, { id: 310 }, { id: 320 }, { id: 330 },
+            ]);
+        });
+
+        listProps = view.getListProps();
+        expect(listProps.rowsCount).toEqual(6);
+    });
+
+    it('should clear cache', async () => {
+        const hookResult = renderHook(
+            ({ value }) => treeDataSource.useView(value, onValueChanged, { isFoldedByDefault: () => false, backgroundReload: false }),
+            { initialProps: { value: currentValue } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 110 }, { id: 120 },
+            ]);
+        });
+
+        treeDataSource.clearCache();
+
         hookResult.rerender({ value: currentValue });
-        await delay();
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { isLoading: true }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            { id: 100 }, { id: 200 }, { id: 300 }, { id: 310 }, { id: 320 }, { id: 330 },
-        ], 6);
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 110 }, { id: 120 },
+            ]);
+        });
     });
 
     it('load children lazily', async () => {
@@ -237,31 +315,35 @@ describe('LazyListView', () => {
             { initialProps: { value: currentValue } },
         );
 
-        const view = hookResult.result.current;
-        view.getListProps(); // trigger loading
-        await delay();
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 110 }, { id: 120 },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            { id: 100 }, { id: 110 }, { id: 120 },
-        ]);
+        let view = hookResult.result.current;
         expect(view.getListProps().rowsCount).toBeGreaterThan(3);
 
         // Scroll down
         currentValue.topIndex = 2;
         hookResult.rerender({ value: currentValue });
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 120 }, { isLoading: true }, { isLoading: true },
+            ]);
+        });
 
-        expectViewToLookLike(view, [
-            { id: 120 }, { isLoading: true }, { isLoading: true },
-        ]);
         expect(view.getListProps().rowsCount).toBeGreaterThan(4);
 
-        await delay();
-
         hookResult.rerender({ value: currentValue });
-
-        expectViewToLookLike(view, [
-            { id: 120 }, { id: 121 }, { id: 122 },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 120 }, { id: 121 }, { id: 122 },
+            ]);
+        });
     });
 
     it('Checkboxes works', async () => {
@@ -273,39 +355,45 @@ describe('LazyListView', () => {
             }),
             { initialProps: { value: currentValue } },
         );
-        const view = hookResult.result.current;
 
-        view.getVisibleRows();
-        await delay();
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100 }, { id: 110, isChecked: false }, { id: 120 },
+            ]);
+        });
 
+        let view = hookResult.result.current;
         let row110 = view.getVisibleRows()[1];
-        expect(row110.id).toBe(110);
-        expect(row110.isChecked).toBe(false);
-        row110.onCheck?.(row110);
-
-        await delay();
+        await act(() => {
+            row110.onCheck?.(row110);
+        });
 
         hookResult.rerender({ value: currentValue });
-        await delay();
 
-        expectViewToLookLike(view, [
-            { id: 100, isChecked: false }, { id: 110, isChecked: true }, { id: 120, isChecked: false },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChecked: false }, { id: 110, isChecked: true }, { id: 120, isChecked: false },
+            ]);
+        });
 
         row110 = view.getVisibleRows()[1];
-        row110.onCheck?.(row110);
-        await delay();
-
+        await act(() => {
+            row110.onCheck?.(row110);
+        });
         hookResult.rerender({ value: currentValue });
-        await delay();
 
-        expectViewToLookLike(view, [
-            { id: 100, isChecked: false }, { id: 110, isChecked: false }, { id: 120, isChecked: false },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChecked: false }, { id: 110, isChecked: false }, { id: 120, isChecked: false },
+            ]);
+        });
     });
 
     it('should not update checkboxes if onValueChange is not updating them', async () => {
-        const mockOnValueChanged = jest.fn();
+        const mockOnValueChanged = jest.fn().mockImplementation();
 
         const hookResult = renderHook(
             ({ value }) => treeDataSource.useView(value, mockOnValueChanged, {
@@ -314,32 +402,42 @@ describe('LazyListView', () => {
             }),
             { initialProps: { value: currentValue } },
         );
-        const view = hookResult.result.current;
-        view.getVisibleRows();
-        await delay();
 
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChecked: false }, { id: 110, isChecked: false }, { id: 120, isChecked: false },
+            ]);
+        });
+
+        let view = hookResult.result.current;
         const row110 = view.getVisibleRows()[1];
-        expect(row110.id).toBe(110);
-        expect(row110.isChecked).toBe(false);
-        row110.onCheck?.(row110);
 
-        await delay();
-        hookResult.rerender({ value: currentValue });
-        await delay();
+        await act(() => {
+            row110.onCheck?.(row110);
+        });
+
+        expect(mockOnValueChanged).toBeCalledTimes(1);
 
-        expect(mockOnValueChanged).toBeCalledWith({ checked: [row110.id], topIndex: 0, visibleCount: 3 });
+        hookResult.rerender({ value: currentValue });
 
-        expectViewToLookLike(view, [
-            { id: 100, isChecked: false }, { id: 110, isChecked: false }, { id: 120, isChecked: false },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChecked: false }, { id: 110, isChecked: false }, { id: 120, isChecked: false },
+            ]);
+        });
 
         hookResult.rerender({ value: { ...currentValue, checked: [row110.id] } });
 
-        expect(mockOnValueChanged).toBeCalledWith({ checked: [row110.id], topIndex: 0, visibleCount: 3 });
+        expect(mockOnValueChanged).toBeCalledTimes(1);
 
-        expectViewToLookLike(view, [
-            { id: 100, isChecked: false }, { id: 110, isChecked: true }, { id: 120, isChecked: false },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChecked: false }, { id: 110, isChecked: true }, { id: 120, isChecked: false },
+            ]);
+        });
     });
 
     it('Adjust parent checkbox if children are checked', async () => {
@@ -357,26 +455,353 @@ describe('LazyListView', () => {
             { initialProps: { value: currentValue } },
         );
 
-        const view = hookResult.result.current;
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChildrenChecked: true },
+                { id: 110 },
+                { id: 120, isChildrenChecked: true },
+                { id: 121, isChecked: true },
+                { id: 122, isChecked: true },
+                { id: 200 },
+                { id: 300, isChildrenChecked: true },
+                { id: 310, isChecked: true },
+                { id: 320, isChecked: true },
+                { id: 330 },
+            ]);
+        });
+    });
 
-        view.getListProps(); // trigger loading
-        await delay();
+    it('CascadeSelection = false - Select All', async () => {
+        currentValue.visibleCount = 2; // to check that Select All works even if not all rows are loaded
+        currentValue.checked = [
+            121, 122, 310, 320,
+        ];
 
-        expectViewToLookLike(view, [
-            { id: 100, isChildrenChecked: true },
-            { id: 110 },
-            { id: 120, isChildrenChecked: true },
-            { id: 121, isChecked: true },
-            { id: 122, isChecked: true },
-            { id: 200 },
-            { id: 300, isChildrenChecked: true },
-            { id: 310, isChecked: true },
-            { id: 320, isChecked: true },
-            { id: 330 },
-        ]);
+        const hookResult = renderHook(
+            ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                cascadeSelection: false,
+                getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                isFoldedByDefault: () => false,
+            }),
+            { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+        );
+
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expect(view.getListProps().selectAll?.value).toBe(false);
+        });
+
+        let view = hookResult.result.current;
+
+        let selectAll = view.getListProps().selectAll;
+        expect(selectAll?.indeterminate).toBe(true);
+
+        await act(() => {
+            selectAll?.onValueChange(true);
+        });
+
+        currentValue.visibleCount = 10;
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.value).toBe(true);
+        });
+
+        selectAll = view.getListProps().selectAll;
+        expect(selectAll?.indeterminate).toBe(false);
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isChecked: true, isChildrenChecked: true },
+                    { id: 110, isChecked: true },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: true },
+                    { id: 300, isChecked: true, isChildrenChecked: true },
+                    { id: 310, isChecked: true },
+                    { id: 320, isChecked: true },
+                    { id: 330, isChecked: true },
+                ],
+            );
+        });
+
+        expect(view.getListProps().rowsCount).toBe(10);
+        selectAll = view.getListProps().selectAll;
+        expect(selectAll?.indeterminate).toBe(false);
+        await act(() => {
+            selectAll?.onValueChange(false);
+        });
+
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+        await waitFor(() => {
+            view = hookResult.result.current;
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.value).toBe(false);
+        });
+
+        selectAll = view.getListProps().selectAll;
+        expect(selectAll?.indeterminate).toBe(false);
+        await waitFor(() => {
+            view = hookResult.result.current;
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isChecked: false, isChildrenChecked: false },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: false, isChildrenChecked: false },
+                    { id: 121, isChecked: false },
+                    { id: 122, isChecked: false },
+                    { id: 200, isChecked: false },
+                    { id: 300, isChecked: false, isChildrenChecked: false },
+                    { id: 310, isChecked: false },
+                    { id: 320, isChecked: false },
+                    { id: 330, isChecked: false },
+                ],
+            );
+        });
+
+        expect(view.getListProps().rowsCount).toBe(10);
+    });
+
+    describe('CascadeSelection - false', () => {
+        const initialValue: DataSourceState = { topIndex: 0, visibleCount: 5 };
+        let updatedValue = { ...initialValue };
+        const onValueChangeFn = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                updatedValue = newValue(updatedValue);
+                return;
+            }
+            updatedValue = newValue;
+        };
+
+        beforeEach(() => {
+            updatedValue = { ...initialValue };
+        });
+
+        function expectRows(
+            view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+            rows: Partial<DataRowProps<LocationItem, string>>[],
+        ) {
+            const viewRows = view.getVisibleRows();
+            expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+        }
+
+        it('should clear specific unknown record', async () => {
+            const unknownId = '-10000';
+            updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+            const { dataSource: locationsDS } = getLazyLocationsDS({
+                cascadeSelection: false,
+                showSelectedOnly: true,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: updatedValue,
+                    onValueChange: onValueChangeFn,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'BJ', isChecked: true },
+                    ],
+                );
+            });
+            const view = hookResult.result.current;
+            const unknownRow = view.getById(unknownId, -1000);
+
+            expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+            await act(() => {
+                unknownRow.onCheck?.(unknownRow);
+            });
+
+            hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+            expect(updatedValue.checked).toEqual(['BJ']);
+        });
+
+        it('should clear unknown record via clearAll', async () => {
+            const unknownId = '-10000';
+            updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+            const { dataSource: locationsDS } = getLazyLocationsDS({
+                cascadeSelection: false,
+                showSelectedOnly: true,
+                rowOptions: {
+                    checkbox: {
+                        isVisible: true,
+                        isDisabled: false,
+                    },
+                },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: updatedValue,
+                    onValueChange: onValueChangeFn,
+                    props: {},
+                } },
+            );
+
+            expect(updatedValue.checked).toEqual([unknownId, 'BJ']);
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'BJ', isChecked: true },
+                    ],
+                );
+            });
+            const view = hookResult.result.current;
+            const unknownRow = view.getById(unknownId, -1000);
+
+            expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+            await act(() => {
+                view.clearAllChecked();
+            });
+
+            hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+            await waitFor(() => {
+                expect(updatedValue.checked).toEqual([]);
+            });
+        });
     });
 
     describe('CascadeSelection - explicit mode', () => {
+        const initialValue: DataSourceState = { topIndex: 0, visibleCount: 5 };
+        let updatedValue = { ...initialValue };
+        const onValueChangeFn = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                updatedValue = newValue(updatedValue);
+                return;
+            }
+            updatedValue = newValue;
+        };
+
+        beforeEach(() => {
+            updatedValue = { ...initialValue };
+        });
+
+        function expectRows(
+            view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+            rows: Partial<DataRowProps<LocationItem, string>>[],
+        ) {
+            const viewRows = view.getVisibleRows();
+            expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+        }
+
+        it('should clear specific unknown record', async () => {
+            const unknownId = '-10000';
+            updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+            const { dataSource: locationsDS } = getLazyLocationsDS({
+                cascadeSelection: true,
+                showSelectedOnly: true,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: updatedValue,
+                    onValueChange: onValueChangeFn,
+                    props: {},
+                } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'BJ', isChecked: true },
+                    ],
+                );
+            });
+            const view = hookResult.result.current;
+            const unknownRow = view.getById(unknownId, -1000);
+
+            expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+            await act(() => {
+                unknownRow.onCheck?.(unknownRow);
+            });
+
+            hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+            expect(updatedValue.checked).toEqual(['BJ']);
+        });
+
+        it('should clear unknown record via clearAll', async () => {
+            const unknownId = '-10000';
+            updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+            const { dataSource: locationsDS } = getLazyLocationsDS({
+                cascadeSelection: true,
+                showSelectedOnly: true,
+                rowOptions: {
+                    checkbox: {
+                        isVisible: true,
+                        isDisabled: false,
+                    },
+                },
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: updatedValue,
+                    onValueChange: onValueChangeFn,
+                    props: {},
+                } },
+            );
+
+            expect(updatedValue.checked).toEqual([unknownId, 'BJ']);
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'BJ', isChecked: true },
+                    ],
+                );
+            });
+            const view = hookResult.result.current;
+            const unknownRow = view.getById(unknownId, -1000);
+
+            expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
+
+            await act(() => {
+                view.clearAllChecked();
+            });
+
+            hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+            await waitFor(() => {
+                expect(updatedValue.checked).toEqual([]);
+            });
+        });
+
         it('Cascade selection works', async () => {
             currentValue.visibleCount = 6;
             const hookResult = renderHook(
@@ -388,45 +813,56 @@ describe('LazyListView', () => {
                 { initialProps: { value: currentValue } },
             );
 
-            const view = hookResult.result.current;
-
-            view.getListProps(); // trigger loading
-            await delay();
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100 }, //  0   100
+                    { id: 110, parentId: 100 }, //  1   110
+                    { id: 120, parentId: 100, isChecked: false }, //  2     120
+                    { id: 121, parentId: 120 }, //  3       121
+                    { id: 122, parentId: 120 }, //  4       122
+                    { id: 200 }, //  5   200
+                ]);
+            });
 
+            let view = hookResult.result.current;
             let row120 = view.getVisibleRows()[2];
-            expect(row120.id).toBe(120);
-            expect(row120.isChecked).toBe(false);
-            row120.onCheck?.(row120);
 
-            await delay();
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
 
             hookResult.rerender({ value: currentValue });
-            await delay();
 
-            expectViewToLookLike(view, [
-                { id: 100, isChecked: false, isChildrenChecked: true },
-                { id: 110, isChecked: false },
-                { id: 120, isChecked: true, isChildrenChecked: true },
-                { id: 121, isChecked: true },
-                { id: 122, isChecked: true },
-                { id: 200, isChecked: false },
-            ]);
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: true },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: false },
+                ]);
+            });
 
             row120 = view.getVisibleRows()[2];
-            row120.onCheck?.(row120);
-            await delay();
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
 
             hookResult.rerender({ value: currentValue });
-            await delay();
-
-            expectViewToLookLike(view, [
-                { id: 100, isChecked: false, isChildrenChecked: false },
-                { id: 110, isChecked: false },
-                { id: 120, isChecked: false, isChildrenChecked: false },
-                { id: 121, isChecked: false },
-                { id: 122, isChecked: false },
-                { id: 200, isChecked: false },
-            ]);
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: false },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: false, isChildrenChecked: false },
+                    { id: 121, isChecked: false },
+                    { id: 122, isChecked: false },
+                    { id: 200, isChecked: false },
+                ]);
+            });
         });
 
         it('Cascade selection - handles quick (simultaneous) clicks', async () => {
@@ -441,39 +877,57 @@ describe('LazyListView', () => {
                 { initialProps: { value: currentValue, onValueChange: onValueChanged } },
             );
 
-            let view = hookResult.result.current;
-
-            view.getListProps(); // trigger loading
-            await delay();
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100 }, //  0   100
+                    { id: 110, parentId: 100 }, //  1   110
+                    { id: 120, parentId: 100, isChecked: false }, //  2     120
+                    { id: 121, parentId: 120 }, //  3       121
+                    { id: 122, parentId: 120 }, //  4       122
+                    { id: 200 }, //  5   200
+                    { id: 300 }, //  6   300
+                    { id: 310, parentId: 300 }, //  7     310
+                    { id: 320, parentId: 300 }, //  8     320
+                    { id: 330, parentId: 300 }, //  9     330
+                ]);
+            });
 
+            let view = hookResult.result.current;
             const row120 = view.getVisibleRows()[2];
-            expect(row120.id).toBe(120);
-            row120.onCheck?.(row120);
 
-            await delay();
-            view = hookResult.result.current;
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
+
             hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
 
+            view = hookResult.result.current;
             const row300 = view.getVisibleRows()[6];
             expect(row300.id).toBe(300);
-            row300.onCheck?.(row300);
 
-            await delay();
+            await act(() => {
+                row300.onCheck?.(row300);
+            });
+
             hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-            view = hookResult.result.current;
 
-            expectViewToLookLike(view, [
-                { id: 100, isChecked: false, isChildrenChecked: true },
-                { id: 110, isChecked: false },
-                { id: 120, isChecked: true, isChildrenChecked: true },
-                { id: 121, isChecked: true },
-                { id: 122, isChecked: true },
-                { id: 200, isChecked: false },
-                { id: 300, isChecked: true, isChildrenChecked: true },
-                { id: 310, isChecked: true },
-                { id: 320, isChecked: true },
-                { id: 330, isChecked: true },
-            ]);
+            await waitFor(() => {
+                view = hookResult.result.current;
+
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: true },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: false },
+                    { id: 300, isChecked: true, isChildrenChecked: true },
+                    { id: 310, isChecked: true },
+                    { id: 320, isChecked: true },
+                    { id: 330, isChecked: true },
+                ]);
+            });
         });
 
         it('Select All', async () => {
@@ -483,81 +937,215 @@ describe('LazyListView', () => {
             ];
 
             const hookResult = renderHook(
-                ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
-                    cascadeSelection: true,
-                    getRowOptions: () => ({ checkbox: { isVisible: true } }),
-                    isFoldedByDefault: () => false,
-                }),
-                { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+                ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
+                    cascadeSelection: true,
+                    getRowOptions: () => ({ checkbox: { isVisible: true } }),
+                    isFoldedByDefault: () => false,
+                }),
+                { initialProps: { value: currentValue, onValueChange: onValueChanged } },
+            );
+
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expect(view.getListProps().selectAll?.value).toBe(false);
+            });
+
+            let view = hookResult.result.current;
+
+            let selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(true);
+
+            await act(() => {
+                selectAll?.onValueChange(true);
+            });
+
+            currentValue.visibleCount = 10;
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(true);
+            });
+
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(false);
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 100, isChecked: true, isChildrenChecked: true },
+                        { id: 110, isChecked: true },
+                        { id: 120, isChecked: true, isChildrenChecked: true },
+                        { id: 121, isChecked: true },
+                        { id: 122, isChecked: true },
+                        { id: 200, isChecked: true },
+                        { id: 300, isChecked: true, isChildrenChecked: true },
+                        { id: 310, isChecked: true },
+                        { id: 320, isChecked: true },
+                        { id: 330, isChecked: true },
+                    ],
+                );
+            });
+
+            expect(view.getListProps().rowsCount).toBe(10);
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(false);
+            await act(() => {
+                selectAll?.onValueChange(false);
+            });
+
+            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(false);
+            });
+
+            selectAll = view.getListProps().selectAll;
+            expect(selectAll?.indeterminate).toBe(false);
+            await waitFor(() => {
+                view = hookResult.result.current;
+
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 100, isChecked: false, isChildrenChecked: false },
+                        { id: 110, isChecked: false },
+                        { id: 120, isChecked: false, isChildrenChecked: false },
+                        { id: 121, isChecked: false },
+                        { id: 122, isChecked: false },
+                        { id: 200, isChecked: false },
+                        { id: 300, isChecked: false, isChildrenChecked: false },
+                        { id: 310, isChecked: false },
+                        { id: 320, isChecked: false },
+                        { id: 330, isChecked: false },
+                    ],
+                );
+            });
+
+            expect(view.getListProps().rowsCount).toBe(10);
+        });
+    });
+
+    describe('CascadeSelection - implicit mode', () => {
+        const initialValue: DataSourceState = { topIndex: 0, visibleCount: 5 };
+        let updatedValue = { ...initialValue };
+        const onValueChangeFn = (newValue: React.SetStateAction<DataSourceState<Record<string, any>, any>>) => {
+            if (typeof newValue === 'function') {
+                updatedValue = newValue(updatedValue);
+                return;
+            }
+            updatedValue = newValue;
+        };
+
+        beforeEach(() => {
+            updatedValue = { ...initialValue };
+        });
+
+        function expectRows(
+            view: IDataSourceView<LocationItem, string, DataQueryFilter<LocationItem>>,
+            rows: Partial<DataRowProps<LocationItem, string>>[],
+        ) {
+            const viewRows = view.getVisibleRows();
+            expect(viewRows).toEqual(rows.map((r) => expect.objectContaining(r)));
+        }
+
+        it('should clear specific unknown record', async () => {
+            const unknownId = '-10000';
+            updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+            const { dataSource: locationsDS } = getLazyLocationsDS({
+                cascadeSelection: 'implicit',
+                showSelectedOnly: true,
+            });
+
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: updatedValue,
+                    onValueChange: onValueChangeFn,
+                    props: {},
+                } },
             );
 
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'BJ', isChecked: true },
+                    ],
+                );
+            });
             const view = hookResult.result.current;
+            const unknownRow = view.getById(unknownId, -1000);
 
-            view.getListProps(); // trigger loading
-            await delay();
+            expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
 
-            let selectAll = view.getListProps().selectAll;
-            expect(selectAll?.value).toBe(false);
-            expect(selectAll?.indeterminate).toBe(true);
+            await act(() => {
+                unknownRow.onCheck?.(unknownRow);
+            });
 
-            selectAll?.onValueChange(true);
-            await delay();
+            hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
 
-            currentValue.visibleCount = 10;
-            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-            await delay();
+            expect(updatedValue.checked).toEqual(['BJ']);
+        });
 
-            selectAll = view.getListProps().selectAll;
-            expect(selectAll?.value).toBe(true);
-            expect(selectAll?.indeterminate).toBe(false);
-            await delay();
+        it('should clear unknown record via clearAll', async () => {
+            const unknownId = '-10000';
+            updatedValue = { ...updatedValue, checked: [unknownId, 'BJ'] };
+
+            const { dataSource: locationsDS } = getLazyLocationsDS({
+                cascadeSelection: 'implicit',
+                showSelectedOnly: true,
+                rowOptions: {
+                    checkbox: {
+                        isVisible: true,
+                        isDisabled: false,
+                    },
+                },
+            });
 
-            expectViewToLookLike(
-                view,
-                [
-                    { id: 100, isChecked: true, isChildrenChecked: true },
-                    { id: 110, isChecked: true },
-                    { id: 120, isChecked: true, isChildrenChecked: true },
-                    { id: 121, isChecked: true },
-                    { id: 122, isChecked: true },
-                    { id: 200, isChecked: true },
-                    { id: 300, isChecked: true, isChildrenChecked: true },
-                    { id: 310, isChecked: true },
-                    { id: 320, isChecked: true },
-                    { id: 330, isChecked: true },
-                ],
-                10,
+            const hookResult = renderHook(
+                ({ value, onValueChange, props }) => locationsDS.useView(value, onValueChange, props),
+                { initialProps: {
+                    value: updatedValue,
+                    onValueChange: onValueChangeFn,
+                    props: {},
+                } },
             );
 
-            selectAll?.onValueChange(false);
-            await delay();
+            expect(updatedValue.checked).toEqual([unknownId, 'BJ']);
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectRows(
+                    view,
+                    [
+                        { id: 'BJ', isChecked: true },
+                    ],
+                );
+            });
+            const view = hookResult.result.current;
+            const unknownRow = view.getById(unknownId, -1000);
 
-            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-            await delay();
+            expect(unknownRow).toEqual(expect.objectContaining({ id: unknownId, isUnknown: true, value: undefined, isChecked: true }));
 
-            selectAll = view.getListProps().selectAll;
-            expect(selectAll?.value).toBe(false);
-            expect(selectAll?.indeterminate).toBe(false);
-            expectViewToLookLike(
-                view,
-                [
-                    { id: 100, isChecked: false, isChildrenChecked: false },
-                    { id: 110, isChecked: false },
-                    { id: 120, isChecked: false, isChildrenChecked: false },
-                    { id: 121, isChecked: false },
-                    { id: 122, isChecked: false },
-                    { id: 200, isChecked: false },
-                    { id: 300, isChecked: false, isChildrenChecked: false },
-                    { id: 310, isChecked: false },
-                    { id: 320, isChecked: false },
-                    { id: 330, isChecked: false },
-                ],
-                10,
-            );
+            await act(() => {
+                view.clearAllChecked();
+            });
+
+            hookResult.rerender({ value: updatedValue, onValueChange: onValueChangeFn, props: {} });
+
+            await waitFor(() => {
+                expect(updatedValue.checked).toEqual([]);
+            });
         });
-    });
 
-    describe('CascadeSelection - implicit mode', () => {
         it('Cascade selection works', async () => {
             currentValue.visibleCount = 6;
             const hookResult = renderHook(
@@ -569,47 +1157,63 @@ describe('LazyListView', () => {
                 { initialProps: { value: currentValue, onValueChange: onValueChanged } },
             );
 
-            const view = hookResult.result.current;
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100 }, //  0   100
+                    { id: 110, parentId: 100 }, //  1   110
+                    { id: 120, parentId: 100, isChecked: false }, //  2     120
+                    { id: 121, parentId: 120 }, //  3       121
+                    { id: 122, parentId: 120 }, //  4       122
+                    { id: 200 }, //  5   200
+                ]);
+            });
 
-            view.getListProps(); // trigger loading
-            await delay();
+            let view = hookResult.result.current;
 
             let row120 = view.getVisibleRows()[2];
             expect(row120.id).toBe(120);
             expect(row120.isChecked).toBe(false);
-            row120.onCheck?.(row120);
 
-            await delay();
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
+            expect(currentValue.checked).toEqual([120]);
 
             hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-            await delay();
 
-            expectViewToLookLike(view, [
-                { id: 100, isChecked: false, isChildrenChecked: true },
-                { id: 110, isChecked: false },
-                { id: 120, isChecked: true, isChildrenChecked: true },
-                { id: 121, isChecked: true },
-                { id: 122, isChecked: true },
-                { id: 200, isChecked: false },
-            ]);
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: true },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: false },
+                ]);
+            });
 
             expect(currentValue.checked).toEqual([120]);
 
             row120 = view.getVisibleRows()[2];
-            row120.onCheck?.(row120);
-            await delay();
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
 
             hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-            await delay();
 
-            expectViewToLookLike(view, [
-                { id: 100, isChecked: false, isChildrenChecked: false },
-                { id: 110, isChecked: false },
-                { id: 120, isChecked: false, isChildrenChecked: false },
-                { id: 121, isChecked: false },
-                { id: 122, isChecked: false },
-                { id: 200, isChecked: false },
-            ]);
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: false },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: false, isChildrenChecked: false },
+                    { id: 121, isChecked: false },
+                    { id: 122, isChecked: false },
+                    { id: 200, isChecked: false },
+                ]);
+            });
 
             expect(currentValue.checked).toEqual([]);
         });
@@ -626,38 +1230,56 @@ describe('LazyListView', () => {
                 { initialProps: { value: currentValue, onValueChange: onValueChanged } },
             );
 
-            const view = hookResult.result.current;
-
-            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-            view.getListProps(); // trigger loading
-            await delay();
-
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100 }, //  0   100
+                    { id: 110, parentId: 100 }, //  1   110
+                    { id: 120, parentId: 100, isChecked: false }, //  2     120
+                    { id: 121, parentId: 120 }, //  3       121
+                    { id: 122, parentId: 120 }, //  4       122
+                    { id: 200 }, //  5   200
+                    { id: 300 }, //  6   300
+                    { id: 310, parentId: 300 }, //  7     310
+                    { id: 320, parentId: 300 }, //  8     320
+                    { id: 330, parentId: 300 }, //  9     330
+                ]);
+            });
+            let view = hookResult.result.current;
             const row120 = view.getVisibleRows()[2];
             expect(row120.id).toBe(120);
-            row120.onCheck?.(row120);
 
-            await delay();
+            await act(() => {
+                row120.onCheck?.(row120);
+            });
+
             hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
 
+            view = hookResult.result.current;
             const row300 = view.getVisibleRows()[6];
             expect(row300.id).toBe(300);
-            row300.onCheck?.(row300);
 
-            await delay();
+            await act(() => {
+                row300.onCheck?.(row300);
+            });
+
             hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
 
-            expectViewToLookLike(view, [
-                { id: 100, isChecked: false, isChildrenChecked: true },
-                { id: 110, isChecked: false },
-                { id: 120, isChecked: true, isChildrenChecked: true },
-                { id: 121, isChecked: true },
-                { id: 122, isChecked: true },
-                { id: 200, isChecked: false },
-                { id: 300, isChecked: true, isChildrenChecked: true },
-                { id: 310, isChecked: true },
-                { id: 320, isChecked: true },
-                { id: 330, isChecked: true },
-            ]);
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(view, [
+                    { id: 100, isChecked: false, isChildrenChecked: true },
+                    { id: 110, isChecked: false },
+                    { id: 120, isChecked: true, isChildrenChecked: true },
+                    { id: 121, isChecked: true },
+                    { id: 122, isChecked: true },
+                    { id: 200, isChecked: false },
+                    { id: 300, isChecked: true, isChildrenChecked: true },
+                    { id: 310, isChecked: true },
+                    { id: 320, isChecked: true },
+                    { id: 330, isChecked: true },
+                ]);
+            });
 
             expect(currentValue.checked).toEqual([120, 300]);
         });
@@ -676,73 +1298,94 @@ describe('LazyListView', () => {
                 { initialProps: { value: currentValue, onValueChange: onValueChanged } },
             );
 
-            const view = hookResult.result.current;
-
-            view.getListProps(); // trigger loading
-            await delay();
+            await waitFor(() => {
+                const view = hookResult.result.current;
+                const selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(false);
+            });
 
+            let view = hookResult.result.current;
             let selectAll = view.getListProps().selectAll;
-            expect(selectAll?.value).toBe(false);
             expect(selectAll?.indeterminate).toBe(true);
 
-            selectAll?.onValueChange(true);
-            await delay();
+            await act(() => {
+                selectAll?.onValueChange(true);
+            });
 
             currentValue.visibleCount = 10;
             hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-            await delay();
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(true);
+            });
 
             selectAll = view.getListProps().selectAll;
-            expect(selectAll?.value).toBe(true);
             expect(selectAll?.indeterminate).toBe(false);
-            await delay();
-
-            expectViewToLookLike(
-                view,
-                [
-                    { id: 100, isChecked: true, isChildrenChecked: true },
-                    { id: 110, isChecked: true },
-                    { id: 120, isChecked: true, isChildrenChecked: true },
-                    { id: 121, isChecked: true },
-                    { id: 122, isChecked: true },
-                    { id: 200, isChecked: true },
-                    { id: 300, isChecked: true, isChildrenChecked: true },
-                    { id: 310, isChecked: true },
-                    { id: 320, isChecked: true },
-                    { id: 330, isChecked: true },
-                ],
-                10,
-            );
+            await waitFor(() => {
+                view = hookResult.result.current;
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 100, isChecked: true, isChildrenChecked: true },
+                        { id: 110, isChecked: true },
+                        { id: 120, isChecked: true, isChildrenChecked: true },
+                        { id: 121, isChecked: true },
+                        { id: 122, isChecked: true },
+                        { id: 200, isChecked: true },
+                        { id: 300, isChecked: true, isChildrenChecked: true },
+                        { id: 310, isChecked: true },
+                        { id: 320, isChecked: true },
+                        { id: 330, isChecked: true },
+                    ],
+                );
+            });
+
+            expect(view.getListProps().rowsCount).toBe(10);
 
             expect(currentValue.checked).toEqual([
                 100, 200, 300,
             ]);
-            selectAll?.onValueChange(false);
-            await delay();
 
-            hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-            await delay();
+            view = hookResult.result.current;
+            selectAll = view.getListProps().selectAll;
+            await act(() => {
+                selectAll?.onValueChange(false);
+            });
 
             hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                selectAll = view.getListProps().selectAll;
+                expect(selectAll?.value).toBe(false);
+            });
+
             selectAll = view.getListProps().selectAll;
-            expect(selectAll?.value).toBe(false);
             expect(selectAll?.indeterminate).toBe(false);
-            expectViewToLookLike(
-                view,
-                [
-                    { id: 100, isChecked: false, isChildrenChecked: false },
-                    { id: 110, isChecked: false },
-                    { id: 120, isChecked: false, isChildrenChecked: false },
-                    { id: 121, isChecked: false },
-                    { id: 122, isChecked: false },
-                    { id: 200, isChecked: false },
-                    { id: 300, isChecked: false, isChildrenChecked: false },
-                    { id: 310, isChecked: false },
-                    { id: 320, isChecked: false },
-                    { id: 330, isChecked: false },
-                ],
-                10,
-            );
+
+            await waitFor(() => {
+                view = hookResult.result.current;
+                // console.log(view.getVisibleRows());
+                expectViewToLookLike(
+                    view,
+                    [
+                        { id: 100, isChecked: false, isChildrenChecked: false },
+                        { id: 110, isChecked: false },
+                        { id: 120, isChecked: false, isChildrenChecked: false },
+                        { id: 121, isChecked: false },
+                        { id: 122, isChecked: false },
+                        { id: 200, isChecked: false },
+                        { id: 300, isChecked: false, isChildrenChecked: false },
+                        { id: 310, isChecked: false },
+                        { id: 320, isChecked: false },
+                        { id: 330, isChecked: false },
+                    ],
+                );
+            });
+
+            expect(view.getListProps().rowsCount).toBe(10);
         });
     });
 
@@ -758,32 +1401,44 @@ describe('LazyListView', () => {
             { initialProps: { value: currentValue, onValueChange: onValueChanged } },
         );
 
-        const view = hookResult.result.current;
-
-        view.getListProps(); // trigger loading
-        await delay();
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isFocused: false }, { id: 110, isFocused: false }, { id: 120, isFocused: false },
+                ],
+            );
+        });
 
-        expectViewToLookLike(view, [
-            { id: 100, isFocused: false }, { id: 110, isFocused: false }, { id: 120, isFocused: false },
-        ]);
+        let view = hookResult.result.current;
 
         currentValue.focusedIndex = 0;
 
         hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-        await delay();
 
-        expectViewToLookLike(view, [
-            { id: 100, isFocused: true }, { id: 110, isFocused: false }, { id: 120, isFocused: false },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isFocused: true }, { id: 110, isFocused: false }, { id: 120, isFocused: false },
+                ],
+            );
+        });
 
         currentValue.focusedIndex = 2;
 
         hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-        await delay();
-
-        expectViewToLookLike(view, [
-            { id: 100, isFocused: false }, { id: 110, isFocused: false }, { id: 120, isFocused: true },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, isFocused: false }, { id: 110, isFocused: false }, { id: 120, isFocused: true },
+                ],
+            );
+        });
     });
 
     it('Correctly computes path and isLastChild', async () => {
@@ -799,67 +1454,84 @@ describe('LazyListView', () => {
             { initialProps: { value: currentValue, onValueChange: onValueChanged } },
         );
 
-        const view = hookResult.result.current;
-
-        view.getListProps(); // trigger loading
-
-        await delay();
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, path: [], isLastChild: false },
+                    { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
+                    { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
+                    { id: 200, path: [], isLastChild: false },
+                    { id: 300, path: [], isLastChild: true },
+                    { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
+                ],
+            );
+        });
 
         currentValue.folded = { 120: false };
         hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-        view.getListProps(); // trigger loading
-
-        expectViewToLookLike(
-            view,
-            [
-                { id: 100, path: [], isLastChild: false },
-                { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
-                { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
-                {
-                    isLoading: true,
-                    path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
-                    isLastChild: false,
-                },
-                {
-                    isLoading: true,
-                    path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
-                    isLastChild: true,
-                },
-                { id: 200, path: [], isLastChild: false },
-                { id: 300, path: [], isLastChild: true },
-                { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
-                { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
-                { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
-            ],
-            10,
-        );
 
-        await delay();
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, path: [], isLastChild: false },
+                    { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
+                    { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
+                    {
+                        isLoading: true,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: false,
+                    },
+                    {
+                        isLoading: true,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: true,
+                    },
+                    { id: 200, path: [], isLastChild: false },
+                    { id: 300, path: [], isLastChild: true },
+                    { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
+                ],
+            );
+        });
+
+        let view = hookResult.result.current;
+        expect(view.getListProps().rowsCount).toBe(10);
 
-        expectViewToLookLike(
-            view,
-            [
-                { id: 100, path: [], isLastChild: false },
-                { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
-                { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
-                {
-                    id: 121,
-                    path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
-                    isLastChild: false,
-                },
-                {
-                    id: 122,
-                    path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
-                    isLastChild: true,
-                },
-                { id: 200, path: [], isLastChild: false },
-                { id: 300, path: [], isLastChild: true },
-                { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
-                { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
-                { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
-            ],
-            10,
-        );
+        await waitFor(() => {
+            view = hookResult.result.current;
+
+            expectViewToLookLike(
+                view,
+                [
+                    { id: 100, path: [], isLastChild: false },
+                    { id: 110, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: false },
+                    { id: 120, path: [{ id: 100, isLastChild: false, value: testDataById[100] }], isLastChild: true },
+                    {
+                        id: 121,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: false,
+                    },
+                    {
+                        id: 122,
+                        path: [{ id: 100, isLastChild: false, value: testDataById[100] }, { id: 120, isLastChild: true, value: testDataById[120] }],
+                        isLastChild: true,
+                    },
+                    { id: 200, path: [], isLastChild: false },
+                    { id: 300, path: [], isLastChild: true },
+                    { id: 310, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 320, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: false },
+                    { id: 330, path: [{ id: 300, isLastChild: true, value: testDataById[300] }], isLastChild: true },
+                ],
+            );
+        });
+        expect(view.getListProps().rowsCount).toBe(10);
     });
 
     it('Correctly fold inner children in hierarchy', async () => {
@@ -913,30 +1585,39 @@ describe('LazyListView', () => {
             }),
             { initialProps: { value: currentValue, onValueChange: onValueChanged } },
         );
+        await waitFor(() => {
+            const view = hookResult.result.current;
+            const viewRows = view.getVisibleRows();
+
+            const expectedRows = [
+                { id: 100, isFolded: false },
+                { id: 110, isFolded: false, parentId: 100 }, // we add a lot of row here, to prevent loading some rows on initial load
+                { id: 111, isFolded: false, parentId: 110 },
+                { id: 112, isFolded: false, parentId: 110 },
+                { id: 113, isFolded: false, parentId: 110 },
+            ];
 
-        const view = hookResult.result.current;
-
-        view.getListProps(); // trigger loading
-        await delay();
+            expect(viewRows).toEqual(expectedRows.map((r) => expect.objectContaining(r)));
+        });
 
+        let view = hookResult.result.current;
         // fold row #100
         let rows = view.getVisibleRows();
-        rows[0].onFold?.(rows[0]);
 
-        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-        rows = view.getVisibleRows();
-
-        expect(rows).toEqual([
-            { id: 100 }, { id: 200 }, { id: 300 }, { id: 400 }, { id: 500 },
-        ].map((r) => expect.objectContaining(r)));
+        await act(() => {
+            rows[0].onFold?.(rows[0]);
+        });
 
-        await delay();
+        hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
 
-        rows = view.getVisibleRows();
+        await waitFor(() => {
+            view = hookResult.result.current;
+            rows = view.getVisibleRows();
 
-        expect(rows).toEqual([
-            { id: 100 }, { id: 200 }, { id: 300 }, { id: 400 }, { id: 500 },
-        ].map((r) => expect.objectContaining(r)));
+            expect(rows).toEqual([
+                { id: 100 }, { id: 200 }, { id: 300 }, { id: 400 }, { id: 500 },
+            ].map((r) => expect.objectContaining(r)));
+        });
     });
 
     it('should check/uncheck parents if all/no siblings checked', async () => {
@@ -951,76 +1632,75 @@ describe('LazyListView', () => {
             { initialProps: { value: currentValue, onValueChange: onValueChanged } },
         );
 
-        const view = hookResult.result.current;
+        await waitFor(() => {
+            const view = hookResult.result.current;
 
-        view.getVisibleRows();
-        await delay();
+            expectViewToLookLike(view, [
+                { id: 100, isChildrenChecked: false, isFolded: false },
+                { id: 110, isChildrenChecked: false, isFolded: false },
+                { id: 120, isFolded: false },
+                { id: 121, isFolded: false },
+                { id: 122, isFolded: false },
+                { id: 200, isFolded: false },
+                { id: 300, isFolded: false },
+                { id: 310, isFolded: false },
+                { id: 320, isFolded: false },
+                { id: 330, isFolded: false },
+            ]);
+        });
 
+        let view = hookResult.result.current;
         let row121 = view.getVisibleRows()[3];
-        row121.onCheck?.(row121);
-        await delay();
+
+        await act(() => {
+            row121.onCheck?.(row121);
+        });
 
         hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
+        view = hookResult.result.current;
         const row122 = view.getVisibleRows()[4];
-        row122.onCheck?.(row122);
-        await delay();
+        await act(() => {
+            row122.onCheck?.(row122);
+        });
 
         hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-        expectViewToLookLike(view, [
-            { id: 100, isChildrenChecked: true },
-            { id: 110 },
-            { id: 120, isChecked: true, isChildrenChecked: true },
-            { id: 121, isChecked: true },
-            { id: 122, isChecked: true },
-            { id: 200 },
-            { id: 300, isChildrenChecked: false },
-            { id: 310, isChecked: false },
-            { id: 320, isChecked: false },
-            { id: 330 },
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChildrenChecked: true },
+                { id: 110 },
+                { id: 120, isChecked: true, isChildrenChecked: true },
+                { id: 121, isChecked: true },
+                { id: 122, isChecked: true },
+                { id: 200 },
+                { id: 300, isChildrenChecked: false },
+                { id: 310, isChecked: false },
+                { id: 320, isChecked: false },
+                { id: 330 },
+            ]);
+        });
 
+        view = hookResult.result.current;
         row121 = view.getVisibleRows()[3];
-        row121.onCheck?.(row121);
-        await delay();
+        await act(() => {
+            row121.onCheck?.(row121);
+        });
 
         hookResult.rerender({ value: currentValue, onValueChange: onValueChanged });
-        expectViewToLookLike(view, [
-            { id: 100, isChildrenChecked: true },
-            { id: 110 },
-            { id: 120, isChecked: false, isChildrenChecked: true },
-            { id: 121, isChecked: false },
-            { id: 122, isChecked: true },
-            { id: 200 },
-            { id: 300, isChildrenChecked: false },
-            { id: 310, isChecked: false },
-            { id: 320, isChecked: false },
-            { id: 330 },
-        ]);
-    });
-
-    it('should return selected rows in selection order', async () => {
-        const hookResult = renderHook(
-            ({ value, onValueChange }) => treeDataSource.useView(value, onValueChange, {
-                getRowOptions: () => ({ checkbox: { isVisible: true } }),
-                isFoldedByDefault: () => false,
-                cascadeSelection: true,
-            }),
-            {
-                initialProps: {
-                    value: { ...currentValue, checked: [320, 310, 121, 122] },
-                    onValueChange: onValueChanged,
-                },
-            },
-        );
-
-        const view = hookResult.result.current;
-
-        view.getListProps(); // trigger loading
-        await delay();
-
-        const selectedRows = view.getSelectedRows();
-        expect(selectedRows.map(({ id }) => id)).toEqual([
-            320, 310, 121, 122,
-        ]);
+        await waitFor(() => {
+            view = hookResult.result.current;
+            expectViewToLookLike(view, [
+                { id: 100, isChildrenChecked: true },
+                { id: 110 },
+                { id: 120, isChecked: false, isChildrenChecked: true },
+                { id: 121, isChecked: false },
+                { id: 122, isChecked: true },
+                { id: 200 },
+                { id: 300, isChildrenChecked: false },
+                { id: 310, isChecked: false },
+                { id: 320, isChecked: false },
+                { id: 330 },
+            ]);
+        });
     });
 });
diff --git a/uui-core/src/data/processing/views/__tests__/Tree.load.test.ts b/uui-core/src/data/processing/views/__tests__/Tree.load.test.ts
deleted file mode 100644
index b20a093ea2..0000000000
--- a/uui-core/src/data/processing/views/__tests__/Tree.load.test.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { DataSourceState, LazyDataSourceApi, DataQueryFilter } from '../../../../types';
-import { runDataQuery } from '../../../querying/runDataQuery';
-import { ITree, LoadTreeOptions, Tree, TreeNodeInfo } from '../tree';
-
-interface TestItem {
-    id: number;
-    parentId?: number;
-    childrenCount?: number;
-}
-
-const testData: TestItem[] = [
-    { id: 100 }, //  0   100
-    { id: 110, parentId: 100 }, //  1   110
-    { id: 120, parentId: 100 }, //  2     120
-    { id: 121, parentId: 120 }, //  3       121
-    { id: 122, parentId: 120 }, //  4       122
-    { id: 200 }, //  5   200
-    { id: 300 }, //  6   300
-    { id: 310, parentId: 300 }, //  7     310
-    { id: 320, parentId: 300 }, //  8     320
-    { id: 330, parentId: 300 }, //  9     330
-];
-
-const testDataById: Record<number, TestItem> = {};
-
-testData.forEach((i) => {
-    i.childrenCount = testData.filter((x) => x.parentId === i.id).length;
-    testDataById[i.id] = i;
-});
-
-const blankTree = Tree.blank<TestItem, number>({
-    getId: (i) => i.id,
-    getParentId: (i) => i.parentId,
-});
-
-describe('Tree - load', () => {
-    const itemsById = (Object as any).fromEntries(testData.map((i) => [i.id, i]));
-
-    const testApiFn: LazyDataSourceApi<TestItem, number, DataQueryFilter<TestItem>> = (rq, ctx) => {
-        rq.filter = rq.filter || {};
-        if (rq.ids) {
-            rq.filter.id = { in: rq.ids };
-        }
-        rq.filter.parentId = ctx?.parent ? ctx.parent.id : undefined;
-        const result = runDataQuery(testData, rq);
-        return Promise.resolve(result);
-    };
-
-    const testApi = jest.fn(testApiFn);
-
-    const loadParams: LoadTreeOptions<TestItem, number, DataQueryFilter<TestItem>> = {
-        api: testApi,
-        getChildCount: (i) => i.childrenCount ?? 0,
-        isFolded: () => true,
-    };
-
-    const value: DataSourceState = { topIndex: 0, visibleCount: 100 };
-
-    beforeEach(() => {
-        testApi.mockClear();
-    });
-
-    function expectTreeToLookLike(
-        actual: ITree<TestItem, number>,
-        expectedById: Record<any, TestItem>,
-        expectedByParentId: Record<any, number[]>,
-        expectedNodeInfos: Record<any, TreeNodeInfo>,
-    ) {
-        expect(Object.fromEntries(actual['byId'])).toEqual(expectedById);
-        expect(Object.fromEntries(actual['byParentId'])).toEqual(expectedByParentId);
-        expect(Object.fromEntries(actual['nodeInfoById'])).toEqual(expectedNodeInfos);
-    }
-
-    it('Can load items (folded)', async () => {
-        const tree = await blankTree.load(loadParams, value);
-        expectTreeToLookLike(
-            tree,
-            {
-                100: itemsById[100],
-                200: itemsById[200],
-                300: itemsById[300],
-            },
-            {
-                undefined: [
-                    100, 200, 300,
-                ],
-            },
-            {
-                undefined: { count: 3 },
-            },
-        );
-
-        // expect(tree.getTotalRecursiveCount()).toBe(undefined);
-    });
-
-    it('Can load items (unfolded)', async () => {
-        const tree = await blankTree.load({ ...loadParams, isFolded: () => false }, value);
-        expectTreeToLookLike(
-            tree,
-            testDataById,
-            {
-                undefined: [
-                    100, 200, 300,
-                ],
-                100: [110, 120],
-                120: [121, 122],
-                300: [
-                    310, 320, 330,
-                ],
-            },
-            {
-                undefined: { count: 3 },
-                100: { count: 2 },
-                120: { count: 2 },
-                300: { count: 3 },
-            },
-        );
-        expect(tree.getTotalRecursiveCount()).toBe(10);
-
-        const tree2 = await tree.load(loadParams, value);
-
-        expect(tree2).toEqual(tree);
-        expect(tree2).toBe(tree); // everything is loaded, should return exact same instance
-    });
-
-    it('should load to cache items from selection and their parents', async () => {
-        const tree = await blankTree.load(loadParams, { ...value, checked: [121, 200] });
-
-        expectTreeToLookLike(
-            tree,
-            {
-                100: itemsById[100],
-                120: itemsById[120],
-                121: itemsById[121],
-                200: itemsById[200],
-                300: itemsById[300],
-            },
-            {
-                undefined: [
-                    100, 200, 300,
-                ],
-            },
-            {
-                undefined: { count: 3 },
-            },
-        );
-    });
-});
diff --git a/uui-core/src/data/processing/views/__tests__/Tree.patch.test.ts b/uui-core/src/data/processing/views/__tests__/Tree.patch.test.ts
deleted file mode 100644
index 8fecf5728c..0000000000
--- a/uui-core/src/data/processing/views/__tests__/Tree.patch.test.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-import { DataSourceState, LazyDataSourceApi, DataQueryFilter } from '../../../../types';
-import { runDataQuery } from '../../../querying/runDataQuery';
-import { ITree, LoadTreeOptions, Tree } from '../tree';
-
-interface TestItem {
-    id: number;
-    parentId?: number;
-    name?: string;
-    childrenCount?: number;
-    isDeleted?: boolean;
-}
-
-const testData: TestItem[] = [
-    { id: 100, name: 'name 1' }, //  0   100
-    { id: 110, parentId: 100, name: 'name 2' }, //  1   110
-    { id: 120, parentId: 100, name: 'name 3' }, //  2     120
-    { id: 121, parentId: 120, name: 'name 4' }, //  3       121
-    { id: 122, parentId: 120, name: 'name 5' }, //  4       122
-    { id: 200, name: 'name 6' }, //  5   200
-    { id: 300, name: 'name 7' }, //  6   300
-    { id: 310, parentId: 300, name: 'name 10' }, //  7     310
-    { id: 320, parentId: 300, name: 'name 11' }, //  8     320
-    { id: 330, parentId: 300, name: 'name 12' }, //  9     330
-    { id: 340, parentId: 300, name: 'name 13' }, //  9     330
-    { id: 350, parentId: 300, name: 'name 14' }, //  9     330
-];
-
-const testDataById: Record<number, TestItem> = {};
-
-testData.forEach((i) => {
-    i.childrenCount = testData.filter((x) => x.parentId === i.id).length;
-    testDataById[i.id] = i;
-});
-
-const blankTree = Tree.blank<TestItem, number>({
-    getId: (i) => i.id,
-    getParentId: (i) => i.parentId,
-});
-
-describe('Tree - patch', () => {
-    const testApiFn: LazyDataSourceApi<TestItem, number, DataQueryFilter<TestItem>> = (rq, ctx) => {
-        rq.filter = rq.filter || {};
-        if (rq.ids) {
-            rq.filter.id = { in: rq.ids };
-        }
-        rq.filter.parentId = ctx?.parent ? ctx.parent.id : undefined;
-        const result = runDataQuery(testData, rq);
-        return Promise.resolve(result);
-    };
-
-    const testApi = jest.fn(testApiFn);
-    const loadParams: LoadTreeOptions<TestItem, number, DataQueryFilter<TestItem>> = {
-        api: testApi,
-        getChildCount: (i) => i.childrenCount ?? 0,
-        isFolded: () => true,
-    };
-
-    const value: DataSourceState = { topIndex: 0, visibleCount: 100 };
-    let tree: ITree<TestItem, number>;
-
-    beforeEach(async () => {
-        tree = await blankTree.load({ ...loadParams, isFolded: () => false }, value);
-    });
-
-    it('should delete items from the top level', () => {
-        const patchedTree = tree.patch([{ id: 300, isDeleted: true }], 'isDeleted');
-        expect(patchedTree['byId'].has(300)).toBeFalsy();
-        expect(patchedTree['byParentId'].has(300)).toBeFalsy();
-        expect(patchedTree === tree).toBeFalsy();
-    });
-
-    it('should delete items from the nested layer', () => {
-        const patchedTree = tree.patch([{ id: 320, parentId: 300, isDeleted: true }], 'isDeleted');
-        expect(patchedTree['byId'].has(320)).toBeFalsy();
-        expect(patchedTree['byParentId'].has(320)).toBeFalsy();
-        expect(patchedTree['byParentId'].get(300)).toEqual([
-            310, 330, 340, 350,
-        ]);
-        expect(patchedTree === tree).toBeFalsy();
-    });
-
-    it('should update items at the top level', () => {
-        const patchedItem = { id: 300, name: 'new name' };
-        const patchedTree = tree.patch([patchedItem], 'isDeleted');
-        expect(patchedTree['byId'].has(300)).toBeTruthy();
-        expect(patchedTree['byParentId'].has(300)).toBeTruthy();
-        expect(patchedTree === tree).toBeFalsy();
-        expect(patchedTree['byId'].get(300)).toEqual(patchedItem);
-    });
-
-    it('should update items at the nested layer', () => {
-        const patchedItem = { id: 320, parentId: 300, name: 'new name' };
-        const patchedTree = tree.patch([patchedItem], 'isDeleted');
-        expect(patchedTree['byId'].has(320)).toBeTruthy();
-        expect(patchedTree['byParentId'].has(300)).toBeTruthy();
-        expect(patchedTree['byParentId'].get(300)).toEqual([
-            310, 320, 330, 340, 350,
-        ]);
-        expect(patchedTree === tree).toBeFalsy();
-        expect(patchedTree['byId'].get(320)).toEqual(patchedItem);
-    });
-
-    it('should move item to the other parent', () => {
-        const patchedItem = { id: 320, parentId: 200, name: 'new name' };
-        const patchedTree = tree.patch([patchedItem], 'isDeleted');
-        expect(patchedTree['byId'].has(320)).toBeTruthy();
-        expect(patchedTree['byParentId'].has(200)).toBeTruthy();
-        expect(patchedTree['byParentId'].get(200)).toEqual([320]);
-        expect(patchedTree['byParentId'].get(300)).toEqual([
-            310, 330, 340, 350,
-        ]);
-        expect(patchedTree === tree).toBeFalsy();
-        expect(patchedTree['byId'].get(320)).toEqual(patchedItem);
-    });
-
-    it('should put item to the beginning of the list if comparator returns -1', () => {
-        const patchedItem = { id: 320, parentId: 100, name: 'new name' };
-        const patchedTree = tree.patch([patchedItem], 'isDeleted', () => -1);
-        expect(patchedTree['byId'].has(320)).toBeTruthy();
-        expect(patchedTree['byParentId'].has(100)).toBeTruthy();
-        expect(patchedTree['byParentId'].get(100)).toEqual([
-            320, 110, 120,
-        ]);
-        expect(patchedTree['byParentId'].get(300)).toEqual([
-            310, 330, 340, 350,
-        ]);
-        expect(patchedTree === tree).toBeFalsy();
-        expect(patchedTree['byId'].get(320)).toEqual(patchedItem);
-    });
-
-    it('should put items in the right order if comparator returns -1', () => {
-        const patchedItem1 = { id: 130, parentId: 100, name: 'new name' };
-        const patchedItem2 = { id: 140, parentId: 100, name: 'new name 1' };
-        const patchedTree = tree.patch([patchedItem1, patchedItem2], 'isDeleted', () => -1);
-
-        expect(patchedTree['byId'].has(130)).toBeTruthy();
-        expect(patchedTree['byId'].has(140)).toBeTruthy();
-        expect(patchedTree['byParentId'].has(100)).toBeTruthy();
-        expect(patchedTree['byParentId'].get(100)).toEqual([
-            140, 130, 110, 120,
-        ]);
-        expect(patchedTree === tree).toBeFalsy();
-        expect(patchedTree['byId'].get(130)).toEqual(patchedItem1);
-        expect(patchedTree['byId'].get(140)).toEqual(patchedItem2);
-    });
-
-    it('should put items in the right order if comparator returns 1', () => {
-        const patchedItem1 = { id: 130, parentId: 100, name: 'new name' };
-        const patchedItem2 = { id: 140, parentId: 100, name: 'new name 1' };
-        const patchedTree = tree.patch([patchedItem1, patchedItem2], 'isDeleted', () => 1);
-
-        expect(patchedTree['byId'].has(130)).toBeTruthy();
-        expect(patchedTree['byId'].has(140)).toBeTruthy();
-        expect(patchedTree['byParentId'].has(100)).toBeTruthy();
-        expect(patchedTree['byParentId'].get(100)).toEqual([
-            110, 120, 130, 140,
-        ]);
-        expect(patchedTree === tree).toBeFalsy();
-        expect(patchedTree['byId'].get(130)).toEqual(patchedItem1);
-        expect(patchedTree['byId'].get(140)).toEqual(patchedItem2);
-    });
-
-    it('should move item to the other parent into exact place', () => {
-        const patchedItem = { id: 320, parentId: 100, name: 'new name' };
-        const patchedTree = tree.patch([patchedItem], 'isDeleted', (_, { id: existingId }) => (existingId < 120 ? 1 : -1));
-        expect(patchedTree['byId'].has(320)).toBeTruthy();
-        expect(patchedTree['byParentId'].has(100)).toBeTruthy();
-        expect(patchedTree['byParentId'].get(100)).toEqual([
-            110, 320, 120,
-        ]);
-        expect(patchedTree['byParentId'].get(300)).toEqual([
-            310, 330, 340, 350,
-        ]);
-        expect(patchedTree === tree).toBeFalsy();
-        expect(patchedTree['byId'].get(320)).toEqual(patchedItem);
-    });
-
-    it('should add item to the top level', () => {
-        const newItem = { id: 400, name: 'some new item' };
-        const patchedTree = tree.patch([newItem], 'isDeleted');
-        expect(patchedTree['byId'].has(400)).toBeTruthy();
-        expect(patchedTree === tree).toBeFalsy();
-        expect(patchedTree['byId'].get(400)).toEqual(newItem);
-    });
-
-    it('should add item into exact place', () => {
-        const newItem = { id: 335, name: 'some new item', parentId: 300 };
-        const patchedTree = tree.patch([newItem], 'isDeleted', ({ id }, { id: existingId }) => (id > existingId ? 1 : -1));
-        expect(patchedTree['byId'].has(335)).toBeTruthy();
-        expect(patchedTree === tree).toBeFalsy();
-        expect(patchedTree['byId'].get(335)).toEqual(newItem);
-        expect(patchedTree['byParentId'].get(300)).toEqual([
-            310, 320, 330, 335, 340, 350,
-        ]);
-    });
-
-    it('should add, update and delete items during patch', () => {
-        const deletedItem = { id: 350, parentId: 300, isDeleted: true };
-        const updatedItem = { id: 310, parentId: 300, name: 'new name' };
-        const newItem = { id: 335, name: 'some new item', parentId: 300 };
-        const patchedTree = tree.patch([
-            deletedItem, updatedItem, newItem,
-        ], 'isDeleted', ({ id }, { id: existingId }) => (id > existingId ? 1 : -1));
-        expect(patchedTree['byId'].has(deletedItem.id)).toBeFalsy();
-        expect(patchedTree['byId'].has(updatedItem.id)).toBeTruthy();
-        expect(patchedTree['byId'].has(newItem.id)).toBeTruthy();
-
-        expect(patchedTree['byId'].get(updatedItem.id)).toEqual(updatedItem);
-        expect(patchedTree['byId'].get(newItem.id)).toEqual(newItem);
-        expect(patchedTree === tree).toBeFalsy();
-
-        expect(patchedTree['byParentId'].get(newItem.parentId)).toEqual([
-            310, 320, 330, 335, 340,
-        ]);
-    });
-
-    it('should not update tree if items were not updated', () => {
-        const updatedItem = testData[1];
-        const patchedTree = tree.patch([updatedItem]);
-        expect(patchedTree['byId'].has(updatedItem.id)).toBeTruthy();
-        expect(patchedTree['byId'].get(updatedItem.id)).toEqual(updatedItem);
-        expect(patchedTree === tree).toBeTruthy();
-
-        expect(patchedTree['byParentId'].get(updatedItem.parentId)).toEqual([110, 120]);
-
-        const updatedItem2 = testData[2];
-        const patchedTree2 = tree.patch([updatedItem2], 'isDeleted', ({ id }, { id: existingId }) => (id > existingId ? 1 : -1));
-        expect(patchedTree2['byId'].has(updatedItem2.id)).toBeTruthy();
-        expect(patchedTree2['byId'].get(updatedItem2.id)).toEqual(updatedItem2);
-        expect(patchedTree2 === tree).toBeTruthy();
-
-        expect(patchedTree2['byParentId'].get(updatedItem.parentId)).toEqual([110, 120]);
-    });
-});
diff --git a/uui-core/src/data/processing/views/__tests__/Tree.test.ts b/uui-core/src/data/processing/views/__tests__/Tree.test.ts
deleted file mode 100644
index 03a37477e3..0000000000
--- a/uui-core/src/data/processing/views/__tests__/Tree.test.ts
+++ /dev/null
@@ -1,396 +0,0 @@
-import { SortingOption } from '../../../../types';
-import { Tree } from '../tree';
-
-interface TestItem {
-    id: number;
-    parentId?: number;
-    name?: string;
-    value?: number;
-}
-
-const testData: TestItem[] = [
-    { id: 100, value: 3, name: 'item1' }, //  0   100
-    {
-        id: 110, parentId: 100, value: 1, name: 'item10',
-    }, //  1   110
-    {
-        id: 120, parentId: 100, value: 2, name: 'item11',
-    }, //  2     120
-    {
-        id: 121, parentId: 120, value: 3, name: 'item12',
-    }, //  3       121
-    {
-        id: 122, parentId: 120, value: 4, name: 'item13',
-    }, //  4       122
-    { id: 200, value: 5, name: 'item2' }, //  5   200
-    { id: 300, value: 1, name: 'item3' }, //  6   300
-    {
-        id: 310, parentId: 300, value: 3, name: 'item30',
-    }, //  7     310
-    {
-        id: 320, parentId: 300, value: 2, name: 'item31',
-    }, //  8     320
-    {
-        id: 330, parentId: 300, value: 1, name: 'item32',
-    }, //  9     330
-];
-
-const blankTree = Tree.blank<TestItem, number>({ getId: (i) => i.id, getParentId: (i) => i.parentId });
-
-const testTree = blankTree.patch(testData);
-
-// const treeWithValues = testTree.
-
-describe('Tree', () => {
-    describe('basic queries', () => {
-        it('getById', () => {
-            expect(testTree.getById(100)).toBe(testData[0]);
-        });
-
-        it('getChildrenByParentId', () => {
-            const nodes = testTree.getChildrenByParentId(100);
-            expect(nodes).toEqual([testTree.getById(110), testTree.getById(120)]);
-        });
-
-        it('getRootItems', () => {
-            const parents = testTree.getRootItems();
-            const parentIds = parents.map((item) => item.id);
-            expect(parentIds).toEqual([
-                100, 200, 300,
-            ]);
-        });
-
-        it('getParentIdsRecursive', () => {
-            const parentIds = testTree.getParentIdsRecursive(122);
-            expect(parentIds).toEqual([100, 120]);
-        });
-
-        it('getParents', () => {
-            const parents = testTree.getParents(122);
-            expect(parents).toEqual([
-                { id: 100, value: 3, name: 'item1' }, {
-                    id: 120, parentId: 100, value: 2, name: 'item11',
-                },
-            ]);
-        });
-
-        it('getPathById', () => {
-            const path = testTree.getPathById(122);
-            expect(path).toEqual([
-                {
-                    id: 100,
-                    isLastChild: false,
-                    value: { id: 100, value: 3, name: 'item1' },
-                }, {
-                    id: 120,
-                    isLastChild: true,
-                    value: {
-                        id: 120, parentId: 100, value: 2, name: 'item11',
-                    },
-                },
-            ]);
-        });
-
-        it('getPathItem', () => {
-            const pathItem = testTree.getPathItem(testData[4]);
-            expect(pathItem).toEqual({
-                id: 122,
-                isLastChild: true,
-                value: {
-                    id: 122, parentId: 120, value: 4, name: 'item13',
-                },
-            });
-        });
-    });
-
-    describe('append', () => {
-        it('can append new root item by id', () => {
-            const newTree = testTree.patch([{ id: 400 }]);
-            expect(newTree.getById(400)).toEqual({ id: 400 });
-            expect(newTree.getRootItems().map((n) => n.id)).toEqual([
-                100, 200, 300, 400,
-            ]);
-        });
-
-        it('can append new child item by id', () => {
-            const newTree = testTree.patch([{ id: 130, parentId: 100 }]);
-            expect(newTree.getById(130)).toEqual({ id: 130, parentId: 100 });
-            expect(newTree.getChildrenByParentId(100).map((n) => n.id)).toEqual([
-                110, 120, 130,
-            ]);
-        });
-    });
-
-    describe('forEach', () => {
-        const testForeach = (tree: typeof blankTree, options: Parameters<typeof blankTree.forEach>[1], resultIds: number[]) => {
-            const visited: { item: TestItem; id: number; parentId: number }[] = [];
-            tree.forEach((item, id, parentId) => {
-                visited.push({ item, id, parentId });
-            }, options);
-            const reference = resultIds.map((id) => tree.getById(id)).map((item) => {
-                const record = item as TestItem;
-                return { id: record?.id, item, parentId: record?.parentId };
-            });
-            expect(visited).toEqual(reference);
-        };
-
-        it('can iterate empty tree', () => {
-            testForeach(blankTree, {}, []);
-        });
-
-        it('can iterate top-down a node', () => {
-            testForeach(testTree, { parentId: 100 }, [
-                100, 110, 120, 121, 122,
-            ]);
-        });
-
-        it('can iterate top-down a node (exclude parent)', () => {
-            testForeach(testTree, { parentId: 100, includeParent: false }, [
-                110, 120, 121, 122,
-            ]);
-        });
-
-        it('can iterate bottom-up a node', () => {
-            testForeach(testTree, { parentId: 100, direction: 'bottom-up' }, [
-                110, 121, 122, 120, 100,
-            ]);
-        });
-
-        it('can iterate bottom-up a node (exclude parent)', () => {
-            testForeach(testTree, { parentId: 100, direction: 'bottom-up', includeParent: false }, [
-                110, 121, 122, 120,
-            ]);
-        });
-
-        it('can iterate top-down whole tree', () => {
-            testForeach(testTree, undefined, [
-                100, 110, 120, 121, 122, 200, 300, 310, 320, 330,
-            ]);
-        });
-
-        it('can iterate bottom-up whole tree', () => {
-            testForeach(testTree, { direction: 'bottom-up' }, [
-                110, 121, 122, 120, 100, 200, 310, 320, 330, 300,
-            ]);
-        });
-    });
-
-    describe('computeSubtotals', () => {
-        it('can calculate child counts', () => {
-            const subtotals = testTree.computeSubtotals(
-                () => 1,
-                (a, b) => a + b,
-            );
-            expect(subtotals.get(100)).toBe(5);
-            expect(subtotals.get(120)).toBe(3);
-            expect(subtotals.get(121)).toBe(1);
-            expect(subtotals.get(200)).toBe(1);
-            expect(subtotals.get(300)).toBe(4);
-            expect(subtotals.get(undefined)).toBe(10);
-        });
-
-        it('can sum values', () => {
-            const subtotals = testTree.computeSubtotals(
-                (item) => item.value || 0,
-                (a, b) => a + b,
-            );
-            expect(subtotals.get(100)).toBe(13);
-            expect(subtotals.get(120)).toBe(9);
-            expect(subtotals.get(121)).toBe(3);
-            expect(subtotals.get(200)).toBe(5);
-            expect(subtotals.get(300)).toBe(7);
-            expect(subtotals.get(undefined)).toBe(25);
-        });
-
-        it('can sum values (children only)', () => {
-            const subtotals = testTree.computeSubtotals(
-                (item, hasChildren) => (hasChildren ? 0 : item.value || 0),
-                (a, b) => a + b,
-            );
-            expect(subtotals.get(100)).toBe(8);
-            expect(subtotals.get(120)).toBe(7);
-            expect(subtotals.get(121)).toBe(3);
-            expect(subtotals.get(200)).toBe(5);
-            expect(subtotals.get(300)).toBe(6);
-            expect(subtotals.get(undefined)).toBe(19);
-        });
-    });
-
-    describe('cascadeSelection', () => {
-        describe('cascade = false', () => {
-            it('can select single', () => {
-                const selection = testTree.cascadeSelection([100], 200, true, { cascade: false }).sort();
-                expect(selection).toEqual([100, 200]);
-            });
-
-            it('can un-select single', () => {
-                const selection = testTree.cascadeSelection([100], 200, false, { cascade: false }).sort();
-                expect(selection).toEqual([100]);
-            });
-        });
-
-        describe("cascade = true or cascade = 'explicit'", () => {
-            it('can select single', () => {
-                const selection = testTree.cascadeSelection([200], 100, true).sort();
-                expect(selection).toEqual([
-                    100, 110, 120, 121, 122, 200,
-                ]);
-            });
-
-            it('can un-select single (cascade = true)', () => {
-                const selection = testTree.cascadeSelection([
-                    100, 110, 120, 121, 200,
-                ], 100, false).sort();
-                expect(selection).toEqual([200]);
-            });
-
-            it("can un-select single (cascade = 'explicit')", () => {
-                const selection = testTree.cascadeSelection([
-                    100, 110, 120, 121, 200,
-                ], 100, false, { cascade: 'explicit' }).sort();
-                expect(selection).toEqual([200]);
-            });
-
-            it('selects parents when all children are checked (cascade = true)', () => {
-                const selection = testTree.cascadeSelection([
-                    100, 110, 121, 200,
-                ], 122, true).sort();
-                expect(selection).toEqual([
-                    100, 110, 120, 121, 122, 200,
-                ]);
-            });
-
-            it("selects parents when all children are checked (cascade = 'explicit')", () => {
-                const selection = testTree.cascadeSelection([
-                    100, 110, 121, 200,
-                ], 122, true, { cascade: 'explicit' }).sort();
-                expect(selection).toEqual([
-                    100, 110, 120, 121, 122, 200,
-                ]);
-            });
-
-            it('unselects parents when any children is unchecked (cascade = true)', () => {
-                const selection = testTree.cascadeSelection([
-                    100, 110, 120, 121, 122, 200,
-                ], 121, false).sort();
-                expect(selection).toEqual([
-                    110, 122, 200,
-                ]);
-            });
-
-            it("unselects parents when any children is unchecked (cascade = 'explicit')", () => {
-                const selection = testTree.cascadeSelection([
-                    100, 110, 120, 121, 122, 200,
-                ], 121, false, { cascade: 'explicit' }).sort();
-                expect(selection).toEqual([
-                    110, 122, 200,
-                ]);
-            });
-
-            it('can unselect all (cascade = true)', () => {
-                const selection = testTree.cascadeSelection([
-                    100, 110, 120, 122, 200,
-                ], undefined, false).sort();
-                expect(selection).toEqual([]);
-            });
-
-            it("can unselect all (cascade = 'explicit')", () => {
-                const selection = testTree.cascadeSelection([
-                    100, 110, 120, 122, 200,
-                ], undefined, false, { cascade: 'explicit' }).sort();
-                expect(selection).toEqual([]);
-            });
-
-            it('can select all (cascade = true)', () => {
-                const selection = testTree.cascadeSelection([200], undefined, true, { cascade: true }).sort();
-                const allTestTreeIds = testData.map((i) => i.id).sort();
-                expect(selection).toEqual(allTestTreeIds);
-            });
-
-            it("can select all (cascade = 'explicit')", () => {
-                const selection = testTree.cascadeSelection([100], undefined, true, { cascade: 'explicit' }).sort();
-                const allTestTreeIds = testData.map((i) => i.id).sort();
-                expect(selection).toEqual(allTestTreeIds);
-            });
-        });
-
-        describe("cascade = 'implicit'", () => {
-            it('can select single', () => {
-                const selection = testTree.cascadeSelection([200], 100, true, { cascade: 'implicit' }).sort();
-                expect(selection).toEqual([100, 200]);
-            });
-
-            it('can un-select single', () => {
-                const selection = testTree.cascadeSelection([100, 200], 100, false, { cascade: 'implicit' }).sort();
-                expect(selection).toEqual([200]);
-            });
-
-            it('can unselect child of selected parent', () => {
-                const selection = testTree.cascadeSelection([100], 122, false, { cascade: 'implicit' }).sort();
-                expect(selection).toEqual([110, 121]);
-            });
-
-            it('can collapse explicitly selected children if parent was selected', () => {
-                const selection = testTree.cascadeSelection([122], 100, true, { cascade: 'implicit' }).sort();
-                expect(selection).toEqual([100]);
-            });
-
-            it('can collapse children to one parent, if all children were selected explicitly', () => {
-                const selection = testTree.cascadeSelection([121], 122, true, { cascade: 'implicit' }).sort();
-                expect(selection).toEqual([120]);
-            });
-        });
-    });
-
-    describe('sort', () => {
-        it('should return sorted tree', () => {
-            const sortedTree = testTree.sort({ sorting: [{ field: 'value', direction: 'asc' }] });
-            expect(sortedTree.getRootIds()).toEqual([
-                300, 100, 200,
-            ]);
-            expect(sortedTree.getChildrenByParentId(100).map((n) => n.id)).toEqual([110, 120]);
-            expect(sortedTree.getChildrenByParentId(120).map((n) => n.id)).toEqual([121, 122]);
-            expect(sortedTree.getChildrenByParentId(300).map((n) => n.id)).toEqual([
-                330, 320, 310,
-            ]);
-        });
-
-        it('should return sorted tree by sortBy function', () => {
-            const sortBy = (i: TestItem, sorting: SortingOption) => i[sorting.field as keyof TestItem] || '';
-
-            const sortedTree = testTree.sort({ sorting: [{ field: 'value', direction: 'asc' }], sortBy });
-            expect(sortedTree.getRootIds()).toEqual([
-                300, 100, 200,
-            ]);
-            expect(sortedTree.getChildrenByParentId(100).map((n) => n.id)).toEqual([110, 120]);
-            expect(sortedTree.getChildrenByParentId(120).map((n) => n.id)).toEqual([121, 122]);
-            expect(sortedTree.getChildrenByParentId(300).map((n) => n.id)).toEqual([
-                330, 320, 310,
-            ]);
-        });
-    });
-
-    describe('search', () => {
-        it('should return sorted tree', () => {
-            const searchTree = testTree.search({ search: 'item3', getSearchFields: ({ name }) => [name!] });
-
-            expect(searchTree.getRootIds()).toEqual([300]);
-            expect(searchTree.getChildrenByParentId(300).map((n) => n.id)).toEqual([
-                310, 320, 330,
-            ]);
-        });
-    });
-
-    describe('filter', () => {
-        it('should return filtered tree', () => {
-            const searchTree = testTree.filter({
-                filter: ({ value }: TestItem) => value! > 3,
-                getFilter: (filter) => (item) => filter(item),
-            });
-
-            expect(searchTree.getRootIds()).toEqual([100, 200]);
-            expect(searchTree.getChildrenByParentId(100).map((n) => n.id)).toEqual([120]);
-            expect(searchTree.getChildrenByParentId(120).map((n) => n.id)).toEqual([122]);
-        });
-    });
-});
diff --git a/uui-core/src/data/processing/views/dataRows/exposed.ts b/uui-core/src/data/processing/views/dataRows/exposed.ts
new file mode 100644
index 0000000000..8cb35095f3
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/exposed.ts
@@ -0,0 +1,5 @@
+export { useCascadeSelectionService, useFoldingService } from './services';
+export { useDataRows } from './useDataRows';
+
+export type { UseDataRowsProps } from './useDataRows';
+export type { UseCascadeSelectionServiceProps, CascadeSelectionService, UseFoldingServiceProps } from './services';
diff --git a/uui-core/src/data/processing/views/dataRows/index.ts b/uui-core/src/data/processing/views/dataRows/index.ts
new file mode 100644
index 0000000000..57061758fd
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/index.ts
@@ -0,0 +1 @@
+export * from './exposed';
diff --git a/uui-core/src/data/processing/views/dataRows/services/buildParentsLookup.ts b/uui-core/src/data/processing/views/dataRows/services/buildParentsLookup.ts
new file mode 100644
index 0000000000..ae9735e78b
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/services/buildParentsLookup.ts
@@ -0,0 +1,33 @@
+import { ITree, NOT_FOUND_RECORD, Tree } from '../../tree';
+
+export const idToKey = <TId>(id: TId) => typeof id === 'object' ? JSON.stringify(id) : `${id}`;
+
+export const buildParentsLookup = <TItem, TId>(ids: TId[], tree: ITree<TItem, TId>, getParentId?: (item: TItem) => TId) => {
+    const idsByKey: Record<string, boolean> = {};
+    const someChildInIdsByKey: Record<string, boolean> = {};
+    const checkedItems = ids ?? [];
+    for (let i = checkedItems.length - 1; i >= 0; i--) {
+        const id = checkedItems[i];
+        idsByKey[idToKey(id)] = true;
+        if (!tree || !getParentId) {
+            continue;
+        }
+
+        const item = tree.getById(id);
+        if (item === NOT_FOUND_RECORD) {
+            continue;
+        }
+
+        const parentId = getParentId(item);
+        if (!someChildInIdsByKey[idToKey(parentId)]) {
+            const parents = Tree.getParents(id, tree).reverse();
+            for (const parent of parents) {
+                if (someChildInIdsByKey[idToKey(parent)]) {
+                    break;
+                }
+                someChildInIdsByKey[idToKey(parent)] = true;
+            }
+        }
+    }
+    return { idsByKey, someChildInIdsByKey };
+};
diff --git a/uui-core/src/data/processing/views/dataRows/services/index.ts b/uui-core/src/data/processing/views/dataRows/services/index.ts
new file mode 100644
index 0000000000..8a5a841b5a
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/services/index.ts
@@ -0,0 +1,11 @@
+export { useCheckingService } from './useCheckingService';
+export { useFoldingService } from './useFoldingService';
+export { useFocusService } from './useFocusService';
+export { useSelectingService } from './useSelectingService';
+export { useCascadeSelectionService } from './useCascadeSelectionService';
+
+export type { UseCheckingServiceProps, CheckingService } from './useCheckingService';
+export type { UseFoldingServiceProps, FoldingService } from './useFoldingService';
+export type { UseFocusServiceProps, FocusService } from './useFocusService';
+export type { UseSelectingServiceProps, SelectingService } from './useSelectingService';
+export type { UseCascadeSelectionServiceProps, CascadeSelectionService } from './useCascadeSelectionService';
diff --git a/uui-core/src/data/processing/views/dataRows/services/useCascadeSelectionService.ts b/uui-core/src/data/processing/views/dataRows/services/useCascadeSelectionService.ts
new file mode 100644
index 0000000000..43e314d3a1
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/services/useCascadeSelectionService.ts
@@ -0,0 +1,106 @@
+import { useCallback } from 'react';
+import { ITree } from '../../tree';
+import { CommonTreeConfig, GetItemStatus, LoadMissingRecords } from '../../tree/hooks/strategies/types';
+import { FAILED_RECORD, NOT_FOUND_RECORD } from '../../tree';
+import { isInProgress } from '../../helpers';
+import { CheckingHelper } from '../../tree/treeStructure';
+
+/**
+ * Cascade selection service configuration.
+ */
+export interface UseCascadeSelectionServiceProps<TItem, TId, TFilter = any> extends
+    Pick<
+    CommonTreeConfig<TItem, TId, TFilter>,
+    | 'rowOptions' | 'getRowOptions' | 'cascadeSelection'
+    >,
+    LoadMissingRecords<TItem, TId>,
+    GetItemStatus<TId> {
+    /**
+     * Tree-like data, cascade selection should be performed on.
+     */
+    tree: ITree<TItem, TId>;
+}
+
+/**
+ * A service which provides cascade selection functionality with loading missing records.
+ */
+export interface CascadeSelectionService<TId> {
+    /**
+     * Provides a cascade selection functionality.
+     * @param isChecked - checking state of the item.
+     * @param checkedId - ID of the item to be checked. If `undefined` - root is checked.
+     * @param isRoot - marks if cascade selection should be performed on all the items.
+     * @param checked - current state of checked items.
+     * @returns new checked items.
+     */
+    handleCascadeSelection: (isChecked: boolean, checkedId?: TId, isRoot?: boolean, checked?: TId[]) => Promise<TId[]>;
+}
+
+/**
+ * Service, which provides cascade selection functionality with support of loading missing records as needed.
+ * @returns cascade selection service.
+ */
+export function useCascadeSelectionService<TItem, TId>({
+    tree,
+    cascadeSelection,
+    getRowOptions,
+    rowOptions,
+    getItemStatus,
+    loadMissingRecordsOnCheck = async () => tree,
+}: UseCascadeSelectionServiceProps<TItem, TId>): CascadeSelectionService<TId> {
+    const getRowProps = useCallback((item: TItem) => {
+        const externalRowOptions = getRowOptions ? getRowOptions(item) : {};
+        return { ...rowOptions, ...externalRowOptions };
+    }, [rowOptions, getRowOptions]);
+
+    const isItemCheckable = useCallback((id: TId, item: TItem | typeof NOT_FOUND_RECORD) => {
+        if (item === NOT_FOUND_RECORD) {
+            if (!getItemStatus) {
+                return true;
+            }
+
+            const status = getItemStatus(id);
+            if (isInProgress(status)) {
+                return false;
+            }
+
+            if (status === FAILED_RECORD || status === NOT_FOUND_RECORD) {
+                return true;
+            }
+
+            return false;
+        }
+
+        const rowProps = getRowProps(item);
+        return rowProps?.checkbox?.isVisible && !rowProps?.checkbox?.isDisabled;
+    }, [getRowProps, getItemStatus]);
+
+    const isItemUnknown = useCallback((id: TId) => {
+        const item = tree.getById(id);
+        if (item !== NOT_FOUND_RECORD) {
+            return false;
+        }
+        if (!getItemStatus) {
+            return true;
+        }
+
+        const status = getItemStatus(id);
+        return status === FAILED_RECORD || status === NOT_FOUND_RECORD;
+    }, [tree, getItemStatus]);
+
+    const handleCascadeSelection = useCallback(async (isChecked: boolean, checkedId?: TId, isRoot?: boolean, checked: TId[] = []) => {
+        const completedTree = await loadMissingRecordsOnCheck(checkedId, isChecked, isRoot);
+
+        return CheckingHelper.cascadeSelection<TItem, TId>({
+            tree: completedTree,
+            currentCheckedIds: checked,
+            checkedId,
+            isChecked,
+            cascadeSelectionType: cascadeSelection,
+            isCheckable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => isItemCheckable(id, item),
+            isUnknown: isItemUnknown,
+        });
+    }, [tree, isItemCheckable, isItemUnknown, cascadeSelection]);
+
+    return { handleCascadeSelection };
+}
diff --git a/uui-core/src/data/processing/views/dataRows/services/useCheckingService.ts b/uui-core/src/data/processing/views/dataRows/services/useCheckingService.ts
new file mode 100644
index 0000000000..0163a52209
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/services/useCheckingService.ts
@@ -0,0 +1,197 @@
+import { useCallback, useMemo } from 'react';
+import { CascadeSelectionTypes, DataRowProps } from '../../../../../types';
+import { ITree, NOT_FOUND_RECORD } from '../../tree';
+import { CommonTreeConfig, GetItemStatus } from '../../tree/hooks/strategies/types';
+import { CascadeSelectionService } from './useCascadeSelectionService';
+import { FAILED_RECORD } from '../../tree';
+import { isInProgress } from '../../helpers';
+import { buildParentsLookup, idToKey } from './buildParentsLookup';
+import { CheckingHelper } from '../../tree/treeStructure';
+
+/**
+ * Checking service configuration.
+ */
+export interface UseCheckingServiceProps<TItem, TId, TFilter = any> extends
+    Pick<
+    CommonTreeConfig<TItem, TId, TFilter>,
+    'getParentId' | 'dataSourceState' | 'setDataSourceState'
+    | 'rowOptions' | 'getRowOptions' | 'cascadeSelection'
+    >,
+    CascadeSelectionService<TId>,
+    GetItemStatus<TId> {
+    /**
+     * Tree-like data, selection should be performed on.
+     */
+    tree: ITree<TItem, TId>;
+}
+
+/**
+ * Service, which provides checking functionality and checking/parially checking info.
+ */
+export interface CheckingService<TItem, TId> {
+    /**
+     * Provides knowledge about checked state of the row.
+     * @param row - row, which checked state info should be returned.
+     * @returns if row is checked.
+     */
+    isRowChecked: (row: DataRowProps<TItem, TId>) => boolean;
+
+    /**
+     * Provides knowledge about children checked state of the row.
+     * @param row - row, which children checked state info should be returned.
+     * @returns if row children are checked.
+     */
+    isRowChildrenChecked: (row: DataRowProps<TItem, TId>) => boolean;
+
+    /**
+     * Checking handler of a row.
+     * @param row - row, which should be checked.
+     */
+    handleOnCheck: (row: DataRowProps<TItem, TId>) => void;
+
+    /**
+     * Select all handler of a row.
+     * @param selectAll - specifies, if select all or clear all should be performed.
+     */
+    handleSelectAll: (selectAll: boolean) => void;
+
+    /**
+     * Clears all checked.
+     */
+    clearAllChecked: () => void;
+
+    /**
+     * Provides info about the ability to check and item.
+     * @param id - id of the item to check if checkable.
+     * @param item - record, if it is present or not found record symbol.
+     * @returns if item with some id is checkable.
+     */
+    isItemCheckable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;
+}
+
+/**
+ * Service, which provides checking functionality.
+ * @returns checking service.
+ */
+export function useCheckingService<TItem, TId>(
+    {
+        tree,
+        getParentId,
+        dataSourceState,
+        setDataSourceState,
+        cascadeSelection,
+        getRowOptions,
+        rowOptions,
+        handleCascadeSelection,
+        getItemStatus,
+    }: UseCheckingServiceProps<TItem, TId>,
+): CheckingService<TItem, TId> {
+    const checked = dataSourceState.checked ?? [];
+    const checkingInfoById = useMemo(
+        () => buildParentsLookup(checked, tree, getParentId),
+        [tree, getParentId, checked],
+    );
+
+    const { idsByKey: checkedByKey, someChildInIdsByKey: someChildCheckedByKey } = checkingInfoById;
+
+    const isRowChecked = useCallback((row: DataRowProps<TItem, TId>) => {
+        const exactCheck = !!checkedByKey[row.rowKey];
+        if (exactCheck || cascadeSelection !== CascadeSelectionTypes.IMPLICIT) {
+            return exactCheck;
+        }
+
+        const { path } = row;
+        return path.some(({ id }) => !!checkedByKey[idToKey(id)]);
+    }, [checkedByKey]);
+
+    const isRowChildrenChecked = useCallback((row: DataRowProps<TItem, TId>) => {
+        if (cascadeSelection === CascadeSelectionTypes.IMPLICIT) {
+            return isRowChecked(row) || someChildCheckedByKey[row.rowKey] || false;
+        }
+
+        return someChildCheckedByKey[row.rowKey] ?? false;
+    }, [someChildCheckedByKey, isRowChecked, tree]);
+
+    const getRowProps = useCallback((item: TItem) => {
+        const externalRowOptions = getRowOptions ? getRowOptions(item) : {};
+        return { ...rowOptions, ...externalRowOptions };
+    }, [rowOptions, getRowOptions]);
+
+    const isItemCheckable = useCallback((id: TId, item: TItem | typeof NOT_FOUND_RECORD) => {
+        if (item === NOT_FOUND_RECORD) {
+            if (!getItemStatus) {
+                return true;
+            }
+
+            const status = getItemStatus(id);
+            if (isInProgress(status)) {
+                return false;
+            }
+
+            if (status === FAILED_RECORD || status === NOT_FOUND_RECORD) {
+                return true;
+            }
+
+            return false;
+        }
+
+        const rowProps = getRowProps(item);
+        return rowProps?.checkbox?.isVisible && !rowProps?.checkbox?.isDisabled;
+    }, [getRowProps]);
+
+    const isItemUnknown = useCallback((id: TId) => {
+        const item = tree.getById(id);
+        if (item !== NOT_FOUND_RECORD) {
+            return false;
+        }
+        if (!getItemStatus) {
+            return true;
+        }
+
+        const status = getItemStatus(id);
+        return status === FAILED_RECORD || status === NOT_FOUND_RECORD;
+    }, [tree, getItemStatus]);
+
+    const handleCheck = useCallback(async (isChecked: boolean, checkedId?: TId, isRoot?: boolean) => {
+        let updatedChecked: TId[] = [];
+        if (handleCascadeSelection) {
+            updatedChecked = await handleCascadeSelection?.(isChecked, checkedId, isRoot, checked);
+        } else {
+            updatedChecked = CheckingHelper.cascadeSelection({
+                tree,
+                currentCheckedIds: checked,
+                checkedId,
+                isChecked,
+                isCheckable: isItemCheckable,
+                isUnknown: isItemUnknown,
+                cascadeSelectionType: cascadeSelection,
+            });
+        }
+
+        setDataSourceState((dsState) => ({ ...dsState, checked: updatedChecked }));
+    }, [tree, checked, setDataSourceState, isItemCheckable, isItemUnknown, cascadeSelection]);
+
+    const handleSelectAll = useCallback((isChecked: boolean) => {
+        handleCheck(isChecked, undefined, true);
+    }, [handleCheck]);
+
+    const clearAllChecked = useCallback(() => {
+        handleCheck(false, undefined, true);
+    }, [handleCheck]);
+
+    const handleOnCheck = useCallback((rowProps: DataRowProps<TItem, TId>) => {
+        const id = rowProps.id;
+        const isChecked = !rowProps.isChecked;
+
+        handleCheck(isChecked, id);
+    }, [handleCheck]);
+
+    return {
+        isRowChecked,
+        isRowChildrenChecked,
+        handleOnCheck,
+        handleSelectAll,
+        clearAllChecked,
+        isItemCheckable,
+    };
+}
diff --git a/uui-core/src/data/processing/views/dataRows/services/useFocusService.ts b/uui-core/src/data/processing/views/dataRows/services/useFocusService.ts
new file mode 100644
index 0000000000..ba964d34ae
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/services/useFocusService.ts
@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+import { SetDataSourceState } from '../../../../../types';
+
+/**
+ * Focus service configuration.
+ */
+export interface UseFocusServiceProps<TId, TFilter = any> {
+    /**
+     * DataSource state update handler.
+     */
+    setDataSourceState?: SetDataSourceState<TFilter, TId>;
+}
+
+/**
+ * Focus service functionality.
+ */
+export interface FocusService {
+    /**
+     * Focus event handler.
+     * @param focusedIndex - index of the row to be focused.
+     */
+    handleOnFocus: (focusedIndex: number) => void;
+}
+
+/**
+ * Service, which provides focus functionality.
+ * @returns focus service.
+ */
+export function useFocusService<TId, TFilter = any>({
+    setDataSourceState,
+}: UseFocusServiceProps<TId, TFilter>): FocusService {
+    const handleOnFocus = useCallback((focusIndex: number) => {
+        setDataSourceState((dataSourceState) => ({ ...dataSourceState, focusedIndex: focusIndex }));
+    }, [setDataSourceState]);
+
+    return { handleOnFocus };
+}
diff --git a/uui-core/src/data/processing/views/dataRows/services/useFoldingService.ts b/uui-core/src/data/processing/views/dataRows/services/useFoldingService.ts
new file mode 100644
index 0000000000..d6270af1c0
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/services/useFoldingService.ts
@@ -0,0 +1,81 @@
+import { useCallback } from 'react';
+import { DataRowProps, DataSourceState, ScrollToConfig } from '../../../../../types';
+import { idToKey, setObjectFlag } from '../../helpers';
+import { CommonTreeConfig } from '../../tree/hooks/strategies/types';
+
+/**
+ * Folding service configuration.
+ */
+export type UseFoldingServiceProps<TItem, TId, TFilter = any> = Pick<
+CommonTreeConfig<TItem, TId, TFilter>,
+'getId' | 'dataSourceState' | 'setDataSourceState' | 'isFoldedByDefault'
+>;
+
+/**
+ * Service, which provides folding functionality and folding info.
+ */
+export interface FoldingService<TItem, TId> {
+    /**
+     * Folding event handler.
+     * @param row - row, which should be folded.
+     */
+    handleOnFold: (row: DataRowProps<TItem, TId>) => void;
+    /**
+     * Provides knowledge about folding state of the row.
+     * @param row - row, which folding state info should be returned.
+     * @returns if row is folded.
+     */
+    isFolded: (item: TItem) => boolean
+}
+
+/**
+ * Service, which provides folding functionality.
+ * @returns folding service.
+ */
+export function useFoldingService<TItem, TId, TFilter = any>({
+    dataSourceState,
+    setDataSourceState,
+    isFoldedByDefault,
+    getId,
+}: UseFoldingServiceProps<TItem, TId, TFilter>): FoldingService<TItem, TId> {
+    const defaultIsFolded = (state: DataSourceState<TFilter, TId>) => {
+        return state.foldAll;
+    };
+
+    const isFolded = useCallback((item: TItem) => {
+        const searchIsApplied = !!dataSourceState?.search;
+        if (searchIsApplied) {
+            return false;
+        }
+
+        const folded = dataSourceState.folded || {};
+        const key = idToKey(getId(item));
+        if (folded[key] != null) {
+            return folded[key];
+        }
+
+        if (isFoldedByDefault) {
+            return isFoldedByDefault(item, { foldAll: dataSourceState?.foldAll });
+        }
+
+        return defaultIsFolded(dataSourceState) ?? true;
+    }, [isFoldedByDefault, dataSourceState?.search, dataSourceState?.folded, dataSourceState?.foldAll]);
+
+    const handleOnFold = useCallback((rowProps: DataRowProps<TItem, TId>) => {
+        setDataSourceState((dsState) => {
+            const fold = !rowProps.isFolded;
+            const indexToScroll = rowProps.index - (rowProps.path?.length ?? 0);
+            const scrollTo: ScrollToConfig = fold && rowProps.isPinned
+                ? { index: indexToScroll, align: 'nearest' }
+                : dsState.scrollTo;
+
+            return {
+                ...dsState,
+                scrollTo,
+                folded: setObjectFlag(dsState && dsState.folded, rowProps.rowKey, fold),
+            };
+        });
+    }, [setDataSourceState]);
+
+    return { handleOnFold, isFolded };
+}
diff --git a/uui-core/src/data/processing/views/dataRows/services/useSelectingService.ts b/uui-core/src/data/processing/views/dataRows/services/useSelectingService.ts
new file mode 100644
index 0000000000..ae47552460
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/services/useSelectingService.ts
@@ -0,0 +1,80 @@
+import { useCallback, useMemo } from 'react';
+import { DataRowProps } from '../../../../../types';
+import { buildParentsLookup, idToKey } from './buildParentsLookup';
+import { ITree } from '../../tree';
+import { CommonTreeConfig } from '../../tree/hooks/strategies/types';
+
+/**
+ * Checking service configuration.
+ */
+export interface UseSelectingServiceProps<TItem, TId, TFilter = any> extends
+    Pick<
+    CommonTreeConfig<TItem, TId, TFilter>,
+    'getParentId' | 'dataSourceState' | 'setDataSourceState'
+    > {
+    /**
+     * Tree-like data, selection should be performed on.
+     */
+    tree: ITree<TItem, TId>;
+}
+
+/**
+ * Service, which provides selecting functionality and seleting info.
+ */
+export interface SelectingService<TItem, TId> {
+    /**
+     * Selecting handler of a row.
+     * @param row - row, which should be selected.
+     */
+    handleOnSelect: (row: DataRowProps<TItem, TId>) => void;
+
+    /**
+     * Provides knowledge about selection state of the row.
+     * @param row - row, which selection state info should be returned.
+     * @returns if row is selected.
+     */
+    isRowSelected: (row: DataRowProps<TItem, TId>) => boolean;
+
+    /**
+     * Provides knowledge about children selection state of the row.
+     * @param row - row, which children selection state info should be returned.
+     * @returns if row is selected.
+     */
+    isRowChildSelected: (row: DataRowProps<TItem, TId>) => boolean;
+}
+
+/**
+ * Service, which provides selection functionality.
+ * @returns selecting service.
+ */
+export function useSelectingService<TItem, TId, TFilter = any>({
+    tree,
+    getParentId,
+    dataSourceState,
+    setDataSourceState,
+}: UseSelectingServiceProps<TItem, TId, TFilter>): SelectingService<TItem, TId> {
+    const { selectedId } = dataSourceState;
+    const selectingInfoById = useMemo(
+        () => buildParentsLookup(selectedId === null ? [] : [selectedId], tree, getParentId),
+        [tree, getParentId, selectedId],
+    );
+
+    const { idsByKey: selectedByKey, someChildInIdsByKey: someChildSelectedByKey } = selectingInfoById;
+
+    const isRowSelected = useCallback((row: DataRowProps<TItem, TId>) => {
+        return !!selectedByKey[idToKey(row.id)];
+    }, [selectedByKey]);
+
+    const isRowChildSelected = useCallback((row: DataRowProps<TItem, TId>) => {
+        return someChildSelectedByKey[idToKey(row.id)] ?? false;
+    }, [someChildSelectedByKey]);
+
+    const handleOnSelect = useCallback((rowProps: DataRowProps<TItem, TId>) => {
+        setDataSourceState((dsState) => ({
+            ...dsState,
+            selectedId: rowProps.id,
+        }));
+    }, [setDataSourceState]);
+
+    return { handleOnSelect, isRowSelected, isRowChildSelected };
+}
diff --git a/uui-core/src/data/processing/views/dataRows/stats.ts b/uui-core/src/data/processing/views/dataRows/stats.ts
new file mode 100644
index 0000000000..904ec3b93d
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/stats.ts
@@ -0,0 +1,61 @@
+import { CascadeSelection, CascadeSelectionTypes, DataRowProps } from '../../../../types';
+
+export interface NodeStats {
+    isSomeCheckable: boolean;
+    isSomeChecked: boolean;
+    isAllChecked: boolean;
+    isSomeSelected: boolean;
+    hasMoreRows: boolean;
+    isSomeCheckboxEnabled: boolean;
+}
+
+export const getDefaultNodeStats = () => ({
+    isSomeCheckable: false,
+    isSomeChecked: false,
+    isAllChecked: true,
+    isSomeSelected: false,
+    hasMoreRows: false,
+    isSomeCheckboxEnabled: false,
+});
+
+export const mergeStats = (parentStats: NodeStats, childStats: NodeStats) => ({
+    ...parentStats,
+    isSomeSelected: parentStats.isSomeSelected || childStats.isSomeSelected,
+    isSomeCheckable: parentStats.isSomeCheckable || childStats.isSomeCheckable,
+    isSomeChecked: parentStats.isSomeChecked || childStats.isSomeChecked,
+    isAllChecked: parentStats.isAllChecked && childStats.isAllChecked,
+    isSomeCheckboxEnabled: parentStats.isSomeCheckboxEnabled || childStats.isSomeCheckboxEnabled,
+    hasMoreRows: parentStats.hasMoreRows || childStats.hasMoreRows,
+});
+
+export const getRowStats = <TItem, TId>(row: DataRowProps<TItem, TId>, actualStats: NodeStats, cascadeSelection: CascadeSelection): NodeStats => {
+    let {
+        isSomeCheckable, isSomeChecked, isAllChecked, isSomeSelected, isSomeCheckboxEnabled,
+    } = actualStats;
+
+    if (row.checkbox && row.checkbox.isVisible) {
+        isSomeCheckable = true;
+        if (row.isChecked || row.isChildrenChecked) {
+            isSomeChecked = true;
+        }
+        if (!row.checkbox.isDisabled || isSomeCheckboxEnabled) {
+            isSomeCheckboxEnabled = true;
+        }
+
+        const isImplicitCascadeSelection = cascadeSelection === CascadeSelectionTypes.IMPLICIT;
+        if (
+            (!row.isChecked && !row.checkbox.isDisabled && !isImplicitCascadeSelection)
+            || (row.parentId === undefined && !row.isChecked && isImplicitCascadeSelection)
+        ) {
+            isAllChecked = false;
+        }
+    }
+
+    if (row.isSelected || row.isChildrenSelected) {
+        isSomeSelected = true;
+    }
+
+    return {
+        ...actualStats, isSomeCheckable, isSomeChecked, isAllChecked, isSomeSelected, isSomeCheckboxEnabled,
+    };
+};
diff --git a/uui-core/src/data/processing/views/dataRows/useBuildRows.ts b/uui-core/src/data/processing/views/dataRows/useBuildRows.ts
new file mode 100644
index 0000000000..e703285acf
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/useBuildRows.ts
@@ -0,0 +1,148 @@
+import { useMemo } from 'react';
+import { ITree, NOT_FOUND_RECORD, Tree } from '../tree';
+import { DataRowPathItem, DataRowProps } from '../../../../types';
+import { idToKey } from '../helpers';
+import { NodeStats, getDefaultNodeStats, getRowStats, mergeStats } from './stats';
+import { CommonTreeConfig } from '../tree/hooks/strategies/types/common';
+
+export interface UseBuildRowsProps<TItem, TId, TFilter = any> extends
+    Pick<
+    CommonTreeConfig<TItem, TId, TFilter>,
+    'dataSourceState' | 'rowOptions' | 'getRowOptions' | 'cascadeSelection'
+    > {
+
+    tree: ITree<TItem, TId>;
+
+    getEstimatedChildrenCount: (id: TId) => number;
+    getMissingRecordsCount: (id: TId, totalRowsCount: number, loadedChildrenCount: number) => number;
+    maxVisibleRowIndex: number;
+
+    getRowProps: (item: TItem, index: number) => DataRowProps<TItem, TId>;
+    getLoadingRowProps: (id: any, index?: number, path?: DataRowPathItem<TId, TItem>[]) => DataRowProps<TItem, TId>;
+
+    isLoading?: boolean;
+}
+
+export function useBuildRows<TItem, TId, TFilter = any>({
+    tree,
+    dataSourceState,
+    getEstimatedChildrenCount,
+    getMissingRecordsCount,
+    cascadeSelection,
+    maxVisibleRowIndex,
+    getRowProps,
+    getLoadingRowProps,
+    isLoading = false,
+}: UseBuildRowsProps<TItem, TId, TFilter>) {
+    const buildRows = () => {
+        const rows: DataRowProps<TItem, TId>[] = [];
+        const pinned: Record<string, number> = {};
+        const pinnedByParentId: Record<string, number[]> = {};
+
+        const iterateNode = (
+            parentId: TId,
+            appendRows: boolean, // Will be false, if we are iterating folded nodes.
+        ): NodeStats => {
+            let currentLevelRows = 0;
+            let stats = getDefaultNodeStats();
+
+            const layerRows: DataRowProps<TItem, TId>[] = [];
+
+            const { ids, count } = tree.getItems(parentId);
+
+            for (let n = 0; n < ids.length; n++) {
+                const id = ids[n];
+                const item = tree.getById(id);
+                if (item === NOT_FOUND_RECORD) {
+                    continue;
+                }
+
+                const row = getRowProps(item, rows.length);
+                if (appendRows) {
+                    rows.push(row);
+                    layerRows.push(row);
+                    currentLevelRows++;
+                }
+
+                stats = getRowStats(row, stats, cascadeSelection);
+                row.isLastChild = n === ids.length - 1 && count === ids.length;
+                const assumedChildrenOfParent = getEstimatedChildrenCount(parentId);
+                row.indent = (!assumedChildrenOfParent && parentId !== undefined) ? 0 : row.path.length + 1;
+
+                const estimatedChildrenCount = getEstimatedChildrenCount(id);
+                if (estimatedChildrenCount !== undefined) {
+                    const { ids: childrenIds } = tree.getItems(id);
+
+                    if (estimatedChildrenCount > 0) {
+                        if (childrenIds.length > 0) {
+                        // some children are loaded
+                            const childStats = iterateNode(id, appendRows && !row.isFolded);
+                            row.isChildrenChecked = row.isChildrenChecked || childStats.isSomeChecked;
+                            row.isChildrenSelected = row.isChildrenSelected || childStats.isSomeSelected;
+                            stats = mergeStats(stats, childStats);
+                        // while searching and no children in visible tree, no need to append placeholders.
+                        } else if (!dataSourceState.search && !row.isFolded && appendRows) {
+                        // children are not loaded
+                            const parentsWithRow = [...row.path, Tree.getPathItem(item, tree)];
+                            for (let m = 0; m < estimatedChildrenCount && rows.length < maxVisibleRowIndex; m++) {
+                                const loadingRow = getLoadingRowProps('_loading_' + rows.length, rows.length, parentsWithRow);
+                                loadingRow.indent = parentsWithRow.length + 1;
+                                loadingRow.isLastChild = m === estimatedChildrenCount - 1;
+                                rows.push(loadingRow);
+                                currentLevelRows++;
+                            }
+                        }
+                    }
+                }
+
+                row.isPinned = row.pin?.(row) ?? false;
+                if (row.isPinned) {
+                    pinned[idToKey(row.id)] = row.index;
+                    if (!pinnedByParentId[idToKey(row.parentId)]) {
+                        pinnedByParentId[idToKey(row.parentId)] = [];
+                    }
+                    pinnedByParentId[idToKey(row.parentId)]?.push(row.index);
+                }
+            }
+
+            const pathToParent = Tree.getPathById(parentId, tree);
+            const parent = tree.getById(parentId);
+            const parentPathItem = parent !== NOT_FOUND_RECORD ? [Tree.getPathItem(parent, tree)] : [];
+            const path = parentId ? [...pathToParent, ...parentPathItem] : pathToParent;
+            if (appendRows) {
+                let missingCount = getMissingRecordsCount(parentId, rows.length, currentLevelRows);
+                if (missingCount > 0) {
+                    stats.hasMoreRows = true;
+                }
+                // Append loading rows, stop at maxVisibleRowIndex (maximum assumed row visible)
+                while (rows.length < maxVisibleRowIndex && missingCount > 0) {
+                    const row = getLoadingRowProps('_loading_' + rows.length, rows.length, path);
+                    rows.push(row);
+                    layerRows.push(row);
+                    currentLevelRows++;
+                    missingCount--;
+                }
+            }
+
+            const isListFlat = path.length === 0 && !layerRows.some((r) => r.isFoldable);
+            if (isListFlat) {
+                layerRows.forEach((r) => {
+                    r.indent = 0;
+                });
+            }
+
+            return stats;
+        };
+
+        const rootStats = iterateNode(undefined, true);
+
+        return {
+            rows,
+            pinned,
+            pinnedByParentId,
+            stats: rootStats,
+        };
+    };
+
+    return useMemo(() => buildRows(), [tree, dataSourceState.folded, dataSourceState.checked, isLoading, dataSourceState.foldAll]);
+}
diff --git a/uui-core/src/data/processing/views/dataRows/useDataRowProps.ts b/uui-core/src/data/processing/views/dataRows/useDataRowProps.ts
new file mode 100644
index 0000000000..595293d06c
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/useDataRowProps.ts
@@ -0,0 +1,156 @@
+import { useCallback, useMemo } from 'react';
+import { DataRowPathItem, DataRowProps } from '../../../../types';
+import { CheckingService, FocusService, FoldingService, SelectingService } from './services';
+import { idToKey } from '../helpers';
+import { CommonTreeConfig } from '../tree/hooks/strategies/types/common';
+import { ITree, Tree } from '../tree';
+
+export interface UseDataRowPropsProps<TItem, TId, TFilter = any> extends Omit<CheckingService<TItem, TId>, 'clearAllChecked' | 'handleSelectAll'>,
+    FocusService,
+    SelectingService<TItem, TId>,
+    FoldingService<TItem, TId>,
+    Pick<
+    CommonTreeConfig<TItem, TId, TFilter>,
+    'dataSourceState' | 'rowOptions' | 'getRowOptions' | 'getId'
+    > {
+    /**
+     * Tree-like data, rows to be built from.
+     */
+    tree: ITree<TItem, TId>;
+
+    getEstimatedChildrenCount: (id: TId) => number;
+}
+
+export function useDataRowProps<TItem, TId, TFilter = any>(
+    {
+        tree,
+        getId,
+        dataSourceState,
+        getRowOptions,
+        rowOptions,
+        isFolded,
+        handleOnCheck,
+        handleOnSelect,
+        handleOnFocus,
+        handleOnFold,
+        isRowSelected,
+        isRowChildSelected,
+        isRowChecked,
+        isRowChildrenChecked,
+        getEstimatedChildrenCount,
+    }: UseDataRowPropsProps<TItem, TId, TFilter>,
+) {
+    const updateRowOptions = useCallback((row: DataRowProps<TItem, TId>) => {
+        const externalRowOptions = (getRowOptions && !row.isLoading)
+            ? getRowOptions(row.value, row.index)
+            : {};
+
+        const fullRowOptions = { ...rowOptions, ...externalRowOptions };
+
+        const estimatedChildrenCount = getEstimatedChildrenCount(row.id);
+        row.isFoldable = false;
+        if (estimatedChildrenCount > 0) {
+            row.isFoldable = true;
+        }
+
+        const isCheckable = !!(fullRowOptions?.checkbox && fullRowOptions?.checkbox?.isVisible && !fullRowOptions?.checkbox?.isDisabled);
+        const isSelectable = fullRowOptions && fullRowOptions.isSelectable;
+        if (fullRowOptions != null) {
+            const rowValue = row.value;
+            Object.assign(row, fullRowOptions);
+            row.value = fullRowOptions.value ?? rowValue;
+        }
+        row.isFocused = dataSourceState.focusedIndex === row.index;
+        row.isChecked = isRowChecked(row);
+        row.isSelected = isRowSelected(row);
+        row.isCheckable = isCheckable;
+        row.onCheck = isCheckable ? handleOnCheck : undefined;
+
+        row.onSelect = fullRowOptions?.isSelectable ? handleOnSelect : undefined;
+        row.onFocus = (isSelectable || isCheckable || row.isFoldable) ? handleOnFocus : undefined;
+        row.onFold = row.isFoldable ? handleOnFold : undefined;
+        row.isFolded = row.isFoldable && isFolded(row.value);
+
+        row.isChildrenChecked = row.isChildrenChecked || isRowChildrenChecked(row);
+        row.isChildrenSelected = row.isChildrenSelected || isRowChildSelected(row);
+
+        return row;
+    }, [
+        tree,
+        getRowOptions,
+        rowOptions,
+        getEstimatedChildrenCount,
+        dataSourceState.focusedIndex,
+        dataSourceState.selectedId,
+        isRowChecked,
+        isRowChildrenChecked,
+        handleOnCheck,
+        handleOnSelect,
+        handleOnFocus,
+        isFolded,
+        handleOnFold,
+    ]);
+
+    const getRowProps = useCallback((item: TItem, index: number): DataRowProps<TItem, TId> => {
+        const id = getId(item);
+        const key = idToKey(id);
+        const path = Tree.getPathById(id, tree);
+        const parentId = path.length > 0 ? path[path.length - 1].id : undefined;
+        const rowProps = {
+            id,
+            parentId,
+            key,
+            rowKey: key,
+            index,
+            value: item,
+            depth: path.length,
+            path,
+        } as DataRowProps<TItem, TId>;
+
+        return updateRowOptions(rowProps);
+    }, [getId, tree, updateRowOptions]);
+
+    const getEmptyRowProps = useCallback((id: any, index: number = 0, path: DataRowPathItem<TId, TItem>[] = null): DataRowProps<TItem, TId> => {
+        const checked = dataSourceState?.checked ?? [];
+        const isChecked = checked.includes(id);
+        return {
+            id,
+            rowKey: idToKey(id),
+            value: undefined,
+            index,
+            depth: path ? path.length : 0,
+            path: path ?? [],
+            checkbox: rowOptions?.checkbox?.isVisible && { isVisible: true, isDisabled: true },
+            isChecked,
+        };
+    }, [dataSourceState?.checked, rowOptions]);
+
+    const getLoadingRowProps = useCallback((id: any, index: number = 0, path: DataRowPathItem<TId, TItem>[] = null): DataRowProps<TItem, TId> => {
+        const rowProps = getEmptyRowProps(id, index, path);
+        return {
+            ...rowProps,
+            checkbox: { ...rowProps.checkbox, isDisabled: true },
+            isLoading: true,
+        };
+    }, [getEmptyRowProps]);
+
+    const getUnknownRowProps = useCallback((id: any, index: number = 0, path: DataRowPathItem<TId, TItem>[] = null): DataRowProps<TItem, TId> => {
+        const emptyRowProps = getEmptyRowProps(id, index, path);
+        const checkbox = (rowOptions?.checkbox?.isVisible || emptyRowProps.isChecked)
+            ? { isVisible: true, isDisabled: false }
+            : undefined;
+
+        const isCheckable = checkbox && checkbox.isVisible && !checkbox.isDisabled;
+        return {
+            ...emptyRowProps,
+            checkbox,
+            isUnknown: true,
+            onCheck: isCheckable ? handleOnCheck : undefined,
+        };
+    }, [getEmptyRowProps, rowOptions, handleOnCheck]);
+
+    return useMemo(
+        () => ({ getRowProps, getEmptyRowProps, getLoadingRowProps, getUnknownRowProps, updateRowOptions }),
+        [getRowProps, getEmptyRowProps, getLoadingRowProps, getUnknownRowProps, updateRowOptions],
+    );
+}
diff --git a/uui-core/src/data/processing/views/dataRows/useDataRows.ts b/uui-core/src/data/processing/views/dataRows/useDataRows.ts
new file mode 100644
index 0000000000..47bab1e660
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/useDataRows.ts
@@ -0,0 +1,296 @@
+import { useCallback, useMemo } from 'react';
+import { DataSourceListProps } from '../../../../types';
+import { useCheckingService, useFoldingService, useFocusService, useSelectingService } from './services';
+import { useDataRowProps } from './useDataRowProps';
+import { useBuildRows } from './useBuildRows';
+import { useSelectAll } from './useSelectAll';
+import { usePinnedRows } from './usePinnedRows';
+import { useUpdateRowOptions } from './useUpdateRowProps';
+import { CommonTreeConfig, ITreeLoadingState } from '../tree/hooks/strategies/types/common';
+import { NOT_FOUND_RECORD, ITree } from '../tree';
+import { EMPTY, FULLY_LOADED } from '../tree/constants';
+import { CascadeSelectionService } from './services/useCascadeSelectionService';
+import { GetItemStatus } from '../tree/hooks/strategies/types';
+import { isInProgress } from '../helpers';
+
+/**
+ * `useDataRows` configuration.
+ */
+export interface UseDataRowsProps<TItem, TId, TFilter = any> extends
+    CommonTreeConfig<TItem, TId, TFilter>,
+    ITreeLoadingState,
+    Partial<CascadeSelectionService<TId>>,
+    GetItemStatus<TId> {
+
+    /**
+     * Tree-like data, rows to be built from.
+     */
+    tree: ITree<TItem, TId>;
+}
+
+/**
+ * Hook, which builds rows, based on the tree.
+ * @returns rows and other IDataSourceView fields.
+ */
+export function useDataRows<TItem, TId, TFilter = any>(
+    props: UseDataRowsProps<TItem, TId, TFilter>,
+) {
+    const {
+        tree,
+        getId,
+        getParentId,
+        dataSourceState,
+
+        getRowOptions,
+        rowOptions,
+        getItemStatus,
+
+        cascadeSelection,
+        isLoading,
+        isFetching,
+        setDataSourceState,
+        isFoldedByDefault,
+        handleCascadeSelection,
+    } = props;
+
+    const maxVisibleRowIndex = useMemo(
+        () => dataSourceState.topIndex + dataSourceState.visibleCount,
+        [tree, dataSourceState.topIndex, dataSourceState.visibleCount],
+    );
+
+    const getEstimatedChildrenCount = useCallback((id: TId) => {
+        if (id === undefined) {
+            const { count, status } = tree.getItems(id);
+            return count !== undefined && status === FULLY_LOADED ? count : undefined;
+        }
+
+        const item = tree.getById(id);
+        if (item === NOT_FOUND_RECORD) return undefined;
+
+        const nodeInfo = tree.getItems(id);
+        if ('assumedCount' in nodeInfo && nodeInfo.assumedCount === undefined) {
+            return undefined;
+        }
+
+        const { count, status } = nodeInfo;
+        if (count !== undefined && (status === FULLY_LOADED || status === EMPTY)) {
+            // nodes are already loaded, and we know the actual count
+            return count;
+        }
+
+        return nodeInfo.assumedCount;
+    }, [props, tree]);
+
+    const getMissingRecordsCount = useCallback((id: TId, totalRowsCount: number, loadedChildrenCount: number) => {
+        const { count } = tree.getItems(id);
+
+        // Estimate how many more nodes there are at current level, to put 'loading' placeholders.
+        if (count !== undefined) {
+            // Exact count known
+            return count - loadedChildrenCount;
+        }
+
+        const estimatedChildCount = getEstimatedChildrenCount(id);
+        // estimatedChildCount = undefined for top-level rows only.
+        if (id === undefined && totalRowsCount < maxVisibleRowIndex) {
+            return maxVisibleRowIndex - totalRowsCount; // let's put placeholders down to the bottom of visible list
+        }
+
+        if (estimatedChildCount > loadedChildrenCount) {
+            // According to assumedCount (put into estimatedChildCount), there are more rows on this level
+            return estimatedChildCount - loadedChildrenCount;
+        }
+
+        // We have a bad estimate - it even less that actual items we have
+        // This would happen is assumedCount provides a guess count, and we scroll thru children past this count
+        // let's guess we have at least 1 item more than loaded
+        return 1;
+    }, [maxVisibleRowIndex, tree, getEstimatedChildrenCount]);
+
+    const { handleOnCheck, isRowChecked, isRowChildrenChecked, isItemCheckable, handleSelectAll } = useCheckingService({
+        tree,
+        dataSourceState,
+        setDataSourceState,
+        cascadeSelection,
+        getParentId,
+        rowOptions,
+        getRowOptions,
+        handleCascadeSelection,
+        getItemStatus,
+    });
+
+    const foldingService = useFoldingService({
+        dataSourceState, setDataSourceState, isFoldedByDefault, getId,
+    });
+
+    const focusService = useFocusService({ setDataSourceState });
+
+    const selectingService = useSelectingService({
+        tree,
+        getParentId,
+        dataSourceState,
+        setDataSourceState,
+    });
+
+    const { getRowProps, getUnknownRowProps, getLoadingRowProps, updateRowOptions } = useDataRowProps<TItem, TId, TFilter>({
+        tree,
+        getId,
+
+        dataSourceState,
+
+        rowOptions,
+        getRowOptions,
+
+        getEstimatedChildrenCount,
+
+        handleOnCheck,
+        isRowChecked,
+        isRowChildrenChecked,
+        isItemCheckable,
+
+        ...foldingService,
+        ...selectingService,
+        ...focusService,
+    });
+
+    const { rows: allRows, pinned, pinnedByParentId, stats } = useBuildRows({
+        tree,
+        dataSourceState,
+        cascadeSelection,
+        maxVisibleRowIndex,
+        getEstimatedChildrenCount,
+        getMissingRecordsCount,
+        getRowProps,
+        getLoadingRowProps,
+        isLoading,
+    });
+
+    const updatedRows = useUpdateRowOptions({ rows: allRows, updateRowOptions });
+
+    const withPinnedRows = usePinnedRows({
+        rows: updatedRows,
+        pinned,
+        pinnedByParentId,
+    });
+
+    const selectAll = useSelectAll({
+        tree,
+        checked: dataSourceState.checked,
+        selectAll: props.selectAll,
+        stats,
+        areCheckboxesVisible: rowOptions?.checkbox?.isVisible,
+        handleSelectAll,
+    });
+
+    const isItemLoaded = (item: TItem | typeof NOT_FOUND_RECORD): item is TItem => {
+        return item !== NOT_FOUND_RECORD;
+    };
+
+    const getById = (id: TId, index: number) => {
+        const itemStatus = getItemStatus?.(id);
+        const item = tree.getById(id);
+        if (!isItemLoaded(item)) {
+            if (isInProgress(itemStatus)) {
+                return getLoadingRowProps(id, index, []);
+            }
+
+            return getUnknownRowProps(id, index, []);
+        }
+
+        return getRowProps(item, index);
+    };
+
+    const listProps = useMemo((): DataSourceListProps => {
+        const itemsInfo = tree.getItems(undefined);
+        const { count, ids } = itemsInfo;
+        const isTreeLikeStructure = ids.some((id) => {
+            const info = tree.getItems(id);
+            return ('assumedCount' in info) || info.ids.length > 0;
+        });
+
+        const isFlatList = !isTreeLikeStructure;
+        const completeFlatListRowsCount = isFlatList && count != null ? count : undefined;
+        let rowsCount;
+        if (completeFlatListRowsCount !== undefined) {
+            // We have a flat list, and know exact count of items on top level. So, we can have an exact number of rows w/o iterating the whole tree.
+            rowsCount = completeFlatListRowsCount;
+        } else if (!stats.hasMoreRows) {
+            // We are at the bottom of the list. Some children might still be loading, but that's ok - we'll re-count everything after we load them.
+            rowsCount = updatedRows.length;
+        } else {
+            // We definitely have more rows to show below the last visible row.
+            // We need to add at least 1 row below, so VirtualList or other component would not detect the end of the list, and query loading more rows later.
+            // We have to balance this number.
+            // To big - would make scrollbar size to shrink when we hit bottom
+            // To small - and VirtualList will re-request rows until it will fill it's last block.
+            // So, it should be at least greater than VirtualList block size (default is 20)
+            // Probably, we'll move this const to props later if needed;
+            const rowsToAddBelowLastKnown = 20;
+
+            rowsCount = Math.max(updatedRows.length, maxVisibleRowIndex + rowsToAddBelowLastKnown);
+        }
+
+        return {
+            rowsCount,
+            knownRowsCount: updatedRows.length,
+            exactRowsCount: updatedRows.length,
+            selectAll,
+            isReloading: isFetching,
+        };
+    }, [updatedRows.length, selectAll, stats.hasMoreRows, maxVisibleRowIndex, tree, isFetching]);
+
+    const rows = useMemo(
+        () => {
+            const from = dataSourceState.topIndex;
+            const count = dataSourceState.visibleCount;
+            const visibleRowsWithPins = withPinnedRows(updatedRows.slice(from, from + count));
+            if (stats.hasMoreRows) {
+                // We don't run rebuild rows on scrolling. We rather wait for the next load to happen.
+                // So there can be a case when we haven't updated rows (to add more loading rows), and view is scrolled down
+                // We need to add more loading rows in such case.
+                const lastRow = updatedRows[updatedRows.length - 1];
+
+                while (visibleRowsWithPins.length < count && from + visibleRowsWithPins.length < listProps.rowsCount) {
+                    const index = from + visibleRowsWithPins.length;
+                    const row = getLoadingRowProps('_loading_' + index, index);
+                    row.indent = lastRow.indent;
+                    row.path = lastRow.path;
+                    row.depth = lastRow.depth;
+                    visibleRowsWithPins.push(row);
+                }
+            }
+
+            return visibleRowsWithPins;
+        },
+        [
+            tree,
+            updatedRows,
+            dataSourceState.topIndex,
+            dataSourceState.visibleCount,
+            withPinnedRows,
+            listProps,
+            getLoadingRowProps,
+        ],
+    );
+
+    const getSelectedRowsCount = () => {
+        const count = dataSourceState.checked?.length ?? 0;
+        if (!count) {
+            return (dataSourceState.selectedId !== undefined && dataSourceState.selectedId !== null) ? 1 : 0;
+        }
+
+        return count;
+    };
+
+    const clearAllChecked = useCallback(() => handleSelectAll(false), [handleSelectAll]);
+
+    return {
+        listProps,
+        rows,
+        getSelectedRowsCount,
+        getById,
+        clearAllChecked,
+
+        selectAll,
+    };
+}
diff --git a/uui-core/src/data/processing/views/dataRows/usePinnedRows.ts b/uui-core/src/data/processing/views/dataRows/usePinnedRows.ts
new file mode 100644
index 0000000000..834aea9abf
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/usePinnedRows.ts
@@ -0,0 +1,85 @@
+import { useCallback } from 'react';
+import { DataRowProps } from '../../../../types';
+import { idToKey } from '../helpers';
+
+export interface UsePinnedRowsProps<TItem, TId> {
+    rows: DataRowProps<TItem, TId>[];
+    pinned: Record<string, number>;
+    pinnedByParentId: Record<string, number[]>;
+}
+
+export function usePinnedRows<TItem, TId>({
+    rows,
+    pinned,
+    pinnedByParentId,
+}: UsePinnedRowsProps<TItem, TId>) {
+    const getLastPinnedBeforeRow = useCallback((row: DataRowProps<TItem, TId>, pinnedIndexes: number[]) => {
+        const isBeforeOrEqualToRow = (pinnedRowIndex: number) => {
+            const pinnedRow = rows[pinnedRowIndex];
+            if (!pinnedRow) {
+                return false;
+            }
+            return row.index >= pinnedRow.index;
+        };
+
+        let foundRowIndex = -1;
+        for (const pinnedRowIndex of pinnedIndexes) {
+            if (isBeforeOrEqualToRow(pinnedRowIndex)) {
+                foundRowIndex = pinnedRowIndex;
+            } else if (foundRowIndex !== -1) {
+                break;
+            }
+        }
+
+        if (foundRowIndex === -1) {
+            return undefined;
+        }
+        return foundRowIndex;
+    }, [rows]);
+
+    const getLastHiddenPinnedByParent = useCallback((row: DataRowProps<TItem, TId>, alreadyAdded: TId[]) => {
+        const pinnedIndexes = pinnedByParentId[idToKey(row.parentId)];
+        if (!pinnedIndexes || !pinnedIndexes.length) {
+            return undefined;
+        }
+
+        const lastPinnedBeforeRow = getLastPinnedBeforeRow(row, pinnedIndexes);
+        if (lastPinnedBeforeRow === undefined) {
+            return undefined;
+        }
+
+        const lastHiddenPinned = rows[lastPinnedBeforeRow];
+        if (!lastHiddenPinned || alreadyAdded.includes(lastHiddenPinned.id)) {
+            return undefined;
+        }
+
+        return lastHiddenPinned;
+    }, [pinnedByParentId, rows, getLastPinnedBeforeRow]);
+
+    const withPinnedRows = useCallback((allRows: DataRowProps<TItem, TId>[]) => {
+        if (!allRows.length) return [];
+
+        const rowsWithPinned: DataRowProps<TItem, TId>[] = [];
+        const alreadyAdded = allRows.map(({ id }) => id);
+        const [firstRow] = allRows;
+        firstRow.path.forEach((item) => {
+            const pinnedIndex = pinned[idToKey(item.id)];
+            if (pinnedIndex === undefined) return;
+
+            const parent = rows[pinnedIndex];
+            if (!parent || alreadyAdded.includes(parent.id)) return;
+
+            rowsWithPinned.push(parent);
+            alreadyAdded.push(parent.id);
+        });
+
+        const lastHiddenPinned = getLastHiddenPinnedByParent(firstRow, alreadyAdded);
+        if (lastHiddenPinned) {
+            rowsWithPinned.push(lastHiddenPinned);
+        }
+
+        return rowsWithPinned.concat(allRows);
+    }, [pinned, rows, getLastHiddenPinnedByParent]);
+
+    return withPinnedRows;
+}
diff --git a/uui-core/src/data/processing/views/dataRows/useSelectAll.ts b/uui-core/src/data/processing/views/dataRows/useSelectAll.ts
new file mode 100644
index 0000000000..7272eda64f
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/useSelectAll.ts
@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { NodeStats } from './stats';
+import { ITree } from '../tree';
+
+export interface UseSelectAllProps<TItem, TId> {
+    tree: ITree<TItem, TId>;
+    selectAll?: boolean;
+    stats: NodeStats;
+    checked?: TId[];
+    areCheckboxesVisible: boolean;
+    handleSelectAll: (isChecked: boolean) => void;
+}
+
+export function useSelectAll<TItem, TId>(props: UseSelectAllProps<TItem, TId>) {
+    const isSelectAllEnabled = useMemo(() => props.selectAll === undefined ? true : props.selectAll, [props.selectAll]);
+
+    const selectAll = useMemo(() => {
+        if (props.stats.isSomeCheckable && isSelectAllEnabled) {
+            return {
+                value: props.stats.isSomeCheckboxEnabled ? props.stats.isAllChecked : false,
+                onValueChange: props.handleSelectAll,
+                indeterminate: props.checked && props.checked.length > 0 && !props.stats.isAllChecked,
+            };
+        } else if (props.tree.getItems().ids.length === 0 && props.areCheckboxesVisible && isSelectAllEnabled) {
+            // Nothing loaded yet, but we guess that something is checkable. Add disabled checkbox for less flicker.
+            return {
+                value: false,
+                onValueChange: () => {},
+                isDisabled: true,
+                indeterminate: props.checked?.length > 0,
+            };
+        }
+        return null;
+    }, [
+        props.tree,
+        props.areCheckboxesVisible,
+        props.checked,
+        props.stats,
+        isSelectAllEnabled,
+        props.handleSelectAll,
+    ]);
+
+    return selectAll;
+}
diff --git a/uui-core/src/data/processing/views/dataRows/useUpdateRowProps.ts b/uui-core/src/data/processing/views/dataRows/useUpdateRowProps.ts
new file mode 100644
index 0000000000..3a2858e17a
--- /dev/null
+++ b/uui-core/src/data/processing/views/dataRows/useUpdateRowProps.ts
@@ -0,0 +1,17 @@
+import { DataRowProps } from '../../../../types';
+
+interface UseUpdateRowProps<TItem, TId> {
+    rows: DataRowProps<TItem, TId>[];
+    updateRowOptions: (row: DataRowProps<TItem, TId>) => DataRowProps<TItem, TId>;
+}
+
+export function useUpdateRowOptions<TItem, TId>({
+    rows, updateRowOptions,
+}: UseUpdateRowProps<TItem, TId>) {
+    return rows.map((row) => {
+        if (!row.isLoading) {
+            return updateRowOptions(row);
+        }
+        return row;
+    });
+}
diff --git a/uui-core/src/data/processing/views/exposed.ts b/uui-core/src/data/processing/views/exposed.ts
new file mode 100644
index 0000000000..d497d3827f
--- /dev/null
+++ b/uui-core/src/data/processing/views/exposed.ts
@@ -0,0 +1,3 @@
+export * from './dataRows/exposed';
+export * from './tree/exposed';
+export * from './types';
diff --git a/uui-core/src/data/processing/views/helpers/convert.ts b/uui-core/src/data/processing/views/helpers/convert.ts
new file mode 100644
index 0000000000..4296723918
--- /dev/null
+++ b/uui-core/src/data/processing/views/helpers/convert.ts
@@ -0,0 +1 @@
+export const idToKey = <TId, >(id: TId) => typeof id === 'object' ? JSON.stringify(id) : `${id}`;
diff --git a/uui-core/src/data/processing/views/helpers/index.ts b/uui-core/src/data/processing/views/helpers/index.ts
new file mode 100644
index 0000000000..7aa98ccf10
--- /dev/null
+++ b/uui-core/src/data/processing/views/helpers/index.ts
@@ -0,0 +1,3 @@
+export * from './convert';
+export * from './setters';
+export * from './status';
diff --git a/uui-core/src/data/processing/views/helpers/setters.ts b/uui-core/src/data/processing/views/helpers/setters.ts
new file mode 100644
index 0000000000..a2e1a0c413
--- /dev/null
+++ b/uui-core/src/data/processing/views/helpers/setters.ts
@@ -0,0 +1,3 @@
+export const setObjectFlag = (object: any, key: string, value: boolean) => {
+    return { ...object, [key]: value };
+};
diff --git a/uui-core/src/data/processing/views/helpers/status.ts b/uui-core/src/data/processing/views/helpers/status.ts
new file mode 100644
index 0000000000..22fd68d80e
--- /dev/null
+++ b/uui-core/src/data/processing/views/helpers/status.ts
@@ -0,0 +1,5 @@
+import { LOADING_RECORD, PENDING_RECORD } from '../tree/constants';
+import { RecordStatus } from '../tree/types';
+
+export const isInProgress = (status: RecordStatus): status is typeof PENDING_RECORD | typeof LOADING_RECORD =>
+    [PENDING_RECORD, LOADING_RECORD].includes(status);
diff --git a/uui-core/src/data/processing/views/index.ts b/uui-core/src/data/processing/views/index.ts
index d98c4366ba..0202340a05 100644
--- a/uui-core/src/data/processing/views/index.ts
+++ b/uui-core/src/data/processing/views/index.ts
@@ -1,5 +1,3 @@
-export * from './BaseListView';
-export * from './ArrayListView';
-export * from './LazyListView';
-export * from './AsyncListView';
 export * from './tree';
+export * from './dataRows';
+export * from './types';
diff --git a/uui-core/src/data/processing/views/tree/BaseTree.ts b/uui-core/src/data/processing/views/tree/BaseTree.ts
deleted file mode 100644
index 9b65f833d6..0000000000
--- a/uui-core/src/data/processing/views/tree/BaseTree.ts
+++ /dev/null
@@ -1,288 +0,0 @@
-import { DataSourceState, IMap, DataRowPathItem } from '../../../../types';
-import { CompositeKeysMap } from './CompositeKeysMap';
-import {
-    ApplyFilterOptions, ApplySearchOptions, ApplySortOptions, ITree, LoadTreeOptions, NOT_FOUND_RECORD, TreeNodeInfo,
-} from './ITree';
-import { TreeParams } from './ITree';
-
-export function newMap<TKey, TValue>(params: TreeParams<any, any>) {
-    if (params.complexIds) {
-        return new CompositeKeysMap<TKey, TValue>();
-    } else {
-        return new Map<TKey, TValue>();
-    }
-}
-
-export abstract class BaseTree<TItem, TId> implements ITree<TItem, TId> {
-    protected getId: (item: TItem) => TId;
-    protected getParentId: (item: TItem) => TId;
-    protected constructor(
-        protected params: TreeParams<TItem, TId>,
-        protected readonly byId: IMap<TId, TItem>,
-        protected readonly byParentId: IMap<TId, TId[]>,
-        protected readonly nodeInfoById: IMap<TId, TreeNodeInfo>,
-    ) {
-        this.getId = params.getId;
-        this.getParentId = params.getParentId ? (item: TItem) => params.getParentId(item) ?? undefined : () => undefined;
-    }
-
-    public clearStructure(): ITree<TItem, TId> {
-        return this.newInstance(
-            this.params,
-            this.byId,
-            this.newMap(), // add empty children list for root to avoid corner-cases
-            this.newMap(),
-        );
-    }
-
-    protected newInstance(
-        params: TreeParams<TItem, TId>,
-        byId: IMap<TId, TItem>,
-        byParentId: IMap<TId, TId[]>,
-        nodeInfoById: IMap<TId, TreeNodeInfo>,
-    ): ITree<TItem, TId> {
-        if (byId === this.byId && byParentId === this.byParentId && nodeInfoById === this.nodeInfoById) {
-            return this;
-        }
-
-        return new (this.constructor as any)(params, byId, byParentId, nodeInfoById) as ITree<TItem, TId>;
-    }
-
-    public getRootIds(): TId[] {
-        return this.byParentId.get(undefined) || [];
-    }
-
-    protected newMap<TKey, TValue>() {
-        return newMap<TKey, TValue>(this.params);
-    }
-
-    public getRootItems() {
-        return this.getRootIds().map((id) => this.byId.get(id)!);
-    }
-
-    public getById(id: TId): TItem | typeof NOT_FOUND_RECORD {
-        if (!this.byId.has(id)) {
-            return NOT_FOUND_RECORD;
-        }
-
-        return this.byId.get(id);
-    }
-
-    public getChildren(item: TItem) {
-        const id = this.getId(item);
-        return this.getChildrenByParentId(id);
-    }
-
-    public getChildrenByParentId(parentId: TId) {
-        const ids = this.getChildrenIdsByParentId(parentId);
-        const children = ids.map((id) => this.byId.get(id));
-        return children;
-    }
-
-    public getChildrenIdsByParentId(parentId: TId) {
-        return this.byParentId.get(parentId) || [];
-    }
-
-    public getParentIdsRecursive(id: TId) {
-        const parentIds: TId[] = [];
-        let parentId = id;
-        while (true) {
-            const item = this.byId.get(parentId);
-            if (!item) {
-                break;
-            }
-            parentId = this.getParentId(item);
-            if (!parentId) {
-                break;
-            }
-            parentIds.unshift(parentId);
-        }
-        return parentIds;
-    }
-
-    public getParents(id: TId) {
-        const parentIds = this.getParentIdsRecursive(id);
-        const parents: TItem[] = [];
-        parentIds.forEach((parentId) => {
-            if (this.byId.has(parentId)) {
-                parents.push(this.byId.get(parentId));
-            }
-        });
-
-        return parents;
-    }
-
-    public getPathById(id: TId): DataRowPathItem<TId, TItem>[] {
-        const foundParents = this.getParents(id);
-        const path: DataRowPathItem<TId, TItem>[] = [];
-        foundParents.forEach((parent) => {
-            const pathItem: DataRowPathItem<TId, TItem> = this.getPathItem(parent);
-            path.push(pathItem);
-        });
-        return path;
-    }
-
-    public getPathItem(item: TItem): DataRowPathItem<TId, TItem> {
-        const parentId = this.getParentId?.(item);
-        const id = this.getId?.(item);
-
-        const ids = this.getChildrenIdsByParentId(parentId);
-        const nodeInfo = this.getNodeInfo(parentId);
-        const lastId = ids[ids.length - 1];
-
-        const isLastChild = lastId !== undefined && lastId === id && nodeInfo.count === ids.length;
-
-        return {
-            id: this.getId(item),
-            value: item,
-            isLastChild,
-        };
-    }
-
-    public getNodeInfo(id: TId) {
-        return this.nodeInfoById.get(id) || {};
-    }
-
-    public isFlatList() {
-        return this.byParentId.size <= 1;
-    }
-
-    public getTotalRecursiveCount() {
-        let count = 0;
-        for (const [, info] of this.nodeInfoById) {
-            if (info.count == null) {
-                // TBD: getTotalRecursiveCount() is used for totalCount, but we can't have correct count until all branches are loaded
-                return null;
-            } else {
-                count += info.count;
-            }
-        }
-        return count;
-    }
-
-    public forEach(
-        action: (item: TItem, id: TId, parentId: TId, stop: () => void) => void,
-        options?: {
-            direction?: 'bottom-up' | 'top-down';
-            parentId?: TId;
-            includeParent?: boolean;
-        },
-    ) {
-        let shouldStop = false;
-        const stop = () => {
-            shouldStop = true;
-        };
-
-        options = { direction: 'top-down', parentId: undefined, ...options };
-        if (options.includeParent == null) {
-            options.includeParent = options.parentId != null;
-        }
-
-        const iterateNodes = (ids: TId[]) => {
-            if (shouldStop) return;
-            ids.forEach((id) => {
-                if (shouldStop) return;
-                const item = this.byId.get(id);
-                const parentId = item ? this.getParentId(item) : undefined;
-                walkChildrenRec(item, id, parentId);
-            });
-        };
-
-        const walkChildrenRec = (item: TItem, id: TId, parentId: TId) => {
-            if (options.direction === 'top-down') {
-                action(item, id, parentId, stop);
-            }
-            const childrenIds = this.byParentId.get(id);
-            childrenIds && iterateNodes(childrenIds);
-            if (options.direction === 'bottom-up') {
-                action(item, id, parentId, stop);
-            }
-        };
-
-        if (options.includeParent) {
-            iterateNodes([options.parentId]);
-        } else {
-            iterateNodes(this.getChildrenIdsByParentId(options.parentId));
-        }
-    }
-
-    public forEachItem(action: (item: TItem, id: TId, parentId: TId) => void) {
-        for (const [id, item] of this.byId) {
-            action(item, id, this.getParentId(item));
-        }
-    }
-
-    public computeSubtotals<TSubtotals>(get: (item: TItem, hasChildren: boolean) => TSubtotals, add: (a: TSubtotals, b: TSubtotals) => TSubtotals) {
-        const subtotalsMap = this.newMap<TId | undefined, TSubtotals>();
-
-        this.forEach(
-            (item, id, parentId) => {
-                let itemSubtotals = get(item, this.byParentId.has(id));
-
-                // add already computed children subtotals
-                if (subtotalsMap.has(id)) {
-                    itemSubtotals = add(itemSubtotals, subtotalsMap.get(id));
-                }
-
-                // store
-                subtotalsMap.set(id, itemSubtotals);
-
-                // add value to parent
-                let parentSubtotals: TSubtotals;
-                if (!subtotalsMap.has(parentId)) {
-                    parentSubtotals = itemSubtotals;
-                } else {
-                    parentSubtotals = add(itemSubtotals, subtotalsMap.get(parentId));
-                }
-                subtotalsMap.set(parentId, parentSubtotals);
-            },
-            { direction: 'bottom-up' },
-        );
-        return subtotalsMap;
-    }
-
-    protected cloneMap<TKey, TValue>(map: IMap<TKey, TValue>) {
-        return new (map.constructor as any)(map) as IMap<TKey, TValue>;
-    }
-
-    protected static truePredicate = () => true;
-    public static blank<TItem, TId>(params: TreeParams<TItem, TId>) {
-        return new (this as any)(
-            params,
-            newMap(params),
-            newMap(params), // add empty children list for root to avoid corner-cases
-            newMap(params),
-        ) as ITree<TItem, TId>;
-    }
-
-    public static create<TItem, TId>(params: TreeParams<TItem, TId>, items: TItem[] | ITree<TItem, TId>): ITree<TItem, TId> {
-        if (items instanceof BaseTree) {
-            return items;
-        } else {
-            // TBD: restore this optimization if needed. TBD: compare node index to detect when items are moved without changing
-            // const isItemsEqual = (this.props.items.length === this.tree.getTotalRecursiveCount())
-            //     && this.props.items.every((value, index) => value === this.tree.getById(this.props.getId(value)));
-            return this.blank(params).patch(items as TItem[]);
-        }
-    }
-
-    abstract patch(items: TItem[], isDeletedProp?: keyof TItem, comparator?: (newItem: TItem, existingItem: TItem) => number): ITree<TItem, TId>;
-    abstract mergeItems(tree: ITree<TItem, TId>): ITree<TItem, TId>;
-
-    abstract cascadeSelection(
-        currentSelection: TId[],
-        selectedId: TId,
-        isSelected: boolean,
-        options: {
-            isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean,
-            cascade: boolean;
-        }
-    ): TId[];
-
-    abstract load<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, value: Readonly<DataSourceState>): Promise<ITree<TItem, TId>>;
-    abstract loadMissing<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, value: Readonly<DataSourceState>): Promise<ITree<TItem, TId>>;
-    abstract loadMissingIdsAndParents<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, idsToLoad: TId[]): Promise<ITree<TItem, TId>>;
-    abstract filter<TFilter>(options: ApplyFilterOptions<TItem, TId, TFilter>): ITree<TItem, TId>;
-    abstract search<TFilter>(options: ApplySearchOptions<TItem, TId, TFilter>): ITree<TItem, TId>;
-    abstract sort<TFilter>(options: ApplySortOptions<TItem, TId, TFilter>): ITree<TItem, TId>;
-}
diff --git a/uui-core/src/data/processing/views/tree/EditableTree.ts b/uui-core/src/data/processing/views/tree/EditableTree.ts
deleted file mode 100644
index beba62794c..0000000000
--- a/uui-core/src/data/processing/views/tree/EditableTree.ts
+++ /dev/null
@@ -1,348 +0,0 @@
-import { IMap } from '../../../../types';
-import { BaseTree } from './BaseTree';
-import {
-    ItemsComparator, ITree, NOT_FOUND_RECORD, ROOT_ID, TreeNodeInfo,
-} from './ITree';
-import { CascadeSelection, CascadeSelectionTypes } from '../../../../types';
-import { CompositeKeysMap } from './CompositeKeysMap';
-
-export abstract class EditableTree<TItem, TId> extends BaseTree<TItem, TId> {
-    public patch(items: TItem[], isDeletedProp?: keyof TItem, comparator?: ItemsComparator<TItem>): ITree<TItem, TId> {
-        if (!items || items.length === 0) {
-            return this;
-        }
-
-        const newById = this.cloneMap(this.byId);
-        const newByParentId = this.cloneMap(this.byParentId); // shallow clone, still need to copy arrays inside!
-
-        let isPatched = false;
-        items.forEach((item) => {
-            const id = this.getId(item);
-            const existingItem = this.byId.get(id);
-            const parentId = this.getParentId(item);
-
-            if (isDeletedProp && item[isDeletedProp]) {
-                const children = [...(newByParentId.get(parentId) ?? [])];
-                newByParentId.set(parentId, this.deleteFromChildren(id, children));
-                newByParentId.delete(id);
-                newById.delete(id);
-                isPatched = true;
-                return;
-            }
-
-            if (!existingItem || existingItem !== item) {
-                newById.set(id, item);
-                const existingItemParentId = existingItem ? this.getParentId(existingItem) : undefined;
-                if (!existingItem || parentId !== existingItemParentId) {
-                    const children = newByParentId.get(parentId) ?? [];
-
-                    newByParentId.set(parentId, this.patchChildren(children, { existingItem, newItem: item }, comparator, newById));
-
-                    if (existingItem && existingItemParentId !== parentId) {
-                        const prevParentChildren = this.byParentId.get(existingItemParentId) ?? [];
-                        newByParentId.set(existingItemParentId, this.deleteFromChildren(id, prevParentChildren));
-                    }
-                }
-                isPatched = true;
-            }
-        });
-
-        if (!isPatched) {
-            return this;
-        }
-
-        const newNodeInfoById = this.newMap<TId, TreeNodeInfo>();
-
-        for (const [parentId, ids] of newByParentId) {
-            newNodeInfoById.set(parentId, { count: ids.length });
-        }
-
-        return this.newInstance(this.params, newById, newByParentId, newNodeInfoById);
-    }
-
-    public mergeItems(tree: ITree<TItem, TId>): ITree<TItem, TId> {
-        if (this === tree) {
-            return this;
-        }
-
-        const newById = this.cloneMap(this.byId);
-        tree.forEachItem((item, id) => {
-            if (!newById.has(id) || newById.get(id) !== item) {
-                newById.set(id, item);
-            }
-        });
-
-        return this.newInstance(this.params, newById, this.byParentId, this.nodeInfoById);
-    }
-
-    public cascadeSelection(
-        currentSelection: TId[] | null,
-        selectedId: TId,
-        isSelected: boolean,
-        options: {
-            isSelectable?: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;
-            cascade?: CascadeSelection;
-        } = {},
-    ) {
-        const optionsWithDefaults = { isSelectable: BaseTree.truePredicate, cascade: true, ...options };
-        let selectedIdsMap = this.newMap<TId, boolean>();
-
-        const isImplicitMode = options.cascade === CascadeSelectionTypes.IMPLICIT;
-        if (!(selectedId === ROOT_ID && isImplicitMode)) {
-            (currentSelection ?? []).forEach((id) => selectedIdsMap.set(id, true));
-        }
-
-        const treeIsLoaded = this.byParentId.size !== 0;
-        // If clear items while tree is not loaded yet (while clearing tags of PickerInput before opening body).
-        if (!treeIsLoaded && !isSelected) {
-            selectedIdsMap = this.clearIfTreeNotLoaded(selectedIdsMap, selectedId, optionsWithDefaults.isSelectable);
-        }
-
-        if (treeIsLoaded && !optionsWithDefaults.cascade) {
-            selectedIdsMap = this.simpleSelection(selectedIdsMap, selectedId, isSelected, optionsWithDefaults.isSelectable);
-        }
-
-        if (treeIsLoaded && (optionsWithDefaults.cascade === true || optionsWithDefaults.cascade === CascadeSelectionTypes.EXPLICIT)) {
-            selectedIdsMap = this.explicitCascadeSelection(selectedIdsMap, selectedId, isSelected, optionsWithDefaults.isSelectable);
-        }
-
-        if (treeIsLoaded && optionsWithDefaults.cascade === CascadeSelectionTypes.IMPLICIT) {
-            selectedIdsMap = this.implicitCascadeSelection(selectedIdsMap, selectedId, isSelected, optionsWithDefaults.isSelectable);
-        }
-
-        const result = [];
-        for (const [id, value] of selectedIdsMap) {
-            value && result.push(id);
-        }
-
-        return result;
-    }
-
-    private clearIfTreeNotLoaded(
-        selectedIdsMap: CompositeKeysMap<TId, boolean> | Map<TId, boolean>,
-        selectedId: TId,
-        isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean,
-    ) {
-        if (selectedId !== ROOT_ID) {
-            const item = this.getById(selectedId);
-            if (isSelectable(selectedId, item)) {
-                selectedIdsMap.delete(selectedId);
-            }
-        } else {
-            for (const [selectedItemId, isItemSelected] of selectedIdsMap) {
-                const selectedItem = this.getById(selectedItemId);
-                if (isItemSelected && isSelectable(selectedItemId, selectedItem)) {
-                    selectedIdsMap.delete(selectedItemId);
-                }
-            }
-        }
-        return selectedIdsMap;
-    }
-
-    private forEachChildren(
-        action: (id: TId) => void,
-        isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean,
-        parentId?: TId,
-        includeParent: boolean = true,
-    ) {
-        this.forEach(
-            (item, id) => {
-                if (item && isSelectable(id, item)) {
-                    action(id);
-                }
-            },
-            { parentId: parentId, includeParent },
-        );
-    }
-
-    private simpleSelection(
-        selectedIdsMap: CompositeKeysMap<TId, boolean> | Map<TId, boolean>,
-        selectedId: TId,
-        isSelected: boolean,
-        isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean,
-    ) {
-        if (isSelected) {
-            if (selectedId !== ROOT_ID) {
-                selectedIdsMap.set(selectedId, true);
-            } else {
-                for (const [id, item] of this.byId) {
-                    if (isSelectable(id, item)) {
-                        selectedIdsMap.set(id, true);
-                    }
-                }
-            }
-            return selectedIdsMap;
-        }
-
-        if (selectedId !== ROOT_ID) {
-            selectedIdsMap.delete(selectedId);
-        } else {
-            for (const [selectedItemId, isItemSelected] of selectedIdsMap) {
-                if (isItemSelected) {
-                    this.actForSelectable((id) => selectedIdsMap.delete(id), isSelectable, selectedItemId);
-                }
-            }
-            return selectedIdsMap;
-        }
-
-        return selectedIdsMap;
-    }
-
-    private actForSelectable(
-        action: (id: TId) => void,
-        isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean,
-        id: TId,
-    ) {
-        const item = this.getById(id);
-        if (isSelectable(id, item)) {
-            action(id);
-        }
-    }
-
-    private explicitCascadeSelection(
-        selectedIdsMap: CompositeKeysMap<TId, boolean> | Map<TId, boolean>,
-        selectedId: TId,
-        isSelected: boolean,
-        isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean,
-    ) {
-        if (isSelected) {
-            if (selectedId !== ROOT_ID) {
-                selectedIdsMap.set(selectedId, true);
-            }
-            // check all children recursively
-            this.forEachChildren((id) => id !== ROOT_ID && selectedIdsMap.set(id, true), isSelectable, selectedId);
-            return this.checkParentsWithFullCheck(selectedIdsMap, selectedId, isSelectable);
-        }
-
-        if (selectedId !== ROOT_ID) {
-            selectedIdsMap.delete(selectedId);
-        }
-
-        // uncheck all children recursively
-        this.forEachChildren((id) => selectedIdsMap.delete(id), isSelectable, selectedId);
-
-        this.getParentIdsRecursive(selectedId).forEach((parentId) => selectedIdsMap.delete(parentId));
-
-        return selectedIdsMap;
-    }
-
-    private implicitCascadeSelection(
-        selectedIdsMap: CompositeKeysMap<TId, boolean> | Map<TId, boolean>,
-        selectedId: TId,
-        isSelected: boolean,
-        isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean,
-    ) {
-        if (isSelected) {
-            if (selectedId !== ROOT_ID) {
-                selectedIdsMap.set(selectedId, true);
-            }
-            // for implicit mode, it is required to remove explicit check from children,
-            // if parent is checked
-            this.forEachChildren((id) => selectedIdsMap.delete(id), isSelectable, selectedId, false);
-            if (selectedId === ROOT_ID) {
-                const childrenIds = this.getChildrenIdsByParentId(selectedId);
-
-                // if selectedId is undefined and it is selected, that means selectAll
-                childrenIds.forEach((id) => selectedIdsMap.set(id, true));
-            }
-            // check parents if all children are checked
-            return this.checkParentsWithFullCheck(selectedIdsMap, selectedId, isSelectable, true);
-        }
-
-        if (selectedId !== ROOT_ID) {
-            selectedIdsMap.delete(selectedId);
-        }
-
-        const selectNeighboursOnly = (itemId: TId) => {
-            const item = this.getById(itemId);
-            if (item === NOT_FOUND_RECORD) {
-                return;
-            }
-
-            const parentId = this.getParentId(item);
-            const parents = this.getParentIdsRecursive(itemId);
-            // if some parent is checked, it is required to check all children explicitly,
-            // except unchecked one.
-            const someParentIsChecked = parents.some((parent) => selectedIdsMap.get(parent));
-            this.getChildrenIdsByParentId(parentId).forEach((id) => {
-                if (itemId !== id && someParentIsChecked) {
-                    selectedIdsMap.set(id, true);
-                }
-            });
-            selectedIdsMap.delete(parentId);
-        };
-
-        if (selectedId !== ROOT_ID) {
-            const parents = this.getParentIdsRecursive(selectedId);
-            [selectedId, ...parents.reverse()].forEach(selectNeighboursOnly);
-        }
-        return selectedIdsMap;
-    }
-
-    private checkParentsWithFullCheck(
-        selectedIdsMap: CompositeKeysMap<TId, boolean> | Map<TId, boolean>,
-        selectedId: TId,
-        isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean,
-        removeExplicitChildrenSelection?: boolean,
-    ) {
-        this.getParentIdsRecursive(selectedId)
-            .reverse()
-            .forEach((parentId) => {
-                const childrenIds = this.getChildrenIdsByParentId(parentId);
-                if (childrenIds && childrenIds.every((childId) => selectedIdsMap.has(childId))) {
-                    if (parentId !== ROOT_ID) {
-                        selectedIdsMap.set(parentId, true);
-                    }
-                    if (removeExplicitChildrenSelection) {
-                        this.forEachChildren((id) => selectedIdsMap.delete(id), isSelectable, parentId, false);
-                    }
-                }
-            });
-        return selectedIdsMap;
-    }
-
-    private deleteFromChildren(id: TId, children: TId[]) {
-        const foundIndex = children.findIndex((childId) => childId === id);
-        if (foundIndex !== -1) {
-            children.splice(foundIndex, 1);
-        }
-
-        return children;
-    }
-
-    private patchChildren(
-        children: TId[] | undefined,
-        { existingItem, newItem }: { existingItem: TItem | undefined; newItem: TItem },
-        comparator: ItemsComparator<TItem>,
-        byId: IMap<TId, TItem>,
-    ) {
-        const id = this.getId(newItem);
-        const parentId = this.getParentId(newItem);
-        const prevParentId = existingItem ? this.getParentId(existingItem) : undefined;
-
-        if (!children || children === this.byParentId.get(parentId)) {
-            children = children ? [...children] : [];
-        }
-
-        if ((!existingItem || (existingItem && parentId !== prevParentId)) && comparator) {
-            return this.pasteItemIntoChildrenList(newItem, children, comparator, byId);
-        }
-
-        children.push(id);
-        return children;
-    }
-
-    private pasteItemIntoChildrenList(item: TItem, children: TId[], comparator: ItemsComparator<TItem>, byId: IMap<TId, TItem>) {
-        const id = this.getId(item);
-        if (!children.length) {
-            return [id];
-        }
-
-        // paste item should be the second argument
-        const lessOrEqualPosition = children.findIndex((itemId) => comparator(item, byId.get(itemId)) <= 0);
-        const position = lessOrEqualPosition === -1 ? children.length : lessOrEqualPosition;
-
-        children.splice(position, 0, id);
-        return children;
-    }
-}
diff --git a/uui-core/src/data/processing/views/tree/ITree.ts b/uui-core/src/data/processing/views/tree/ITree.ts
index 4e18a50c62..7c1d3062c9 100644
--- a/uui-core/src/data/processing/views/tree/ITree.ts
+++ b/uui-core/src/data/processing/views/tree/ITree.ts
@@ -1,95 +1,45 @@
-import {
-    DataSourceState, SortingOption, DataRowPathItem, CascadeSelection,
-} from '../../../../types';
-import { LazyListViewProps } from '../LazyListView';
-import { CompositeKeysMap } from './CompositeKeysMap';
-
-export const ROOT_ID: undefined = undefined;
-export const NOT_FOUND_RECORD = Symbol('NOT_FOUND_RECORD');
-
-export interface ApplyFilterOptions<TItem, TId, TFilter> extends Pick<DataSourceState<TFilter, TId>, 'filter'> {
-    getFilter?: (filter: TFilter) => (item: TItem) => boolean;
-}
-
-export interface ApplySearchOptions<TItem, TId, TFilter> extends Pick<DataSourceState<TFilter, TId>, 'search'> {
-    getSearchFields?: (item: TItem) => string[];
-    sortSearchByRelevance?: boolean;
-}
-
-export interface ApplySortOptions<TItem, TId, TFilter> extends Pick<DataSourceState<TFilter, TId>, 'sorting'> {
-    sortBy?(item: TItem, sorting: SortingOption): any;
-}
-
-export interface TreeNodeInfo {
-    count?: number;
-    totalCount?: number;
-}
-
-export interface LoadTreeOptions<TItem, TId, TFilter>
-    extends Pick<LazyListViewProps<TItem, TId, TFilter>, 'api' | 'getChildCount' | 'filter' | 'fetchStrategy' | 'flattenSearchResults'> {
-    loadAllChildren?(id: TId): boolean;
-    isLoadStrict?: boolean;
-    isFolded?: (item: TItem) => boolean;
+import { EMPTY, FULLY_LOADED, NOT_FOUND_RECORD, PARTIALLY_LOADED } from './constants';
+import { ITreeNodeInfo, ITreeParams } from './treeStructure/types';
+
+/**
+ * ITree node loading/state status.
+ */
+export type ITreeNodeStatus = typeof FULLY_LOADED | typeof PARTIALLY_LOADED | typeof EMPTY;
+
+/**
+ * Items, status and state information, like count/assumedCount/totalCount of the ITree node.
+ */
+export interface ITreeItemsInfo<TId> extends ITreeNodeInfo {
+    /**
+     * Tree node IDs.
+     */
+    ids: TId[];
+    /**
+     * ITree node loading/state status.
+     */
+    status: ITreeNodeStatus;
 }
 
-export interface TreeParams<TItem, TId> {
-    getId?(item: TItem): TId;
-    getParentId?(item: TItem): TId | undefined;
-    complexIds?: boolean;
-}
-
-export type ItemsComparator<TItem> = (newItem: TItem, existingItem: TItem) => number;
-
+/**
+ * Proxy interface for a tree-like structure.
+ * It is library/data-structure shape agnostic.
+ * It provides a flexible way to represent existing data in a tree-like shape for the UUI internal usage, without repacking data in some specific form.
+ */
 export interface ITree<TItem, TId> {
-    clearStructure(): ITree<TItem, TId>;
-    getRootIds(): TId[];
-    getRootItems(): TItem[];
+    /**
+     * Provides a tree configuration.
+     */
+    getParams(): ITreeParams<TItem, TId>;
+
+    /**
+     * Provides item's children and count/totalCount/assumedCount/status of its node.
+     * @param parentId - id of an item, which children info should be returned.
+     */
+    getItems(parentId?: TId): ITreeItemsInfo<TId>;
+
+    /**
+     * Item getter. Provides access to the item by its ID.
+     * @param id - ID of an item to be returned.
+     */
     getById(id: TId): TItem | typeof NOT_FOUND_RECORD;
-    getChildren(item: TItem): TItem[];
-    getChildrenByParentId(parentId: TId): TItem[];
-    getChildrenIdsByParentId(parentId: TId): TId[];
-    getParentIdsRecursive(id: TId): TId[];
-    getParents(id: TId): TItem[];
-    getPathById(id: TId): DataRowPathItem<TId, TItem>[];
-    getPathItem(item: TItem): DataRowPathItem<TId, TItem>;
-    getNodeInfo(id: TId): TreeNodeInfo;
-    isFlatList(): boolean;
-
-    patch(items: TItem[], isDeletedProp?: keyof TItem, comparator?: ItemsComparator<TItem>): ITree<TItem, TId>;
-    mergeItems(tree: ITree<TItem, TId>): ITree<TItem, TId>;
-
-    cascadeSelection(
-        currentSelection: TId[],
-        selectedId: TId | undefined,
-        isSelected: boolean,
-        options?: {
-            isSelectable?: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;
-            cascade?: CascadeSelection;
-        }
-    ): TId[];
-
-    load<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, value: Readonly<DataSourceState>, withNestedChildren?: boolean): Promise<ITree<TItem, TId>>;
-
-    loadMissing<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, value: Readonly<DataSourceState>): Promise<ITree<TItem, TId>>;
-
-    loadMissingIdsAndParents<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, idsToLoad: TId[]): Promise<ITree<TItem, TId>>;
-
-    getTotalRecursiveCount(): number;
-    forEach(
-        action: (item: TItem, id: TId, parentId: TId, stop: () => void) => void,
-        options?: {
-            direction?: 'bottom-up' | 'top-down';
-            parentId?: TId;
-            includeParent?: boolean;
-        }
-    ): void;
-    forEachItem(action: (item: TItem, id: TId, parentId: TId) => void): void;
-    computeSubtotals<TSubtotals>(
-        get: (item: TItem, hasChildren: boolean) => TSubtotals,
-        add: (a: TSubtotals, b: TSubtotals) => TSubtotals
-    ): CompositeKeysMap<TId | undefined, TSubtotals> | Map<TId | undefined, TSubtotals>;
-
-    filter<TFilter>(options: ApplyFilterOptions<TItem, TId, TFilter>): ITree<TItem, TId>;
-    search<TFilter>(options: ApplySearchOptions<TItem, TId, TFilter>): ITree<TItem, TId>;
-    sort<TFilter>(options: ApplySortOptions<TItem, TId, TFilter>): ITree<TItem, TId>;
 }
diff --git a/uui-core/src/data/processing/views/tree/ItemsAccessor.ts b/uui-core/src/data/processing/views/tree/ItemsAccessor.ts
new file mode 100644
index 0000000000..81e55e7fca
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/ItemsAccessor.ts
@@ -0,0 +1,20 @@
+import { ItemsMap } from './ItemsMap';
+import { NOT_FOUND_RECORD } from './constants';
+import { IItemsAccessor } from './treeStructure/types';
+
+export class ItemsAccessor<TItem, TId> implements IItemsAccessor<TItem, TId> {
+    constructor(
+        private itemsMap: ItemsMap<TId, TItem>,
+    ) {}
+
+    get = (id: TId) =>
+        this.itemsMap.has(id) ? this.itemsMap.get(id) : NOT_FOUND_RECORD;
+
+    forEach(action: (item: TItem, id: TId) => void): void {
+        this.itemsMap.forEach(action);
+    }
+
+    public static toItemsAccessor<TId, TItem>(itemsMap: ItemsMap<TId, TItem>) {
+        return new ItemsAccessor(itemsMap);
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/ItemsMap.ts b/uui-core/src/data/processing/views/tree/ItemsMap.ts
new file mode 100644
index 0000000000..e11cc360fc
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/ItemsMap.ts
@@ -0,0 +1,114 @@
+import { IImmutableMap, IMap } from '../../../../types/objects';
+import { cloneMap, newMap } from './helpers/map';
+
+export interface ItemsMapParams<TItem, TId> {
+    getId: (item: TItem) => TId;
+    complexIds?: boolean;
+}
+
+export class ItemsMap<TId, TItem> implements IImmutableMap<TId, TItem> {
+    private _itemsMap: IMap<TId, TItem>;
+    private params: ItemsMapParams<TItem, TId>;
+
+    constructor(
+        itemsMap: IMap<TId, TItem>,
+        params: ItemsMapParams<TItem, TId>,
+    );
+
+    constructor(itemsMap: ItemsMap<TId, TItem>);
+
+    constructor(...args: [IMap<TId, TItem>, ItemsMapParams<TItem, TId>] | [ItemsMap<TId, TItem>]) {
+        if (args.length === 1) {
+            const [itemsMap] = args;
+            this.params = itemsMap.params;
+            this._itemsMap = cloneMap(itemsMap._itemsMap);
+        } else {
+            const [map, params] = args;
+            this.params = params;
+            this._itemsMap = map ? cloneMap(map) : newMap(params);
+        }
+    }
+
+    get(id: TId) {
+        return this._itemsMap.has(id) ? this._itemsMap.get(id) : undefined;
+    }
+
+    has(id: TId) {
+        return this._itemsMap.has(id);
+    }
+
+    set(...args: [TId, TItem] | [TId]): ItemsMap<TId, TItem> {
+        const [id, item] = args;
+        let itemsMap = cloneMap(this._itemsMap);
+
+        if (args.length > 1) {
+            itemsMap.set(id, item);
+        } else {
+            itemsMap = itemsMap.set(id);
+        }
+
+        return new ItemsMap(itemsMap, this.params);
+    }
+
+    delete(id: TId) {
+        const itemsMap = cloneMap(this._itemsMap);
+        itemsMap.delete(id);
+        return new ItemsMap(itemsMap, this.params);
+    }
+
+    forEach(action: (item: TItem, id: TId) => void) {
+        for (const [id] of this._itemsMap) {
+            action(this.get(id), id);
+        }
+    }
+
+    clear() {
+        return new ItemsMap(newMap<TId, TItem>(this.params), this.params);
+    }
+
+    setItems(items: TItem[]) {
+        let updated = false;
+        const itemsLink = cloneMap(this._itemsMap);
+
+        items.forEach((item) => {
+            const isExistingItem = itemsLink.has(this.params.getId(item));
+
+            if (!isExistingItem || (isExistingItem && item !== itemsLink.get(this.params.getId(item)))) {
+                itemsLink.set(this.params.getId(item), item);
+                updated = true;
+            }
+        });
+
+        if (updated) {
+            return new ItemsMap(itemsLink, this.params);
+        }
+
+        return this;
+    }
+
+    get size() {
+        return this._itemsMap.size;
+    }
+
+    [Symbol.iterator]() {
+        return this._itemsMap[Symbol.iterator]();
+    }
+
+    public static fromObject<TId extends symbol | string | number, TItem>(
+        obj: Record<TId, TItem>,
+        params: ItemsMapParams<TItem, TId>,
+    ) {
+        const itemsMap = newMap<TId, TItem>(params);
+        for (const [, value] of Object.entries<TItem>(obj)) {
+            itemsMap.set(params.getId(value), value);
+        }
+
+        return new ItemsMap<TId, TItem>(itemsMap, params);
+    }
+
+    public static blank<TId, TItem>(
+        params: ItemsMapParams<TItem, TId>,
+    ) {
+        return new ItemsMap<TId, TItem>(newMap<TId, TItem>(params), params);
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/ItemsStatusCollector.ts b/uui-core/src/data/processing/views/tree/ItemsStatusCollector.ts
new file mode 100644
index 0000000000..b1e15ef240
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/ItemsStatusCollector.ts
@@ -0,0 +1,84 @@
+import { IMap, LazyDataSourceApi } from '../../../../types';
+import { ItemsMap } from './ItemsMap';
+import { FAILED_RECORD, LOADED_RECORD, LOADING_RECORD, NOT_FOUND_RECORD, PENDING_RECORD } from './constants';
+import { ITreeParams } from './exposed';
+import { newMap } from './helpers';
+import { RecordStatus } from './types';
+
+export class ItemsStatusCollector<TItem, TId, TFilter = any> {
+    private itemsStatusMap: IMap<TId, RecordStatus>;
+    constructor(
+        itemsStatusMap: IMap<TId, RecordStatus>,
+        private params: ITreeParams<TItem, TId>,
+    ) {
+        this.itemsStatusMap = itemsStatusMap ?? newMap(params);
+    }
+
+    public setPending(ids: TId[]) {
+        this.setStatus(ids, PENDING_RECORD);
+    }
+
+    public setLoading(ids: TId[]) {
+        this.setStatus(ids, LOADING_RECORD);
+    }
+
+    public setLoaded(ids: TId[]) {
+        this.setStatus(ids, LOADED_RECORD);
+    }
+
+    public setFailed(ids: TId[]) {
+        this.setStatus(ids, FAILED_RECORD);
+    }
+
+    public setNotFound(ids: TId[]) {
+        this.setStatus(ids, NOT_FOUND_RECORD);
+    }
+
+    public getItemStatus = (itemsMap: ItemsMap<TId, TItem>) => (id: TId) => {
+        if (itemsMap.has(id)) {
+            return LOADED_RECORD;
+        }
+
+        const status = this.itemsStatusMap.get(id) ?? NOT_FOUND_RECORD;
+        if (status === LOADED_RECORD) {
+            return LOADING_RECORD;
+        }
+
+        return status;
+    };
+
+    public watch(api: LazyDataSourceApi<TItem, TId, TFilter>): LazyDataSourceApi<TItem, TId, TFilter> {
+        return async (request, context) => {
+            if (request.ids) {
+                try {
+                    this.setLoading(request.ids);
+                    const result = await api(request, context);
+                    const loadedIds: Array<[TId, TId]> = (result.items ?? []).map((item) => {
+                        const id = this.params.getId(item);
+                        return [id, id];
+                    });
+
+                    this.setLoaded(loadedIds.map(([id]) => id));
+
+                    const loadedIdsMap = new Map<TId, TId>(loadedIds);
+                    const notLoadedIds = request.ids.filter((id) => !loadedIdsMap.has(id));
+
+                    this.setNotFound(notLoadedIds);
+
+                    return result;
+                } catch (e) {
+                    this.setFailed(request.ids);
+                    throw e;
+                }
+            }
+
+            return await api(request, context);
+        };
+    }
+
+    private setStatus(ids: TId[], status: RecordStatus) {
+        ids.forEach((id) => {
+            this.itemsStatusMap.set(id, status);
+        });
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/ItemsStorage.ts b/uui-core/src/data/processing/views/tree/ItemsStorage.ts
new file mode 100644
index 0000000000..c5539ed49a
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/ItemsStorage.ts
@@ -0,0 +1,55 @@
+import { ItemsMap, ItemsMapParams } from './ItemsMap';
+
+export type OnUpdate<TId, TItem> = (newItemsMap: ItemsMap<TId, TItem>) => void;
+
+export interface ModificationOptions {
+    reset?: boolean;
+    on?: 'load' | 'patch'
+}
+
+export interface ItemsStorageParams<TItem, TId> {
+    items?: TItem[];
+    params: ItemsMapParams<TItem, TId>;
+}
+
+/**
+ * Storage of items with subscriptions. Enables sharing loaded data between multiple consumers.
+ * @internal For internal usage only. API can be changed in future releases.
+ */
+export class ItemsStorage<TItem, TId> {
+    private subs: Map<OnUpdate<TId, TItem>, void> = new Map();
+    private _itemsMap: ItemsMap<TId, TItem>;
+
+    constructor({ items, params }: ItemsStorageParams<TItem, TId>) {
+        this._itemsMap = new ItemsMap(
+            null,
+            params,
+        );
+        if (items?.length) {
+            this.setItems(items);
+        }
+    }
+
+    subscribe(onUpdate: OnUpdate<TId, TItem>) {
+        this.subs.set(onUpdate);
+        onUpdate(this._itemsMap);
+        return () => this.subs.delete(onUpdate);
+    }
+
+    setItems = (items: TItem[], options?: ModificationOptions) => {
+        const itemsMap = options?.reset
+            ? this._itemsMap.clear().setItems(items)
+            : this._itemsMap.setItems(items);
+
+        if (itemsMap !== this._itemsMap) {
+            this._itemsMap = itemsMap;
+            this.subs.forEach((_, onUpdate) => onUpdate(itemsMap));
+        }
+
+        return this._itemsMap;
+    };
+
+    public getItemsMap() {
+        return this._itemsMap;
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/LoadableTree.ts b/uui-core/src/data/processing/views/tree/LoadableTree.ts
deleted file mode 100644
index 4e48732360..0000000000
--- a/uui-core/src/data/processing/views/tree/LoadableTree.ts
+++ /dev/null
@@ -1,264 +0,0 @@
-import isEqual from 'lodash.isequal';
-import {
-    DataSourceState, IMap, LazyDataSourceApiRequestContext, LazyDataSourceApiRequestRange,
-} from '../../../../types';
-import { EditableTree } from './EditableTree';
-import { ITree, LoadTreeOptions, TreeNodeInfo } from './ITree';
-
-export abstract class LoadableTree<TItem, TId> extends EditableTree<TItem, TId> {
-    public async load<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, value: Readonly<DataSourceState>, withNestedChildren: boolean = true) {
-        let tree = await this.loadMissing(options, value, withNestedChildren);
-        const checked = (value.checked ?? []);
-        const missing = value.selectedId === null || value.selectedId === undefined ? checked : checked.concat(value.selectedId);
-        tree = await tree.loadMissingIdsAndParents(options, missing);
-        return tree;
-    }
-
-    public async loadMissingIdsAndParents<TFilter>(options: LoadTreeOptions<TItem, TId, TFilter>, idsToLoad: TId[]): Promise<ITree<TItem, TId>> {
-        let byId = this.byId;
-        let iteration = 0;
-        let prevMissingIds = new Set<TId>();
-        while (true) {
-            const missingIds = new Set<TId>();
-
-            if (idsToLoad && idsToLoad.length > 0) {
-                idsToLoad.forEach((id) => {
-                    if (!byId.has(id)) {
-                        missingIds.add(id);
-                    }
-                });
-            }
-            if (this.params.getParentId) {
-                for (const [, item] of byId) {
-                    const parentId = this.getParentId(item);
-                    if (parentId != null && !byId.has(parentId)) {
-                        missingIds.add(parentId);
-                    }
-                }
-            }
-
-            if (missingIds.size === 0) {
-                break;
-            } else {
-                const ids = Array.from(missingIds);
-                const response = await options.api({ ids });
-
-                if (response.items.length !== ids.length) {
-                    console.error(`LazyTree: api does not returned requested items. Check that you handle 'ids' argument correctly.
-                        Read more here: https://github.com/epam/UUI/issues/89`);
-                }
-
-                // Clone before first update
-                byId = byId === this.byId ? this.cloneMap(byId) : byId;
-
-                response.items.forEach((item) => {
-                    const id = item ? this.getId(item) : null;
-                    if (id !== null) {
-                        byId.set(id, item);
-                    }
-                });
-
-                if (prevMissingIds.size === missingIds.size && isEqual(prevMissingIds, missingIds)) {
-                    break;
-                }
-
-                prevMissingIds = new Set([...missingIds]);
-            }
-            iteration++;
-
-            if (iteration > 1000) {
-                throw new Error('LazyTree: More than 1000 iterations are made to load required items and their parents by ID. Check your api implementation');
-            }
-        }
-        if (byId === this.byId) {
-            return this;
-        } else {
-            return this.newInstance(this.params, byId, this.byParentId, this.nodeInfoById);
-        }
-    }
-
-    public async loadMissing<TFilter>(
-        options: LoadTreeOptions<TItem, TId, TFilter>,
-        value: Readonly<DataSourceState>,
-        withNestedChildren: boolean = true,
-    ): Promise<ITree<TItem, TId>> {
-        const requiredRowsCount = value.topIndex + value.visibleCount;
-
-        let byId: IMap<TId, TItem> = this.byId;
-        let byParentId = this.byParentId;
-        let nodeInfoById = this.nodeInfoById;
-
-        const flatten = value.search && options.flattenSearchResults;
-
-        const loadRecursive = async (parentId: TId, parent: TItem, parentLoadAll: boolean, remainingRowsCount: number) => {
-            let recursiveLoadedCount = 0;
-            const currentIds = byParentId.get(parentId);
-            const currentNodeInfo = this.nodeInfoById.get(parentId);
-            const { ids, nodeInfo, loadedItems } = await this.loadItems(currentIds, currentNodeInfo, options, parentId, parent, value, remainingRowsCount, parentLoadAll);
-
-            if (ids !== currentIds || nodeInfo !== currentNodeInfo) {
-                byParentId = byParentId === this.byParentId ? this.cloneMap(byParentId) : byParentId;
-                byParentId.set(parentId, ids);
-                nodeInfoById = nodeInfoById === this.nodeInfoById ? this.cloneMap(nodeInfoById) : nodeInfoById;
-                nodeInfoById.set(parentId, nodeInfo);
-            }
-
-            recursiveLoadedCount += ids.length;
-
-            if (loadedItems.length > 0) {
-                // Clone the map if it's not cloned yet
-                byId = byId === this.byId ? this.cloneMap(byId) : byId;
-
-                loadedItems.forEach((item) => {
-                    const id = this.getId(item);
-                    byId.set(id, item);
-                });
-            }
-
-            if (!flatten && options.getChildCount) {
-                const childrenPromises: Promise<any>[] = [];
-
-                for (let n = 0; n < ids.length; n++) {
-                    const id = ids[n];
-                    const item = byId.get(id);
-
-                    let isFolded = false;
-                    let hasChildren = false;
-
-                    if (options.getChildCount) {
-                        // not a root node
-                        const childrenCount = options.getChildCount(item);
-                        if (childrenCount) {
-                            // foldable
-                            isFolded = options.isFolded(item);
-                            hasChildren = true;
-                        }
-                    }
-
-                    const loadAllChildren = hasChildren && options.loadAllChildren && options.loadAllChildren(id);
-                    const loadAll = withNestedChildren ? parentLoadAll || loadAllChildren : loadAllChildren;
-                    remainingRowsCount--;
-
-                    if (hasChildren && ((!isFolded && remainingRowsCount > 0) || loadAll)) {
-                        const childPromise = loadRecursive(id, item, loadAll, remainingRowsCount);
-
-                        childrenPromises.push(childPromise);
-
-                        if (options.fetchStrategy === 'sequential') {
-                            const loadedCount = await childPromise;
-                            remainingRowsCount -= loadedCount;
-                            recursiveLoadedCount += loadedCount;
-                        }
-                    }
-                }
-
-                const childCounts = await Promise.all(childrenPromises);
-                if (options.fetchStrategy === 'parallel') {
-                    const recursiveChildrenCount = childCounts.reduce((a, b) => a + b, 0);
-                    recursiveLoadedCount += recursiveChildrenCount;
-                    remainingRowsCount -= recursiveChildrenCount;
-                }
-            }
-
-            return recursiveLoadedCount;
-        };
-
-        await loadRecursive(undefined, undefined, options?.loadAllChildren?.(undefined), requiredRowsCount);
-
-        return this.newInstance(this.params, byId, byParentId, nodeInfoById);
-    }
-
-    private async loadItems<TFilter>(
-        inputIds: TId[],
-        inputNodeInfo: TreeNodeInfo,
-        options: LoadTreeOptions<TItem, TId, TFilter>,
-        parentId: TId,
-        parent: TItem,
-        value: Readonly<DataSourceState>,
-        requiredRowsCount: number,
-        loadAll: boolean,
-    ) {
-        let ids = inputIds || [];
-        let nodeInfo = inputNodeInfo || {};
-        const loadedItems: TItem[] = [];
-
-        const flatten = value.search && options.flattenSearchResults;
-
-        // Selection cascading forces to load all nodes under particular node
-        if (loadAll) {
-            requiredRowsCount = Number.MAX_SAFE_INTEGER;
-        }
-
-        const missingCount = requiredRowsCount - ids.length;
-
-        const availableCount = nodeInfo.count != null ? nodeInfo.count - ids.length : missingCount;
-
-        const range: LazyDataSourceApiRequestRange = { from: ids.length };
-
-        let skipRequest = false;
-        if (!loadAll) {
-            range.count = missingCount;
-            skipRequest = options.isLoadStrict ? true : skipRequest;
-        }
-
-        if (missingCount > 0 && availableCount > 0 && !skipRequest) {
-            // Need to load additional items in the current layer
-            const requestContext: LazyDataSourceApiRequestContext<TItem, TId> = {};
-
-            if (!flatten) {
-                if (parent != null) {
-                    requestContext.parentId = parentId;
-                    requestContext.parent = parent;
-                } else {
-                    // in flatten mode, we don't set parent and parentId even for root - as we don't want to limit results to top-level nodes only
-                    requestContext.parentId = null;
-                    requestContext.parent = null;
-                }
-            }
-
-            const response = await options.api(
-                {
-                    sorting: value.sorting,
-                    search: value.search,
-                    filter: options.filter,
-                    range,
-                    page: value.page,
-                    pageSize: value.pageSize,
-                },
-                requestContext,
-            );
-
-            const from = response.from == null ? range.from : response.from;
-
-            if (response.items.length) {
-                ids = [...ids];
-                for (let n = 0; n < response.items.length; n++) {
-                    const item = response.items[n];
-                    loadedItems.push(item);
-                    const id = this.getId(item);
-                    ids[n + from] = id;
-                }
-            }
-
-            let newNodesCount;
-
-            if (response.count !== null && response.count !== undefined) {
-                newNodesCount = response.count;
-            } else if (response.items.length < missingCount) {
-                newNodesCount = from + response.items.length;
-            }
-
-            if (newNodesCount !== nodeInfo.count) {
-                nodeInfo = { ...nodeInfo, count: newNodesCount };
-            }
-
-            nodeInfo = { ...nodeInfo, totalCount: response.totalCount };
-        }
-
-        return {
-            ids,
-            nodeInfo,
-            loadedItems,
-        };
-    }
-}
diff --git a/uui-core/src/data/processing/views/tree/Tree.ts b/uui-core/src/data/processing/views/tree/Tree.ts
index 2a56e6a75d..bd48573109 100644
--- a/uui-core/src/data/processing/views/tree/Tree.ts
+++ b/uui-core/src/data/processing/views/tree/Tree.ts
@@ -1,163 +1,227 @@
-import { getSearchFilter } from '../../../querying';
-import { LoadableTree } from './LoadableTree';
-import {
-    ApplyFilterOptions, ApplySearchOptions, ApplySortOptions, ITree,
-} from './ITree';
-import sortBy from 'lodash.sortby';
-
-export class Tree<TItem, TId> extends LoadableTree<TItem, TId> {
-    public filter<TFilter>(options: ApplyFilterOptions<TItem, TId, TFilter>): ITree<TItem, TId> {
-        const filter = options.getFilter?.(options.filter);
-        return this.applyFilterToTree(filter);
-    }
-
-    public search<TFilter>(options: ApplySearchOptions<TItem, TId, TFilter>): ITree<TItem, TId> {
-        const search = this.buildSearchFilter(options);
-        return this.applySearchToTree(search, options.sortSearchByRelevance);
-    }
-
-    public sort<TFilter>(options: ApplySortOptions<TItem, TId, TFilter>) {
-        const sort = this.buildSorter(options);
-        const sortedItems: TItem[] = [];
-        const sortRec = (items: TItem[]) => {
-            sortedItems.push(...sort(items));
-            items.forEach((item) => {
-                const children = this.getChildren(item);
-                sortRec(children);
-            });
-        };
+import isEqual from 'lodash.isequal';
+import { CascadeSelection, CascadeSelectionTypes, DataRowPathItem, DataSourceState, IMap, LazyDataSourceApi } from '../../../../types';
+import { ITree } from './ITree';
+import { FULLY_LOADED, NOT_FOUND_RECORD } from './constants';
+import { FetchingHelper } from './treeStructure/helpers/FetchingHelper';
+import { ITreeNodeInfo } from './treeStructure/types';
+
+export interface LoadOptions<TItem, TId, TFilter = any> {
+    tree: ITree<TItem, TId>;
+    api: LazyDataSourceApi<TItem, TId, TFilter>;
+    getChildCount?(item: TItem): number;
+    isFolded?: (item: TItem) => boolean;
+    dataSourceState: DataSourceState<TFilter, TId>;
+    filter?: TFilter;
+    withNestedChildren?: boolean;
+}
 
-        sortRec(this.getRootItems());
-        return Tree.create({ ...this.params }, sortedItems);
-    }
+export interface LoadMissingOnCheckOptions<TItem, TId, TFilter = any> extends Omit<LoadOptions<TItem, TId, TFilter>, 'withNestedChildren'> {
+    cascadeSelection?: CascadeSelection;
+    checkedId?: TId;
+    isRoot: boolean;
+    isChecked: boolean;
+}
 
-    private buildSearchFilter<TFilter>({ search, getSearchFields }: ApplySearchOptions<TItem, TId, TFilter>) {
-        if (!search) return null;
+/**
+ * Structured result of tree records loading.
+ */
+export interface ITreeLoadResult<TItem, TId> {
+    /**
+     * Loaded records.
+     */
+    loadedItems: TItem[];
+    /**
+     * Loaded records, structured by parents IDs.
+     */
+    byParentId: IMap<TId, TId[]>;
+    /**
+     * Loading node info, like count/assumedCount/totalCount, by IDs.
+     */
+    nodeInfoById: IMap<TId, ITreeNodeInfo>;
+}
 
-        if (!getSearchFields) {
-            console.warn('[Tree] Search value is set, but options.getSearchField is not specified. Nothing to search on.');
-            return null;
+export class Tree {
+    public static getParents<TItem, TId>(id: TId, tree: ITree<TItem, TId>) {
+        const parentIds: TId[] = [];
+        let parentId = id;
+        while (true) {
+            const item = tree.getById(parentId);
+            if (item === NOT_FOUND_RECORD) {
+                break;
+            }
+            parentId = tree.getParams().getParentId?.(item);
+            if (parentId === undefined) {
+                break;
+            }
+            parentIds.unshift(parentId);
         }
-        const searchFilter = getSearchFilter(search);
-        return (i: TItem) => searchFilter(getSearchFields(i));
+        return parentIds;
     }
 
-    private buildSorter<TFilter>(options: ApplySortOptions<TItem, TId, TFilter>) {
-        const compareScalars = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare;
-        const comparers: ((a: TItem, b: TItem) => number)[] = [];
-
-        if (options.sorting) {
-            options.sorting.forEach((sortingOption) => {
-                const sortByFn = options.sortBy || ((i: TItem) => i[sortingOption.field as keyof TItem] || '');
-                const sign = sortingOption.direction === 'desc' ? -1 : 1;
-                comparers.push((a, b) => sign * compareScalars(sortByFn(a, sortingOption) + '', sortByFn(b, sortingOption) + ''));
-            });
-        }
-
-        return (items: TItem[]) => {
-            if (comparers.length === 0) {
-                return items;
+    public static getPathById<TItem, TId>(id: TId, tree: ITree<TItem, TId>): DataRowPathItem<TId, TItem>[] {
+        const foundParents = this.getParents(id, tree);
+        const path: DataRowPathItem<TId, TItem>[] = [];
+        foundParents.forEach((parentId) => {
+            const parent = tree.getById(parentId);
+            if (parent === NOT_FOUND_RECORD) {
+                return;
             }
+            const pathItem: DataRowPathItem<TId, TItem> = this.getPathItem(parent, tree);
+            path.push(pathItem);
+        });
+        return path;
+    }
 
-            const indexes = new Map<TItem, number>();
-            items.forEach((item, index) => indexes.set(item, index));
+    public static getPathItem<TItem, TId>(item: TItem, tree: ITree<TItem, TId>): DataRowPathItem<TId, TItem> {
+        const parentId = tree.getParams().getParentId?.(item);
+        const id = tree.getParams().getId(item);
 
-            const comparer = (a: TItem, b: TItem) => {
-                for (let n = 0; n < comparers.length; n++) {
-                    const compare = comparers[n];
-                    const result = compare(a, b);
-                    if (result !== 0) {
-                        return result;
-                    }
-                }
+        const { ids, count, status } = tree.getItems(parentId);
+        const lastId = ids[ids.length - 1];
 
-                // to make sort stable, compare items indices if other comparers return 0 (equal)
-                return indexes.get(a) - indexes.get(b);
-            };
+        const isLastChild = lastId !== undefined
+            && lastId === id
+            && status === FULLY_LOADED
+            && count === ids.length;
 
-            items = [...items];
-            items.sort(comparer);
-            return items;
+        return {
+            id: tree.getParams().getId(item),
+            value: item,
+            isLastChild,
         };
     }
 
-    private applyFilterToTree(isMatchingFilterFn: undefined | ((item: TItem) => number | boolean)) {
-        if (!isMatchingFilterFn) return this;
-
-        const matchedItems: TItem[] = [];
-        const applyFilterRec = (items: TItem[]) => {
-            let isSomeMatching: number | boolean = false;
-            items.forEach((item) => {
-                const isItemMatching = isMatchingFilterFn(item);
-                const isSomeChildMatching = applyFilterRec(this.getChildren(item));
-                const isMatching = isItemMatching || isSomeChildMatching;
-                if (isMatching) {
-                    matchedItems.push(item);
-                }
+    public static forEach<TItem, TId>(
+        tree: ITree<TItem, TId>,
+        action: (item: TItem, id: TId, parentId: TId, stop: () => void) => void,
+        options?: {
+            direction?: 'bottom-up' | 'top-down';
+            parentId?: TId;
+            includeParent?: boolean;
+        },
+    ) {
+        let shouldStop = false;
+        const stop = () => {
+            shouldStop = true;
+        };
 
-                if (!isSomeMatching) {
-                    isSomeMatching = isMatching;
-                }
+        options = { direction: 'top-down', parentId: undefined, ...options };
+        if (options.includeParent == null) {
+            options.includeParent = options.parentId != null;
+        }
+
+        const iterateNodes = (ids: TId[]) => {
+            if (shouldStop) return;
+            ids.forEach((id) => {
+                if (shouldStop) return;
+                const item = tree.getById(id);
+                const parentId = item !== NOT_FOUND_RECORD ? tree.getParams().getParentId?.(item) : undefined;
+                walkChildrenRec(item === NOT_FOUND_RECORD ? undefined : item, id, parentId);
             });
+        };
 
-            return isSomeMatching;
+        const walkChildrenRec = (item: TItem, id: TId, parentId: TId) => {
+            if (options.direction === 'top-down') {
+                action(item, id, parentId, stop);
+            }
+            const { ids: childrenIds } = tree.getItems(id);
+            childrenIds && iterateNodes(childrenIds);
+            if (options.direction === 'bottom-up') {
+                action(item, id, parentId, stop);
+            }
         };
 
-        applyFilterRec(this.getRootItems());
-        return Tree.create({ ...this.params }, matchedItems);
+        if (options.includeParent) {
+            iterateNodes([options.parentId]);
+        } else {
+            iterateNodes(tree.getItems(options.parentId).ids);
+        }
     }
 
-    private applySearchToTree(isMatchingSearchFn: undefined | ((item: TItem) => number | boolean), sortSearchByRelevance?: boolean) {
-        if (!isMatchingSearchFn) return this;
-
-        const matchedItems: TItem[] = [];
-        const ranks: Map<TId, number> = new Map();
-        const applySearchRec = (items: TItem[]) => {
-            let isSomeMatching: number | boolean = false;
-            items.forEach((item) => {
-                const isItemMatching = isMatchingSearchFn(item);
-                const isSomeChildMatching = applySearchRec(this.getChildren(item));
-                const isMatching = isItemMatching || isSomeChildMatching;
-                if (isMatching !== false) {
-                    matchedItems.push(item);
-                    if (typeof isMatching !== 'boolean') {
-                        const id = this.getId(item);
-                        const rank = ranks.has(id) ? Math.max(ranks.get(id), isMatching) : isMatching;
-                        ranks.set(this.getId(item), rank);
-                    }
-                }
-
-                if (!isSomeMatching) {
-                    isSomeMatching = isMatching;
-                } else if (typeof isMatching === 'number') {
-                    isSomeMatching = typeof isSomeMatching === 'number'
-                        ? Math.max(isMatching, isSomeMatching)
-                        : isMatching;
+    public static forEachChildren<TItem, TId>(
+        tree: ITree<TItem, TId>,
+        action: (id: TId) => void,
+        isSelectable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean,
+        parentId?: TId,
+        includeParent: boolean = true,
+    ) {
+        this.forEach(
+            tree,
+            (item, id) => {
+                if (item && isSelectable(id, item)) {
+                    action(id);
                 }
-            });
-
-            return isSomeMatching;
-        };
-
-        applySearchRec(this.getRootItems());
-        return Tree.create(
-            { ...this.params },
-            sortSearchByRelevance ? this.sortByRanks(matchedItems, ranks) : matchedItems,
+            },
+            { parentId: parentId, includeParent },
         );
     }
 
-    private sortByRanks = (items: TItem[], ranks: Map<TId, number>) => {
-        if (ranks.size === 0) {
-            return items;
+    public static async load<TItem, TId, TFilter = any>({
+        tree,
+        dataSourceState,
+        api,
+        getChildCount,
+        isFolded,
+        filter,
+        withNestedChildren = true,
+    }: LoadOptions<TItem, TId, TFilter>): Promise<ITreeLoadResult<TItem, TId>> {
+        return await FetchingHelper.load<TItem, TId, TFilter>({
+            tree,
+            options: {
+                api,
+                getChildCount,
+                isFolded,
+                filter: { ...dataSourceState?.filter, ...filter },
+            },
+            dataSourceState,
+            withNestedChildren,
+        });
+    }
+
+    public static async loadMissingOnCheck<TItem, TId, TFilter = any>({
+        tree,
+        dataSourceState,
+        api,
+        getChildCount,
+        isFolded,
+        filter,
+        cascadeSelection,
+        isRoot,
+        isChecked,
+        checkedId,
+    }: LoadMissingOnCheckOptions<TItem, TId, TFilter>): Promise<ITree<TItem, TId> | ITreeLoadResult<TItem, TId>> {
+        const isImplicitMode = cascadeSelection === CascadeSelectionTypes.IMPLICIT;
+
+        if (!cascadeSelection && !isRoot) {
+            return tree;
         }
-        const itemsToSort = [...items];
 
-        return sortBy(itemsToSort, (item) => {
-            const id = this.getId(item);
-            if (!ranks.has(id)) {
-                return 0;
-            }
-            return ranks.get(id) * -1;
+        const loadNestedLayersChildren = !isImplicitMode;
+        const parents = this.getParents(checkedId, tree);
+        return await FetchingHelper.load<TItem, TId, TFilter>({
+            tree,
+            options: {
+                api,
+                getChildCount,
+                isFolded,
+                filter: { ...dataSourceState?.filter, ...filter },
+                loadAllChildren: (itemId) => {
+                    if (!cascadeSelection) {
+                        return isChecked && isRoot;
+                    }
+
+                    if (isImplicitMode) {
+                        return itemId === undefined || parents.some((parent) => isEqual(parent, itemId));
+                    }
+
+                    // `isEqual` is used, because complex ids can be recreated after fetching of parents.
+                    // So, they should be compared not by reference, but by value.
+                    return isRoot || isEqual(itemId, checkedId) || (dataSourceState.search && parents.some((parent) => isEqual(parent, itemId)));
+                },
+                isLoadStrict: true,
+            },
+            dataSourceState: { ...dataSourceState, search: null },
+            withNestedChildren: loadNestedLayersChildren,
         });
-    };
+    }
 }
diff --git a/uui-core/src/data/processing/views/tree/constants.ts b/uui-core/src/data/processing/views/tree/constants.ts
new file mode 100644
index 0000000000..7cd79f8b70
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/constants.ts
@@ -0,0 +1,20 @@
+export const ROOT_ID: undefined = undefined;
+
+// ITreeNodeStatus
+export const PARTIALLY_LOADED = 'PARTIALLY_LOADED';
+export const FULLY_LOADED = 'FULLY_LOADED';
+export const EMPTY = 'EMPTY';
+
+// RecordStatus && not found item in tree
+export const NOT_FOUND_RECORD = Symbol('NOT_FOUND_RECORD');
+
+// RecordStatus
+export const PENDING_RECORD = Symbol('PENDING_RECORD');
+export const LOADING_RECORD = Symbol('LOADING_RECORD');
+export const LOADED_RECORD = Symbol('LOADED_RECORD');
+export const FAILED_RECORD = Symbol('FAILED_RECORD');
+
+export const PatchOrdering = {
+    TOP: Symbol('ORDERING_TOP'),
+    BOTTOM: Symbol('ORDERING_BOTTOM'),
+};
diff --git a/uui-core/src/data/processing/views/tree/exposed.ts b/uui-core/src/data/processing/views/tree/exposed.ts
new file mode 100644
index 0000000000..dfd5c80e31
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/exposed.ts
@@ -0,0 +1,27 @@
+export type { ITree, ITreeItemsInfo, ITreeNodeStatus } from './ITree';
+export { Tree } from './Tree';
+export type { ITreeLoadResult } from './Tree';
+export {
+    NOT_FOUND_RECORD,
+
+    PARTIALLY_LOADED,
+    FULLY_LOADED,
+    EMPTY,
+
+    FAILED_RECORD,
+    PENDING_RECORD,
+    LOADING_RECORD,
+    LOADED_RECORD,
+
+    PatchOrdering,
+} from './constants';
+export { CompositeKeysMap, newMap, cloneMap } from './helpers';
+
+export type { PatchOrderingType, RecordStatus } from './types';
+export type { ItemsMapParams } from './ItemsMap';
+export type { OnUpdate, ModificationOptions, ItemsStorageParams } from './ItemsStorage';
+export { ItemsMap } from './ItemsMap';
+export { ItemsStorage } from './ItemsStorage';
+
+export * from './treeStructure/exposed';
+export * from './hooks/exposed';
diff --git a/uui-core/src/data/processing/views/tree/helpers/comparators.ts b/uui-core/src/data/processing/views/tree/helpers/comparators.ts
new file mode 100644
index 0000000000..68a9004a82
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/helpers/comparators.ts
@@ -0,0 +1,58 @@
+import { ApplySortOptions } from '../treeState/types';
+
+export const simpleComparator = <T extends string | number>(a: T, b: T) => {
+    if (a < b) {
+        return -1;
+    }
+
+    return a === b ? 0 : 1;
+};
+
+export const buildComparators = <TItem, TId, TFilter>(options: ApplySortOptions<TItem, TId, TFilter>) => {
+    const compareScalars = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare;
+    const comparators: ((a: TItem, b: TItem) => number)[] = [];
+
+    if (options.sorting) {
+        options.sorting.forEach((sortingOption) => {
+            const sortByFn = options.sortBy || ((i: TItem) => i[sortingOption.field as keyof TItem] ?? '');
+            const sign = sortingOption.direction === 'desc' ? -1 : 1;
+            comparators.push((a, b) => sign * compareScalars(sortByFn(a, sortingOption) + '', sortByFn(b, sortingOption) + ''));
+        });
+    }
+
+    return comparators;
+};
+
+export const composeComparators = <TItem, TId>(comparators: ((a: TItem, b: TItem) => number)[], getId: (item: TItem) => TId) => {
+    return (a: TItem, b: TItem) => {
+        for (let n = 0; n < comparators.length; n++) {
+            const compare = comparators[n];
+            const result = compare(a, b);
+            if (result !== 0) {
+                return result;
+            }
+        }
+
+        const aId = getId(a);
+        const bId = getId(b);
+
+        const aCompareId = typeof aId === 'object' && aId !== null ? JSON.stringify(aId) : aId as string | number;
+        const bCompareId = typeof bId === 'object' && bId !== null ? JSON.stringify(bId) : bId as string | number;
+
+        return simpleComparator(aCompareId, bCompareId);
+    };
+};
+
+export const buildSorter = <TItem, TId, TFilter>(options: ApplySortOptions<TItem, TId, TFilter>) => {
+    const comparators = buildComparators(options);
+    const composedComparator = composeComparators(comparators, options.getId);
+    return (items: TItem[]) => {
+        if (comparators.length === 0) {
+            return items;
+        }
+
+        items = [...items];
+        items.sort(composedComparator);
+        return items;
+    };
+};
diff --git a/uui-core/src/data/processing/views/tree/helpers/index.ts b/uui-core/src/data/processing/views/tree/helpers/index.ts
new file mode 100644
index 0000000000..506534bbae
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/helpers/index.ts
@@ -0,0 +1,2 @@
+export * from './comparators';
+export * from './map';
diff --git a/uui-core/src/data/processing/views/tree/CompositeKeysMap.ts b/uui-core/src/data/processing/views/tree/helpers/map.ts
similarity index 60%
rename from uui-core/src/data/processing/views/tree/CompositeKeysMap.ts
rename to uui-core/src/data/processing/views/tree/helpers/map.ts
index 8b7874b4b7..d12a7f66a9 100644
--- a/uui-core/src/data/processing/views/tree/CompositeKeysMap.ts
+++ b/uui-core/src/data/processing/views/tree/helpers/map.ts
@@ -1,4 +1,20 @@
-import { IMap } from '../../../../types';
+import { IImmutableMap, IMap } from '../../../../../types';
+import { ITreeParams } from '../treeStructure/types';
+
+export function cloneMap<T extends IMap<any, any> | IImmutableMap<any, any>>(map: T): T extends IMap<infer TKey, infer TValue>
+    ? IMap<TKey, TValue>
+    : T extends IImmutableMap<infer TKey, infer TValue>
+        ? IImmutableMap<TKey, TValue> : never {
+    return new (map.constructor as any)(map);
+}
+
+export function newMap<TKey, TValue>(params: Partial<ITreeParams<any, any>>) {
+    if (params.complexIds) {
+        return new CompositeKeysMap<TKey, TValue>();
+    } else {
+        return new Map<TKey, TValue>();
+    }
+}
 
 export class CompositeKeysMap<TKey, TValue> implements IMap<TKey, TValue> {
     map: Map<string, TValue>;
@@ -14,7 +30,7 @@ export class CompositeKeysMap<TKey, TValue> implements IMap<TKey, TValue> {
         return key === undefined ? undefined : JSON.stringify(key);
     }
 
-    public get(key: TKey) {
+    public get(key: TKey): TValue | undefined {
         return this.map.get(this.keyToString(key));
     }
 
diff --git a/uui-core/src/data/processing/views/tree/helpers/merge.ts b/uui-core/src/data/processing/views/tree/helpers/merge.ts
new file mode 100644
index 0000000000..cf906c9bb8
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/helpers/merge.ts
@@ -0,0 +1,88 @@
+import { newMap } from './map';
+
+export interface MergeOptions<TId> {
+    isDeleted?: (id: TId) => boolean;
+    complexIds?: boolean;
+}
+
+export function merge<TId>(
+    mergeSrcArr: TId[],
+    mergeTgArr: TId[],
+    compare: (idFromSource: TId, idFromTarget: TId, sourceIndex: number, targetIndex: number) => number,
+    initialArr: TId[] = [],
+    options: MergeOptions<TId> = {},
+): [TId[], boolean] {
+    const { complexIds, isDeleted } = options;
+
+    let srcItemIndex = 0,
+        tgItemIndex = 0,
+        isUpdated = false;
+
+    const merged: TId[] = [...initialArr];
+    const patchedItems = newMap<TId, boolean>({ complexIds });
+
+    mergeSrcArr.forEach((id) => {
+        patchedItems.set(id, true);
+    });
+
+    while (srcItemIndex < mergeSrcArr.length || tgItemIndex < mergeTgArr.length) {
+        if (srcItemIndex >= mergeSrcArr.length) {
+            if (!patchedItems.get(mergeTgArr[tgItemIndex]) && !isDeleted?.(mergeTgArr[tgItemIndex])) {
+                merged.push(mergeTgArr[tgItemIndex]);
+            }
+            if (isDeleted?.(mergeTgArr[tgItemIndex])) {
+                isUpdated = true;
+            }
+
+            tgItemIndex++;
+            continue;
+        }
+
+        if (tgItemIndex >= mergeTgArr.length) {
+            if (!isDeleted?.(mergeSrcArr[srcItemIndex])) {
+                merged.push(mergeSrcArr[srcItemIndex]);
+                isUpdated = true;
+            }
+            srcItemIndex++;
+            continue;
+        }
+
+        const srcItemId = mergeSrcArr[srcItemIndex];
+        const tgItemId = mergeTgArr[tgItemIndex];
+
+        if (isDeleted?.(srcItemId)) {
+            srcItemIndex++;
+            continue;
+        }
+
+        if (isDeleted?.(tgItemId)) {
+            isUpdated = true;
+            tgItemIndex++;
+            continue;
+        }
+
+        if (patchedItems.has(tgItemId)) {
+            isUpdated = true;
+            tgItemIndex++;
+            continue;
+        }
+
+        const result = compare(srcItemId, tgItemId, srcItemIndex, tgItemIndex);
+        if (result === -1) {
+            merged.push(srcItemId);
+            isUpdated = true;
+            srcItemIndex++;
+        } else {
+            if (!patchedItems.has(tgItemId) && !isDeleted?.(tgItemId)) {
+                merged.push(tgItemId);
+            }
+            if (isDeleted?.(tgItemId)) {
+                isUpdated = true;
+            }
+
+            tgItemIndex++;
+        }
+    }
+
+    return [merged, isUpdated];
+}
diff --git a/uui-core/src/data/processing/views/tree/helpers/patch.ts b/uui-core/src/data/processing/views/tree/helpers/patch.ts
new file mode 100644
index 0000000000..ec788c8e3f
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/helpers/patch.ts
@@ -0,0 +1,181 @@
+import { NOT_FOUND_RECORD } from '../constants';
+import { newMap } from './map';
+import { DataSourceState, IImmutableMap, IMap, PatchOptions, SortConfig, SortedPatchByParentId } from '../../../../../types';
+import { buildComparators, composeComparators } from '../helpers';
+import { PatchOrdering } from '../constants';
+import { ITree } from '../ITree';
+
+const groupByParentId = <TItem, TId>(
+    patch: IMap<TId, TItem> | IImmutableMap<TId, TItem> | undefined,
+    getParentId?: (item: TItem) => TId,
+    complexIds?: boolean,
+): IMap<TId, TItem[]> => {
+    const patchByParentId = newMap<TId, TItem[]>({ getParentId, complexIds });
+    if (!patch) {
+        return patchByParentId;
+    }
+
+    for (const [, item] of patch) {
+        const parentId = getParentId?.(item) ?? undefined;
+        if (!patchByParentId.has(parentId)) {
+            patchByParentId.set(parentId, []);
+        }
+        const prevItems = patchByParentId.get(parentId);
+        patchByParentId.set(parentId, [...prevItems, item]);
+    }
+    return patchByParentId;
+};
+
+const getPatchByCategories = <TItem, TId>(
+    items: TItem[],
+    tree: ITree<TItem, TId>,
+    patchAtLastSort: IMap<TId, TItem> | IImmutableMap<TId, TItem>,
+    getNewItemPosition: PatchOptions<TItem, TId>['getNewItemPosition'],
+    getItemTemporaryOrder: PatchOptions<TItem, TId>['getItemTemporaryOrder'] | undefined,
+    isDeleted: undefined | ((item: TItem) => boolean),
+) => {
+    const { getId, getParentId, complexIds } = tree.getParams();
+    const top: TId[] = [];
+    const bottom: TId[] = [];
+    const updated: TId[] = [];
+    const movedToOtherParent: TId[] = [];
+    const updatedItemsMap: IMap<TId, TItem> = newMap({ complexIds });
+    const newItems: TItem[] = [];
+    const withTempOrder: TId[] = [];
+
+    for (const item of items) {
+        const id = getId(item);
+        const itemInOriginalTree = tree.getById(id) !== NOT_FOUND_RECORD;
+        const itemInPatchBeforeSort = patchAtLastSort.has(id);
+        updatedItemsMap.set(id, item);
+        newItems.push(item);
+        const tempOrder = getItemTemporaryOrder?.(item);
+        const prevItem = patchAtLastSort.get(id) ?? tree.getById(id) as TItem;
+        const prevParentId = getParentId?.(prevItem) ?? undefined;
+        const newParentId = getParentId?.(item) ?? undefined;
+        if (prevParentId !== newParentId) {
+            movedToOtherParent.push(id);
+        }
+
+        if (tempOrder) {
+            if (isDeleted?.(item)) {
+                continue;
+            }
+            withTempOrder.push(id);
+            continue;
+        }
+
+        if (!itemInPatchBeforeSort && !itemInOriginalTree) {
+            const position = getNewItemPosition(item);
+
+            if (isDeleted?.(item)) {
+                continue;
+            }
+
+            if (position === PatchOrdering.BOTTOM) {
+                bottom.push(id);
+            } else {
+                top.unshift(id);
+            }
+            continue;
+        }
+
+        if (prevParentId !== newParentId) {
+            const position = getNewItemPosition(item);
+            if (position === PatchOrdering.BOTTOM) {
+                bottom.push(id);
+            } else {
+                top.unshift(id);
+            }
+
+            continue;
+        }
+
+        updated.push(id);
+    }
+
+    return { top, bottom, movedToOtherParent, updated, withTempOrder, updatedItemsMap, newItems };
+};
+
+const sortUpdatedItems = <TItem, TId>(
+    updated: TId[],
+    composedComparator: (a: TItem, b: TItem) => number,
+    tree: ITree<TItem, TId>,
+    patchAtLastSort: IMap<TId, TItem> | IImmutableMap<TId, TItem>,
+) => {
+    return updated.sort((aId, bId) => {
+        const bItem = patchAtLastSort.get(bId) ?? tree.getById(bId) as TItem;
+        const aItem = patchAtLastSort.get(aId) ?? tree.getById(aId) as TItem;
+
+        return composedComparator(aItem, bItem);
+    });
+};
+
+const sortByTemporaryOrder = <TItem, TId>(
+    withTempOrder: TId[],
+    getItemTemporaryOrder: PatchOptions<TItem, TId>['getItemTemporaryOrder'] | undefined,
+    updatedItemsMap: IMap<TId, TItem>,
+) => {
+    const comparator = (a: string, b: string) => a < b ? -1 : 1;
+    return withTempOrder.sort((aId, bId) => {
+        const a = updatedItemsMap.get(aId);
+        const b = updatedItemsMap.get(bId);
+        return comparator(getItemTemporaryOrder(a), getItemTemporaryOrder((b)));
+    });
+};
+
+const sortPatchByParentId = <TItem, TId, TFilter>(
+    tree: ITree<TItem, TId>,
+    groupedByParentId: IMap<TId, TItem[]>,
+    getNewItemPosition: PatchOptions<TItem, TId>['getNewItemPosition'],
+    getItemTemporaryOrder: PatchOptions<TItem, TId>['getItemTemporaryOrder'] | undefined,
+    patchAtLastSort: IMap<TId, TItem> | IImmutableMap<TId, TItem>,
+    sortBy: SortConfig<TItem>['sortBy'],
+    sorting: DataSourceState<TFilter, TId>['sorting'],
+    isDeleted: undefined | ((item: TItem) => boolean),
+) => {
+    const { complexIds } = tree.getParams();
+    const comparators = buildComparators({ sorting, sortBy, getId: tree.getParams().getId });
+    const composedComparator = composeComparators(comparators, tree.getParams().getId);
+
+    const sorted: SortedPatchByParentId<TItem, TId> = newMap({ complexIds });
+    for (const [parentId, items] of groupedByParentId) {
+        const { top, bottom, updated, movedToOtherParent, withTempOrder, updatedItemsMap, newItems } = getPatchByCategories(
+            items,
+            tree,
+            patchAtLastSort,
+            getNewItemPosition,
+            getItemTemporaryOrder,
+            isDeleted,
+        );
+
+        const sortedUpdated = sortUpdatedItems(updated, composedComparator, tree, patchAtLastSort);
+        const sortedByTempOrder = sortByTemporaryOrder(withTempOrder, getItemTemporaryOrder, updatedItemsMap);
+
+        sorted.set(parentId, {
+            top,
+            bottom,
+            updated: sortedUpdated,
+            moved: movedToOtherParent,
+            withTempOrder: sortedByTempOrder,
+            updatedItemsMap,
+            newItems,
+        });
+    }
+    return sorted;
+};
+
+export const getSortedPatchByParentId = <TItem, TId, TFilter>(
+    tree: ITree<TItem, TId>,
+    patch: IMap<TId, TItem> | IImmutableMap<TId, TItem>,
+    patchAtLastSort: IMap<TId, TItem> | IImmutableMap<TId, TItem>,
+    getNewItemPosition: PatchOptions<TItem, TId>['getNewItemPosition'],
+    getItemTemporaryOrder: PatchOptions<TItem, TId>['getItemTemporaryOrder'] | undefined,
+    sortBy: SortConfig<TItem>['sortBy'],
+    sorting: DataSourceState<TFilter, TId>['sorting'],
+    isDeleted?: (item: TItem) => boolean,
+) => {
+    const params = tree.getParams();
+    const grouped = groupByParentId(patch, params.getParentId, params.complexIds);
+    return sortPatchByParentId(tree, grouped, getNewItemPosition, getItemTemporaryOrder, patchAtLastSort, sortBy, sorting, isDeleted);
+};
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/index.ts b/uui-core/src/data/processing/views/tree/hooks/common/index.ts
new file mode 100644
index 0000000000..7cb6bd15fd
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/index.ts
@@ -0,0 +1,8 @@
+export * from './useDataSourceStateWithDefaults';
+export * from './useItemsStatusCollector';
+export * from './useItemsStorage';
+export * from './usePatchTree';
+export * from './useSelectedOnlyTree';
+export * from './useSearchTree';
+export * from './useSortTree';
+export * from './useFilterTree';
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/useDataSourceStateWithDefaults.ts b/uui-core/src/data/processing/views/tree/hooks/common/useDataSourceStateWithDefaults.ts
new file mode 100644
index 0000000000..5b48d35a5c
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/useDataSourceStateWithDefaults.ts
@@ -0,0 +1,23 @@
+import { useRef } from 'react';
+import { DataSourceState } from '../../../../../../types';
+
+interface UseDataSourceStateWithDefaults<TId, TFilter = any> {
+    dataSourceState: DataSourceState<TFilter, TId>;
+}
+
+const getDataSourceStateWithDefaults = <TId, TFilter = any>(dataSourceState: DataSourceState<TFilter, TId>) =>
+    ((dataSourceState.topIndex === undefined || dataSourceState.visibleCount)
+        ? {
+            ...dataSourceState,
+            topIndex: dataSourceState.topIndex ?? 0,
+            visibleCount: dataSourceState.visibleCount ?? 20,
+        }
+        : dataSourceState);
+
+export function useDataSourceStateWithDefaults<TId, TFilter = any>({ dataSourceState }: UseDataSourceStateWithDefaults<TId, TFilter>) {
+    const dataSourceStateRef = useRef(getDataSourceStateWithDefaults(dataSourceState));
+
+    dataSourceStateRef.current = getDataSourceStateWithDefaults(dataSourceState);
+
+    return dataSourceStateRef.current;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/useDepsChanged.ts b/uui-core/src/data/processing/views/tree/hooks/common/useDepsChanged.ts
new file mode 100644
index 0000000000..10c9eeb7ef
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/useDepsChanged.ts
@@ -0,0 +1,9 @@
+import { usePrevious } from '../../../../../../hooks/usePrevious';
+
+export function useDepsChanged(deps: any[]) {
+    const prevDeps = usePrevious(deps);
+    const isDepsChanged = prevDeps?.length !== deps.length
+        || (prevDeps ?? []).some((devVal, index) => devVal !== deps[index]);
+
+    return isDepsChanged;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/useFilterTree.ts b/uui-core/src/data/processing/views/tree/hooks/common/useFilterTree.ts
new file mode 100644
index 0000000000..bf60b2389b
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/useFilterTree.ts
@@ -0,0 +1,29 @@
+import { usePrevious } from '../../../../../../hooks/usePrevious';
+import { DataSourceState } from '../../../../../../types';
+import { TreeState } from '../../treeState';
+import { useUpdateTree } from './useUpdateTree';
+
+export type UseFilterTreeProps<TItem, TId, TFilter = any> = {
+    getFilter?: (filter: TFilter) => (item: TItem) => boolean;
+    tree: TreeState<TItem, TId>;
+    dataSourceState: DataSourceState<TFilter, TId>;
+    isLoading?: boolean;
+};
+
+export function useFilterTree<TItem, TId, TFilter = any>(
+    { tree, dataSourceState: { filter }, getFilter, isLoading }: UseFilterTreeProps<TItem, TId, TFilter>,
+    deps: any[],
+) {
+    const prevFilter = usePrevious(filter);
+    const filteredTree = useUpdateTree({
+        tree,
+        shouldUpdate: () => filter !== prevFilter,
+        update: (currentTree) => currentTree.filter({ filter, getFilter }),
+    }, [filter, ...deps]);
+
+    if (isLoading || filteredTree === null) {
+        return tree;
+    }
+
+    return filteredTree;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/useItemsStatusCollector.ts b/uui-core/src/data/processing/views/tree/hooks/common/useItemsStatusCollector.ts
new file mode 100644
index 0000000000..e4060c8e83
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/useItemsStatusCollector.ts
@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { IMap } from '../../../../../../types';
+import { RecordStatus } from '../../types';
+import { ItemsStatusCollector } from '../../ItemsStatusCollector';
+import { ITreeParams } from '../../treeStructure';
+
+export interface UseItemsStatusCollectorProps<TItem, TId> extends ITreeParams<TItem, TId> {
+    itemsStatusMap: IMap<TId, RecordStatus>;
+}
+
+export function useItemsStatusCollector<TItem, TId>(
+    {
+        itemsStatusMap,
+        complexIds,
+        getId,
+    }: UseItemsStatusCollectorProps<TItem, TId>,
+    deps: any[],
+) {
+    const itemsStatusCollector = useMemo(() => {
+        return new ItemsStatusCollector(itemsStatusMap, { complexIds, getId });
+    }, deps);
+
+    return itemsStatusCollector;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/useItemsStorage.ts b/uui-core/src/data/processing/views/tree/hooks/common/useItemsStorage.ts
new file mode 100644
index 0000000000..5a079ba151
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/useItemsStorage.ts
@@ -0,0 +1,47 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ItemsStorage } from '../../../..';
+import { ItemsMapParams } from '../../ItemsMap';
+import { SharedItemsState } from '../strategies/types';
+
+export interface UseItemsStorageProps<TItem, TId> extends SharedItemsState<TItem, TId> {
+    items?: TItem[];
+    params: ItemsMapParams<TItem, TId>;
+}
+
+export function useItemsStorage<TItem, TId>({ itemsMap: outerItemsMap, setItems, items, params }: UseItemsStorageProps<TItem, TId>) {
+    const itemsStorage = useMemo(() => {
+        if (!outerItemsMap) {
+            return new ItemsStorage({ items, params });
+        }
+        return null;
+    }, [outerItemsMap, items]);
+
+    const [itemsMap, setItemsMap] = useState(outerItemsMap ?? itemsStorage?.getItemsMap());
+
+    useEffect(() => {
+        if (itemsStorage) {
+            const unsubscribe = itemsStorage.subscribe(() => {
+                setItemsMap(itemsStorage.getItemsMap());
+            });
+
+            return () => {
+                unsubscribe();
+            };
+        }
+    }, []);
+
+    useEffect(() => {
+        if (Array.isArray(items)) {
+            if (itemsStorage) {
+                itemsStorage.setItems(items);
+            }
+            setItems?.(items);
+        }
+    }, [items]);
+
+    const currentItemsMap = outerItemsMap ?? itemsMap;
+    return {
+        itemsMap: currentItemsMap,
+        setItems: setItems ?? (itemsStorage?.setItems ?? currentItemsMap.setItems),
+    };
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/usePatchTree.ts b/uui-core/src/data/processing/views/tree/hooks/common/usePatchTree.ts
new file mode 100644
index 0000000000..e9977d6210
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/usePatchTree.ts
@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { newMap } from '../../helpers';
+import { DataSourceState, PatchOptions } from '../../../../../../types';
+import { PatchOrdering } from '../../constants';
+import { usePrevious } from '../../../../../../hooks/usePrevious';
+import { getSortedPatchByParentId } from '../../helpers/patch';
+import { TreeState } from '../../treeState';
+
+export interface UsePatchTreeProps<TItem, TId, TFilter = any> extends PatchOptions<TItem, TId> {
+    tree: TreeState<TItem, TId>;
+    sorting: DataSourceState<TFilter, TId>['sorting'];
+
+}
+
+export function usePatchTree<TItem, TId, TFilter = any>(
+    {
+        tree,
+        patch,
+        getNewItemPosition = () => PatchOrdering.TOP,
+        getItemTemporaryOrder,
+        fixItemBetweenSortings = true,
+        isDeleted,
+        sorting,
+        sortBy,
+    }: UsePatchTreeProps<TItem, TId, TFilter>,
+) {
+    const prevPatch = usePrevious(patch);
+    const params = tree.visible.getParams();
+
+    const patchAtLastSort = useMemo(() => {
+        return prevPatch === null ? newMap<TId, TItem>({ complexIds: params.complexIds }) : patch;
+    }, [sorting]);
+
+    const sortedPatch = useMemo(
+        () => getSortedPatchByParentId(
+            tree.visible,
+            patch,
+            fixItemBetweenSortings ? patchAtLastSort : patch,
+            getNewItemPosition,
+            getItemTemporaryOrder,
+            sortBy,
+            sorting,
+            isDeleted,
+        ),
+        [patch, sorting],
+    );
+
+    return useMemo(() => {
+        return tree.patch({
+            sortedPatch,
+            patchAtLastSort: fixItemBetweenSortings ? patchAtLastSort : patch,
+            getItemTemporaryOrder,
+            isDeleted,
+            sorting,
+            sortBy,
+            ...tree.visible.getParams(),
+        });
+    }, [tree, patch]);
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/useSearchTree.ts b/uui-core/src/data/processing/views/tree/hooks/common/useSearchTree.ts
new file mode 100644
index 0000000000..448b808a7d
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/useSearchTree.ts
@@ -0,0 +1,37 @@
+import { usePrevious } from '../../../../../../hooks/usePrevious';
+import { DataSourceState } from '../../../../../../types';
+import { TreeState } from '../../treeState';
+import { useUpdateTree } from './useUpdateTree';
+
+export type UseSearchTreeProps<TItem, TId, TFilter = any> = {
+    getSearchFields?: (item: TItem) => string[];
+    sortSearchByRelevance?: boolean;
+    tree: TreeState<TItem, TId>;
+    dataSourceState: DataSourceState<TFilter, TId>;
+    isLoading?: boolean;
+};
+
+export function useSearchTree<TItem, TId, TFilter = any>(
+    {
+        tree,
+        dataSourceState: { search },
+        getSearchFields,
+        sortSearchByRelevance,
+        isLoading,
+    }: UseSearchTreeProps<TItem, TId, TFilter>,
+    deps: any[] = [],
+) {
+    const prevSearch = usePrevious(search);
+
+    const searchTree = useUpdateTree({
+        tree,
+        shouldUpdate: () => search !== prevSearch,
+        update: (currentTree) => currentTree.search({ search, getSearchFields, sortSearchByRelevance }),
+    }, [search, ...deps]);
+
+    if (isLoading || searchTree === null) {
+        return tree;
+    }
+
+    return searchTree;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/useSelectedOnlyTree.ts b/uui-core/src/data/processing/views/tree/hooks/common/useSelectedOnlyTree.ts
new file mode 100644
index 0000000000..661334f073
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/useSelectedOnlyTree.ts
@@ -0,0 +1,30 @@
+import { usePrevious } from '../../../../../../hooks/usePrevious';
+import { DataSourceState } from '../../../../../../types';
+import { TreeState } from '../../treeState';
+import { getChecked, isSelectedOrCheckedChanged } from '../strategies/checked';
+import { useUpdateTree } from './useUpdateTree';
+
+export type UseSelectedOnlyTreeProps<TItem, TId, TFilter = any> = {
+    tree: TreeState<TItem, TId>;
+    dataSourceState: DataSourceState<TFilter, TId>;
+    isLoading?: boolean;
+};
+
+export function useSelectedOnlyTree<TItem, TId, TFilter = any>(
+    { tree, dataSourceState, isLoading }: UseSelectedOnlyTreeProps<TItem, TId, TFilter>,
+    deps: any[],
+) {
+    const prevDataSourceState = usePrevious(dataSourceState);
+
+    const selectedOnlyTree = useUpdateTree({
+        tree,
+        shouldUpdate: () => isSelectedOrCheckedChanged(dataSourceState, prevDataSourceState),
+        update: (currentTree) => currentTree.buildSelectedOnly(getChecked(dataSourceState)),
+    }, [dataSourceState.checked, dataSourceState.selectedId, ...deps]);
+
+    if (isLoading || selectedOnlyTree === null) {
+        return tree;
+    }
+
+    return selectedOnlyTree;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/useSortTree.ts b/uui-core/src/data/processing/views/tree/hooks/common/useSortTree.ts
new file mode 100644
index 0000000000..8036642e90
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/useSortTree.ts
@@ -0,0 +1,35 @@
+import { usePrevious } from '../../../../../../hooks/usePrevious';
+import { DataSourceState, SortingOption } from '../../../../../../types';
+import { TreeState } from '../../treeState';
+import { useUpdateTree } from './useUpdateTree';
+
+export type UseSortTreeProps<TItem, TId, TFilter = any> = {
+    sortBy?(item: TItem, sorting: SortingOption): any;
+    tree: TreeState<TItem, TId>;
+    dataSourceState: DataSourceState<TFilter, TId>;
+    isLoading?: boolean;
+};
+
+export function useSortTree<TItem, TId, TFilter = any>(
+    {
+        tree,
+        dataSourceState: { sorting },
+        sortBy,
+        isLoading,
+    }: UseSortTreeProps<TItem, TId, TFilter>,
+    deps: any[],
+): TreeState<TItem, TId> {
+    const prevSorting = usePrevious(sorting);
+
+    const sortTree = useUpdateTree({
+        tree,
+        shouldUpdate: () => sorting !== prevSorting,
+        update: (currentTree) => currentTree.sort({ sorting, sortBy, getId: tree.visible.getParams().getId }),
+    }, [sorting, ...deps]);
+
+    if (isLoading || sortTree === null) {
+        return tree;
+    }
+
+    return sortTree;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/common/useUpdateTree.ts b/uui-core/src/data/processing/views/tree/hooks/common/useUpdateTree.ts
new file mode 100644
index 0000000000..bced055d1c
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/common/useUpdateTree.ts
@@ -0,0 +1,32 @@
+import { useMemo, useRef } from 'react';
+import { TreeState } from '../../treeState';
+import { usePrevious } from '../../../../../../hooks/usePrevious';
+import { useDepsChanged } from './useDepsChanged';
+
+export interface UseUpdateTreeProps<TItem, TId> {
+    tree: TreeState<TItem, TId>;
+    shouldUpdate: () => boolean;
+    update: (tree: TreeState<TItem, TId>) => TreeState<TItem, TId>;
+}
+
+export function useUpdateTree<TItem, TId>(
+    {
+        tree,
+        shouldUpdate,
+        update,
+    }: UseUpdateTreeProps<TItem, TId>,
+    deps: any[],
+) {
+    const treeRef = useRef<TreeState<TItem, TId>>(null);
+    const prevTree = usePrevious(tree);
+    const depsChanged = useDepsChanged(deps);
+
+    const updatedTree = useMemo(() => {
+        if (treeRef.current === null || prevTree !== tree || shouldUpdate() || depsChanged) {
+            treeRef.current = update(tree);
+        }
+        return treeRef.current;
+    }, [tree, depsChanged, ...deps]);
+
+    return updatedTree;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/exposed.ts b/uui-core/src/data/processing/views/tree/hooks/exposed.ts
new file mode 100644
index 0000000000..c854af5865
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/exposed.ts
@@ -0,0 +1,3 @@
+export * from './strategies/exposed';
+export { useTree } from './useTree';
+export type { UseTreeResult } from './types';
diff --git a/uui-core/src/data/processing/views/tree/hooks/index.ts b/uui-core/src/data/processing/views/tree/hooks/index.ts
new file mode 100644
index 0000000000..78c165c748
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/index.ts
@@ -0,0 +1,3 @@
+export { useTree } from './useTree';
+export { useLazyFetchingAdvisor } from './strategies/lazyTree';
+export * from './types';
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/__tests__/useAsyncTree.test.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/__tests__/useAsyncTree.test.ts
new file mode 100644
index 0000000000..c4f93b5a12
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/__tests__/useAsyncTree.test.ts
@@ -0,0 +1,228 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { useAsyncTree } from '../useAsyncTree';
+import { DataQueryFilter, DataSourceState } from '../../../../../../../../types';
+import { LocationItem } from '../../../../../../__tests__/mocks';
+import { demoData } from '@epam/uui-docs';
+import { RecordStatus } from '../../../../types';
+import { TreeStructure } from '../../../../treeStructure';
+import { FAILED_RECORD, NOT_FOUND_RECORD, newMap } from '../../../../exposed';
+
+describe('useAsyncTree', () => {
+    let dataSourceState: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const setDataSourceState = (newDsState: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newDsState === 'function') {
+            dataSourceState = newDsState(dataSourceState);
+            return;
+        }
+        dataSourceState = newDsState;
+    };
+
+    const api = jest.fn().mockImplementation(() => Promise.resolve(demoData.locations));
+    const getId = ({ id }: LocationItem) => id;
+    const getParentId = ({ parentId }: LocationItem) => parentId;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        dataSourceState = { topIndex: 0, visibleCount: 3 };
+    });
+
+    it('should path through minimal props', async () => {
+        const hookResult = renderHook(
+            (props) => useAsyncTree({
+                type: 'async',
+                api,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+            expect(tree.isFetching).toBeTruthy();
+        });
+
+        let tree = hookResult.result.current;
+        expect(tree.isLoading).toBeTruthy();
+
+        await waitFor(() => {
+            tree = hookResult.result.current;
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        expect(tree).toEqual(expect.objectContaining({
+            dataSourceState,
+            setDataSourceState,
+            totalCount: 42,
+            getId,
+            getParentId: undefined,
+            rowOptions: undefined,
+            getRowOptions: undefined,
+            isFoldedByDefault: undefined,
+            cascadeSelection: undefined,
+            selectAll: undefined,
+            showSelectedOnly: undefined,
+
+            isFetching: false,
+            isLoading: false,
+        }));
+
+        expect(tree.tree instanceof TreeStructure).toBeTruthy();
+        expect(tree.selectionTree instanceof TreeStructure).toBeTruthy();
+        expect(typeof tree.getItemStatus).toBe('function');
+        expect(typeof tree.reload).toBe('function');
+    });
+
+    it('should path through maximum props', async () => {
+        const rowOptions = { checkbox: { isVisible: true } };
+        const getRowOptions = () => ({ isReadonly: true });
+        const cascadeSelection = 'explicit';
+        const isFoldedByDefault = () => true;
+        const selectAll = true;
+        const showSelectedOnly = true;
+
+        const hookResult = renderHook(
+            (props) => useAsyncTree({
+                type: 'async',
+                api,
+                getId,
+                getParentId,
+                rowOptions,
+                getRowOptions,
+                cascadeSelection,
+                isFoldedByDefault,
+                showSelectedOnly,
+                selectAll,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        const tree = hookResult.result.current;
+
+        expect(tree).toEqual(expect.objectContaining({
+            dataSourceState,
+            setDataSourceState,
+            totalCount: 0,
+            getId,
+            getParentId,
+            rowOptions,
+            getRowOptions,
+            isFoldedByDefault,
+            cascadeSelection,
+            showSelectedOnly,
+            selectAll,
+
+            isFetching: false,
+            isLoading: false,
+        }));
+
+        expect(tree.tree instanceof TreeStructure).toBeTruthy();
+        expect(tree.selectionTree instanceof TreeStructure).toBeTruthy();
+        expect(typeof tree.getItemStatus).toBe('function');
+        expect(typeof tree.reload).toBe('function');
+    });
+
+    it('should defined itemsMap/setItems inside hook if not passed to props', async () => {
+        const hookResult = renderHook(
+            (props) => useAsyncTree({
+                type: 'async',
+                api,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        const tree = hookResult.result.current;
+
+        const itemFromVisibleTree = tree.tree.getById('BJ');
+        expect(itemFromVisibleTree).toEqual(expect.objectContaining({ id: 'BJ', parentId: 'c-AF' }));
+
+        const itemFromSelectionTree = tree.selectionTree.getById('BJ');
+        expect(itemFromSelectionTree).toEqual(expect.objectContaining({ id: 'BJ', parentId: 'c-AF' }));
+
+        const unknownItemFromVisibleTree = tree.tree.getById('GW');
+        expect(unknownItemFromVisibleTree).toBe(NOT_FOUND_RECORD);
+
+        const unknownItemFromSelectionTree = tree.tree.getById('GW');
+        expect(unknownItemFromSelectionTree).toBe(NOT_FOUND_RECORD);
+    });
+
+    it('should use inner itemsStatusMap if not passed to props', async () => {
+        dataSourceState.checked = ['GW'];
+        const hookResult = renderHook(
+            (props) => useAsyncTree({
+                type: 'async',
+                api,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        const tree = hookResult.result.current;
+
+        const itemFromVisibleTree = tree.tree.getById('GW');
+        const itemFromSelectionTree = tree.selectionTree.getById('GW');
+        expect(itemFromVisibleTree).toEqual(NOT_FOUND_RECORD);
+        expect(itemFromSelectionTree).toEqual(NOT_FOUND_RECORD);
+
+        expect(typeof tree.getItemStatus).toBe('function');
+        expect(tree.getItemStatus!('GW')).toBe(NOT_FOUND_RECORD);
+    });
+
+    it('should use outer itemsStatusMap if passed to props', async () => {
+        const itemsStatusMap = newMap<string, RecordStatus>({ getId });
+        itemsStatusMap.set('GW', FAILED_RECORD);
+
+        const hookResult = renderHook(
+            (props) => useAsyncTree({
+                type: 'async',
+                api,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                itemsStatusMap,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        const tree = hookResult.result.current;
+
+        const itemFromVisibleTree = tree.tree.getById('GW');
+        const itemFromSelectionTree = tree.selectionTree.getById('GW');
+        expect(itemFromVisibleTree).toEqual(NOT_FOUND_RECORD);
+        expect(itemFromSelectionTree).toEqual(NOT_FOUND_RECORD);
+
+        expect(typeof tree.getItemStatus).toBe('function');
+        expect(tree.getItemStatus!('GW')).toBe(FAILED_RECORD);
+    });
+});
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/index.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/index.ts
new file mode 100644
index 0000000000..5fcd2601f8
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/index.ts
@@ -0,0 +1 @@
+export { useAsyncTree } from './useAsyncTree';
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/types.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/types.ts
new file mode 100644
index 0000000000..9b09ac10fd
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/types.ts
@@ -0,0 +1,29 @@
+import { FilterConfig, PatchOptions, SearchConfig, SortConfig } from '../../../../../../../types';
+import { STRATEGIES } from '../constants';
+import { AsyncDataSourceConfig, CommonTreeConfig, ItemsStatuses, SharedItemsState } from '../types/common';
+
+/**
+ * Async tree hook configuration.
+ */
+export interface AsyncTreeProps<TItem, TId, TFilter> extends
+    CommonTreeConfig<TItem, TId, TFilter>,
+    PatchOptions<TItem, TId>,
+    SharedItemsState<TItem, TId>,
+    SearchConfig<TItem>,
+    SortConfig<TItem>,
+    FilterConfig<TItem, TFilter>,
+    ItemsStatuses<TId>,
+    AsyncDataSourceConfig<TItem> {
+
+    /**
+     * Type of the tree to be supported.
+     */
+    type: typeof STRATEGIES.async;
+
+    /**
+     * Disables loading of records, if isLoaded = true.
+     * If isLoaded = true, items are taken from itemsMap.
+     * @internal
+     */
+    isLoaded?: boolean;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useAsyncTree.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useAsyncTree.ts
new file mode 100644
index 0000000000..221d23574e
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useAsyncTree.ts
@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { TreeState } from '../../../treeState';
+import { AsyncTreeProps } from './types';
+import { useLoadData } from './useLoadData';
+import { usePrevious } from '../../../../../../../hooks/usePrevious';
+import {
+    useItemsStorage, useDataSourceStateWithDefaults, useFilterTree, useSortTree,
+    useSearchTree, useSelectedOnlyTree, usePatchTree,
+} from '../../common';
+import { UseTreeResult } from '../../types';
+
+export function useAsyncTree<TItem, TId, TFilter = any>(
+    props: AsyncTreeProps<TItem, TId, TFilter>,
+    deps: [],
+): UseTreeResult<TItem, TId, TFilter> {
+    const {
+        getId,
+        complexIds,
+        getParentId,
+        getFilter,
+        getSearchFields,
+        sortBy,
+        sortSearchByRelevance = true,
+        rowOptions,
+        getRowOptions,
+        setDataSourceState,
+        isFoldedByDefault,
+        cascadeSelection,
+        showSelectedOnly,
+        patch,
+        isDeleted,
+        getNewItemPosition,
+        itemsStatusMap,
+        selectAll,
+        isLoaded,
+        getItemTemporaryOrder,
+    } = props;
+
+    const { itemsMap, setItems } = useItemsStorage({
+        itemsMap: props.itemsMap,
+        setItems: props.setItems,
+        params: { getId, complexIds },
+    });
+
+    const [isForceReload, setIsForceReload] = useState(false);
+
+    const baseTree = useMemo(() => {
+        if (isLoaded) {
+            return TreeState.createFromItemsMap(itemsMap, setItems, { getId, getParentId, complexIds });
+        }
+        return TreeState.blank({ getId, getParentId, complexIds }, itemsMap, setItems);
+    }, [...deps, isLoaded]);
+
+    const [incommingTree, setIncommingTree] = useState(baseTree);
+
+    const prevIsForceReload = usePrevious(isForceReload);
+    const dataSourceState = useDataSourceStateWithDefaults({ dataSourceState: props.dataSourceState });
+
+    const { tree: treeWithData, itemsStatusCollector, isLoaded: isTreeLoaded, isLoading, isFetching } = useLoadData({
+        getId,
+        complexIds,
+        api: () => props.api().then((items) => ({ items })),
+        tree: incommingTree,
+        dataSourceState: {
+            visibleCount: dataSourceState.visibleCount,
+            topIndex: dataSourceState.topIndex,
+            checked: dataSourceState.checked,
+            selectedId: dataSourceState.selectedId,
+        },
+        forceReload: isForceReload,
+        onForceReloadComplete: () => setIsForceReload(false),
+        showSelectedOnly,
+        isLoaded,
+        itemsStatusMap,
+    }, [...deps, isForceReload, incommingTree]);
+
+    const prevIsFetching = usePrevious(isFetching);
+
+    useEffect(() => {
+        if (prevIsForceReload !== isForceReload && isForceReload
+                && prevIsFetching !== isFetching && !isFetching) {
+            setIsForceReload(false);
+        }
+    }, [treeWithData]);
+
+    const reload = useCallback(() => {
+        setIncommingTree(TreeState.blank({ getId, getParentId, complexIds }, itemsMap, setItems));
+        setIsForceReload(true);
+    }, [setIsForceReload]);
+
+    const isTreeLoading = !isTreeLoaded || isLoading || isFetching;
+    const filteredTree = useFilterTree(
+        { tree: treeWithData, getFilter, dataSourceState, isLoading: isTreeLoading },
+        [treeWithData, isTreeLoading],
+    );
+
+    const sortTree = useSortTree(
+        { tree: filteredTree, sortBy, dataSourceState, isLoading: isTreeLoading },
+        [filteredTree, isTreeLoading],
+    );
+
+    const searchTree = useSearchTree(
+        {
+            tree: sortTree,
+            getSearchFields,
+            sortSearchByRelevance,
+            dataSourceState,
+            isLoading: isTreeLoading,
+        },
+        [sortTree, isTreeLoading],
+    );
+
+    const treeWithSelectedOnly = useSelectedOnlyTree({
+        tree: searchTree,
+        dataSourceState,
+        isLoading: isTreeLoading,
+    }, [searchTree, isTreeLoading]);
+
+    const tree = usePatchTree({
+        tree: treeWithSelectedOnly,
+        patch: showSelectedOnly ? null : patch,
+        isDeleted,
+        getNewItemPosition,
+        getItemTemporaryOrder,
+        sorting: dataSourceState.sorting,
+        sortBy,
+    });
+
+    const totalCount = useMemo(() => {
+        const { totalCount: rootTotalCount } = tree.visible.getItems(undefined);
+
+        return rootTotalCount ?? tree.visible.getTotalCount?.() ?? 0;
+    }, [tree.visible]);
+
+    return {
+        tree: showSelectedOnly ? tree.selectedOnly : tree.visible,
+        treeWithoutPatch: treeWithSelectedOnly.visible,
+        selectionTree: tree.full,
+        reload,
+        totalCount,
+        getItemStatus: itemsStatusCollector.getItemStatus(itemsMap),
+        rowOptions,
+        getRowOptions,
+        getParentId,
+        getId,
+        dataSourceState,
+        setDataSourceState,
+        isFoldedByDefault,
+        cascadeSelection,
+        showSelectedOnly,
+        selectAll,
+
+        isLoading,
+        isFetching,
+    };
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useLoadData.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useLoadData.ts
new file mode 100644
index 0000000000..9e2c02dacc
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useLoadData.ts
@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { DataSourceState, IImmutableMap, IMap, LazyDataSourceApi } from '../../../../../../../types';
+import { TreeState } from '../../../treeState';
+import { usePrevious } from '../../../../../../../hooks/usePrevious';
+import { isQueryChanged } from '../lazyTree/helpers';
+import { RecordStatus } from '../../../types';
+import { useItemsStatusCollector } from '../../common';
+import { useDepsChanged } from '../../common/useDepsChanged';
+import { getSelectedAndChecked } from '../../../treeStructure';
+import { NOT_FOUND_RECORD } from '../../../constants';
+
+export interface LoadResult<TItem, TId> {
+    isUpdated: boolean;
+    isOutdated: boolean;
+    tree: TreeState<TItem, TId>;
+    error?: Error;
+}
+
+export interface UseLoadDataProps<TItem, TId, TFilter = any> {
+    tree: TreeState<TItem, TId>;
+    api: LazyDataSourceApi<TItem, TId, TFilter>;
+    dataSourceState?: DataSourceState<TFilter, TId>;
+    forceReload?: boolean;
+    showSelectedOnly?: boolean;
+    itemsStatusMap?: IMap<TId, RecordStatus>;
+    complexIds?: boolean;
+    getId: (item: TItem) => TId;
+    isLoaded?: boolean;
+    onForceReloadComplete?: () => void;
+    patch?: IMap<TId, TItem> | IImmutableMap<TId, TItem>;
+}
+
+export function useLoadData<TItem, TId, TFilter = any>(
+    {
+        tree, api, dataSourceState, showSelectedOnly, itemsStatusMap, isLoaded: isPrevouslyLoaded,
+        complexIds, getId, onForceReloadComplete, forceReload, patch,
+    }: UseLoadDataProps<TItem, TId, TFilter>,
+    deps: any[],
+) {
+    const prevDataSourceState = usePrevious(dataSourceState);
+    const prevForceReload = usePrevious(forceReload);
+
+    const [loadedTree, setLoadedTree] = useState(tree);
+    const [isLoaded, setIsLoaded] = useState(isPrevouslyLoaded);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isFetching, setIsFetching] = useState(false);
+
+    const itemsStatusCollector = useItemsStatusCollector(
+        { itemsStatusMap, complexIds, getId },
+        [itemsStatusMap],
+    );
+
+    const watchedApi = useMemo(
+        () => itemsStatusCollector.watch(api),
+        [itemsStatusCollector, api],
+    );
+
+    const loadData = useCallback(async (
+        sourceTree: TreeState<TItem, TId>,
+        dsState: DataSourceState<TFilter, TId> = {},
+    ): Promise<LoadResult<TItem, TId>> => {
+        const loadingTree = sourceTree;
+        const { checked, ...partialDsState } = dsState;
+        try {
+            const newTreePromise = sourceTree.loadAll<TFilter>({
+                using: partialDsState.search ? 'visible' : undefined,
+                options: {
+                    api: watchedApi,
+                    filter: {
+                        ...dsState?.filter,
+                    },
+                },
+                dataSourceState: partialDsState,
+            });
+
+            const newTree = await newTreePromise;
+            const linkToTree = sourceTree;
+
+            // If tree is changed during this load, than there was reset occurred (new value arrived)
+            // We need to tell caller to reject this result
+            const isOutdated = linkToTree !== loadingTree;
+            const isUpdated = linkToTree !== newTree;
+            return { isUpdated, isOutdated, tree: newTree };
+        } catch (e) {
+            // TBD - correct error handling
+            console.error('useLoadData: Error while loading items.', e);
+            return { isUpdated: false, isOutdated: false, tree: loadingTree, error: e };
+        }
+    }, [api]);
+
+    const depsChanged = useDepsChanged(deps);
+
+    const shouldForceReload = prevForceReload !== forceReload && forceReload;
+
+    const selectedAndChecked = getSelectedAndChecked(dataSourceState, patch);
+    const shouldLoad = (!isFetching && !isLoaded && ((showSelectedOnly && selectedAndChecked.length) || !showSelectedOnly)) || forceReload;
+
+    if (!isLoaded) {
+        const checked = getSelectedAndChecked(dataSourceState, patch);
+        itemsStatusCollector.setPending(checked);
+    }
+
+    useEffect(() => {
+        if (shouldForceReload) {
+            setLoadedTree(tree);
+        }
+    }, [shouldForceReload]);
+
+    useEffect(() => {
+        if (shouldLoad) {
+            setIsFetching(true);
+            if (!isQueryChanged(prevDataSourceState, dataSourceState)) {
+                setIsLoading(true);
+            }
+            const checked = getSelectedAndChecked(dataSourceState, patch);
+            loadData(tree, dataSourceState)
+                .then(({ isOutdated, isUpdated, tree: newTree }) => {
+                    if (isUpdated && !isOutdated) {
+                        setLoadedTree(newTree);
+
+                        const notLoaded = checked.filter((id) => newTree.getById(id) === NOT_FOUND_RECORD);
+                        itemsStatusCollector.setNotFound(notLoaded);
+                        if (forceReload) {
+                            onForceReloadComplete();
+                        }
+                    }
+                })
+                .catch((e) => {
+                    itemsStatusCollector.setFailed(checked);
+                    throw e;
+                })
+                .finally(() => {
+                    setIsLoaded(true);
+                    setIsFetching(false);
+                    setIsLoading(false);
+                });
+        }
+    }, [shouldLoad, depsChanged, shouldForceReload]);
+
+    return { tree: loadedTree, isLoading, isFetching, isLoaded, itemsStatusCollector };
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/checked.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/checked.ts
new file mode 100644
index 0000000000..a5f7a16c62
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/checked.ts
@@ -0,0 +1,21 @@
+import isEqual from 'lodash.isequal';
+import { DataSourceState } from '../../../../../../types';
+
+export const isSelectedOrCheckedChanged = (dataSourceState: DataSourceState, prevDataSourceState: DataSourceState) => {
+    return (
+        dataSourceState.checked?.length && !isEqual(prevDataSourceState?.checked, dataSourceState.checked)
+    ) || (dataSourceState.selectedId !== null
+        && dataSourceState.selectedId !== undefined
+        && dataSourceState.selectedId !== prevDataSourceState?.selectedId);
+};
+
+export const getChecked = (dataSourceState: DataSourceState) => {
+    if (dataSourceState.checked !== null) {
+        return dataSourceState.checked;
+    }
+
+    if (dataSourceState.selectedId !== null && dataSourceState.selectedId !== undefined) {
+        return [dataSourceState.selectedId];
+    }
+    return [];
+};
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/constants.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/constants.ts
new file mode 100644
index 0000000000..9776102420
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/constants.ts
@@ -0,0 +1,5 @@
+export const STRATEGIES = {
+    sync: 'sync',
+    async: 'async',
+    lazy: 'lazy',
+} as const;
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/exposed.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/exposed.ts
new file mode 100644
index 0000000000..eede4e7233
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/exposed.ts
@@ -0,0 +1,3 @@
+export { useLazyFetchingAdvisor } from './lazyTree';
+export type { UseLazyFetchingAdvisorProps } from './lazyTree';
+export type { UseTreeProps } from './types';
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/index.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/index.ts
new file mode 100644
index 0000000000..dfde2f5d5b
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/index.ts
@@ -0,0 +1,15 @@
+import { useAsyncTree } from './asyncTree';
+import { useLazyTree } from './lazyTree';
+import { useSyncTree } from './syncTree';
+
+export const strategies = {
+    sync: useSyncTree,
+    async: useAsyncTree,
+    lazy: useLazyTree,
+};
+
+export type {
+    UseTreeProps,
+    LoadMissingRecords,
+    GetItemStatus,
+} from './types';
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/__tests__/useLazyTree.test.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/__tests__/useLazyTree.test.ts
new file mode 100644
index 0000000000..55fb88f8d2
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/__tests__/useLazyTree.test.ts
@@ -0,0 +1,276 @@
+import { getApiMock, renderHook, waitFor } from '@epam/uui-test-utils';
+import { useLazyTree } from '../useLazyTree';
+import { DataQueryFilter, DataSourceState } from '../../../../../../../../types';
+import { LocationItem } from '../../../../../../__tests__/mocks';
+import { demoData } from '@epam/uui-docs';
+import { FAILED_RECORD, NOT_FOUND_RECORD, newMap } from '../../../../exposed';
+import { ItemsStorage } from '../../../../ItemsStorage';
+import { RecordStatus } from '../../../../types';
+import { TreeStructure } from '../../../../treeStructure';
+
+describe('useLazyTree', () => {
+    let dataSourceState: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const setDataSourceState = (newDsState: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newDsState === 'function') {
+            dataSourceState = newDsState(dataSourceState);
+            return;
+        }
+        dataSourceState = newDsState;
+    };
+
+    const api = getApiMock(demoData.locations);
+    const getId = ({ id }: LocationItem) => id;
+    const getParentId = ({ parentId }: LocationItem) => parentId;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        dataSourceState = { topIndex: 0, visibleCount: 3 };
+    });
+
+    it('should path through minimal props', async () => {
+        const hookResult = renderHook(
+            (props) => useLazyTree({
+                type: 'lazy',
+                api,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+            expect(tree.isFetching).toBeTruthy();
+        });
+
+        let tree = hookResult.result.current;
+        expect(tree.isLoading).toBeTruthy();
+
+        await waitFor(() => {
+            tree = hookResult.result.current;
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        expect(tree).toEqual(expect.objectContaining({
+            dataSourceState,
+            setDataSourceState,
+            totalCount: 0,
+            getId,
+            getParentId: undefined,
+            rowOptions: undefined,
+            getRowOptions: undefined,
+            isFoldedByDefault: undefined,
+            cascadeSelection: undefined,
+            selectAll: undefined,
+            showSelectedOnly: undefined,
+
+            isFetching: false,
+            isLoading: false,
+        }));
+
+        expect(tree.tree instanceof TreeStructure).toBeTruthy();
+        expect(tree.selectionTree instanceof TreeStructure).toBeTruthy();
+        expect(typeof tree.getItemStatus).toBe('function');
+        expect(typeof tree.reload).toBe('function');
+        expect(typeof tree.loadMissingRecordsOnCheck).toBe('function');
+    });
+
+    it('should path through maximum props', async () => {
+        const rowOptions = { checkbox: { isVisible: true } };
+        const getRowOptions = () => ({ isReadonly: true });
+        const cascadeSelection = 'explicit';
+        const isFoldedByDefault = () => true;
+        const getChildCount = ({ childCount }) => childCount;
+        const selectAll = true;
+        const showSelectedOnly = true;
+
+        const hookResult = renderHook(
+            (props) => useLazyTree({
+                type: 'lazy',
+                api,
+                getId,
+                getParentId,
+                rowOptions,
+                getRowOptions,
+                cascadeSelection,
+                isFoldedByDefault,
+                showSelectedOnly,
+                getChildCount,
+                selectAll,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        const tree = hookResult.result.current;
+
+        expect(tree).toEqual(expect.objectContaining({
+            dataSourceState,
+            setDataSourceState,
+            totalCount: 0,
+            getId,
+            getParentId,
+            rowOptions,
+            getRowOptions,
+            isFoldedByDefault,
+            cascadeSelection,
+            showSelectedOnly,
+            selectAll,
+
+            isFetching: false,
+            isLoading: false,
+        }));
+
+        expect(tree.tree instanceof TreeStructure).toBeTruthy();
+        expect(tree.selectionTree instanceof TreeStructure).toBeTruthy();
+        expect(typeof tree.getItemStatus).toBe('function');
+        expect(typeof tree.reload).toBe('function');
+        expect(typeof tree.loadMissingRecordsOnCheck).toBe('function');
+    });
+
+    it('should defined itemsMap/setItems inside hook if not passed to props', async () => {
+        const hookResult = renderHook(
+            (props) => useLazyTree({
+                type: 'lazy',
+                api,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        const tree = hookResult.result.current;
+
+        const itemFromVisibleTree = tree.tree.getById('c-AF');
+        expect(itemFromVisibleTree).toEqual(expect.objectContaining({ id: 'c-AF', parentId: null }));
+
+        const itemFromSelectionTree = tree.selectionTree.getById('c-AF');
+        expect(itemFromSelectionTree).toEqual(expect.objectContaining({ id: 'c-AF', parentId: null }));
+
+        const unknownItemFromVisibleTree = tree.tree.getById('GW');
+        expect(unknownItemFromVisibleTree).toBe(NOT_FOUND_RECORD);
+
+        const unknownItemFromSelectionTree = tree.tree.getById('GW');
+        expect(unknownItemFromSelectionTree).toBe(NOT_FOUND_RECORD);
+    });
+
+    it('should use outer itemsMap/setItems inside hook if passed to props', async () => {
+        const newItem: LocationItem = {
+            id: 'GW',
+            parentId: 'c-AF',
+            childCount: 0,
+            type: 'country',
+            __typename: 'Location',
+            name: 'Guinea-Bissau',
+        };
+
+        const itemsStorage = new ItemsStorage({
+            items: [newItem],
+            params: { getId },
+        });
+
+        const hookResult = renderHook(
+            (props) => useLazyTree({
+                type: 'lazy',
+                api,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                itemsMap: itemsStorage.getItemsMap(),
+                setItems: itemsStorage.setItems,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        const tree = hookResult.result.current;
+
+        const itemFromVisibleTree = tree.tree.getById('GW');
+        const itemFromSelectionTree = tree.selectionTree.getById('GW');
+        expect(itemFromVisibleTree).toEqual(newItem);
+        expect(itemFromSelectionTree).toEqual(newItem);
+    });
+
+    it('should use inner itemsStatusMap if not passed to props', async () => {
+        dataSourceState.checked = ['GW'];
+        const hookResult = renderHook(
+            (props) => useLazyTree({
+                type: 'lazy',
+                api,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        const tree = hookResult.result.current;
+
+        const itemFromVisibleTree = tree.tree.getById('GW');
+        const itemFromSelectionTree = tree.selectionTree.getById('GW');
+        expect(itemFromVisibleTree).toEqual(NOT_FOUND_RECORD);
+        expect(itemFromSelectionTree).toEqual(NOT_FOUND_RECORD);
+
+        expect(typeof tree.getItemStatus).toBe('function');
+        expect(tree.getItemStatus!('GW')).toBe(NOT_FOUND_RECORD);
+    });
+
+    it('should use outer itemsStatusMap if passed to props', async () => {
+        const itemsStatusMap = newMap<string, RecordStatus>({ getId });
+        itemsStatusMap.set('GW', FAILED_RECORD);
+
+        const hookResult = renderHook(
+            (props) => useLazyTree({
+                type: 'lazy',
+                api,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                itemsStatusMap,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        const tree = hookResult.result.current;
+
+        const itemFromVisibleTree = tree.tree.getById('GW');
+        const itemFromSelectionTree = tree.selectionTree.getById('GW');
+        expect(itemFromVisibleTree).toEqual(NOT_FOUND_RECORD);
+        expect(itemFromSelectionTree).toEqual(NOT_FOUND_RECORD);
+
+        expect(typeof tree.getItemStatus).toBe('function');
+        expect(tree.getItemStatus!('GW')).toBe(FAILED_RECORD);
+    });
+});
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/helpers.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/helpers.ts
new file mode 100644
index 0000000000..7990e9865d
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/helpers.ts
@@ -0,0 +1,21 @@
+import isEqual from 'lodash.isequal';
+import { DataSourceState } from '../../../../../../../types';
+
+export const searchWasChanged = <TFilter, TId>(
+    prevValue?: DataSourceState<TFilter, TId>, newValue?: DataSourceState<TFilter, TId>,
+) => newValue?.search !== prevValue?.search;
+
+export const sortingWasChanged = <TFilter, TId>(
+    prevValue?: DataSourceState<TFilter, TId>, newValue?: DataSourceState<TFilter, TId>,
+) => !isEqual(newValue?.sorting, prevValue?.sorting);
+
+export const filterWasChanged = <TFilter, TId>(
+    prevValue: DataSourceState<TFilter, TId>, newValue?: DataSourceState<TFilter, TId>,
+) => !isEqual(newValue?.filter, prevValue?.filter);
+
+export const isQueryChanged = <TFilter, TId>(prevValue: DataSourceState<TFilter, TId>, newValue: DataSourceState<TFilter, TId>) =>
+    searchWasChanged(prevValue, newValue)
+    || sortingWasChanged(prevValue, newValue)
+    || filterWasChanged(prevValue, newValue)
+    || newValue?.page !== prevValue?.page
+    || newValue?.pageSize !== prevValue?.pageSize;
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/index.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/index.ts
new file mode 100644
index 0000000000..6aab866b3c
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/index.ts
@@ -0,0 +1,3 @@
+export { useLazyTree } from './useLazyTree';
+export { useLazyFetchingAdvisor } from './useLazyFetchingAdvisor';
+export type { UseLazyFetchingAdvisorProps } from './useLazyFetchingAdvisor';
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/types.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/types.ts
new file mode 100644
index 0000000000..33fd8ba317
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/types.ts
@@ -0,0 +1,17 @@
+import { PatchOptions } from '../../../../../../../types';
+import { STRATEGIES } from '../constants';
+import { CommonTreeConfig, ItemsStatuses, LazyDataSourceConfig, SharedItemsState } from '../types/common';
+
+export type LazyTreeProps<TItem, TId, TFilter> =
+    CommonTreeConfig<TItem, TId, TFilter>
+    & PatchOptions<TItem, TId>
+    & SharedItemsState<TItem, TId>
+    & ItemsStatuses<TId>
+    & LazyDataSourceConfig<TItem, TId, TFilter>
+    & {
+
+        /**
+         * Type of the tree to be supported.
+         */
+        type: typeof STRATEGIES.lazy;
+    };
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLazyFetchingAdvisor.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLazyFetchingAdvisor.ts
new file mode 100644
index 0000000000..b8d3d56b4a
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLazyFetchingAdvisor.ts
@@ -0,0 +1,59 @@
+import isEqual from 'lodash.isequal';
+import { usePrevious } from '../../../../../../../hooks/usePrevious';
+import { DataSourceState } from '../../../../../../../types';
+import { isQueryChanged } from './helpers';
+import { useCallback, useMemo } from 'react';
+
+export interface UseLazyFetchingAdvisorProps<TId, TFilter = any> {
+    dataSourceState: DataSourceState<TFilter, TId>;
+    filter?: TFilter;
+    forceReload?: boolean;
+    backgroundReload?: boolean;
+    showSelectedOnly?: boolean;
+}
+
+export function useLazyFetchingAdvisor<TId, TFilter = any>({
+    dataSourceState,
+    filter,
+    forceReload,
+    backgroundReload,
+    showSelectedOnly,
+}: UseLazyFetchingAdvisorProps<TId, TFilter>) {
+    const areMoreRowsNeeded = useCallback((
+        prevValue?: DataSourceState<TFilter, TId>,
+        newValue?: DataSourceState<TFilter, TId>,
+    ) => {
+        const isFetchPositionAndAmountChanged = prevValue?.topIndex !== newValue?.topIndex
+            || prevValue?.visibleCount !== newValue?.visibleCount;
+
+        return isFetchPositionAndAmountChanged;
+    }, []);
+
+    const prevFilter = usePrevious(filter);
+    const prevDataSourceState = usePrevious(dataSourceState);
+    const prevShowSelectedOnly = usePrevious(showSelectedOnly);
+
+    const isFoldingChanged = !prevDataSourceState || dataSourceState.folded !== prevDataSourceState.folded;
+
+    const shouldRefetch = useMemo(
+        () => !prevDataSourceState
+            || !isEqual(prevFilter, filter)
+            || isQueryChanged(prevDataSourceState, dataSourceState)
+            || (prevShowSelectedOnly !== showSelectedOnly && !showSelectedOnly)
+            || forceReload,
+        [dataSourceState, filter, forceReload],
+    );
+
+    const moreRowsNeeded = areMoreRowsNeeded(prevDataSourceState, dataSourceState);
+
+    const shouldReload = shouldRefetch && !backgroundReload;
+    const shouldLoad = isFoldingChanged || moreRowsNeeded || shouldReload;
+    const shouldFetch = shouldRefetch || isFoldingChanged || moreRowsNeeded;
+
+    return useMemo(() => ({
+        shouldLoad,
+        shouldRefetch,
+        shouldFetch,
+        shouldReload,
+    }), [shouldLoad, shouldRefetch, shouldFetch]);
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLazyTree.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLazyTree.ts
new file mode 100644
index 0000000000..ecf71f8ef0
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLazyTree.ts
@@ -0,0 +1,202 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { LazyTreeProps } from './types';
+import { usePrevious } from '../../../../../../../hooks/usePrevious';
+import { useFoldingService } from '../../../../dataRows/services';
+import { useLoadData } from './useLoadData';
+import { UseTreeResult } from '../../types';
+import { useDataSourceStateWithDefaults, useSelectedOnlyTree, useItemsStorage, usePatchTree, useItemsStatusCollector } from '../../common';
+import { TreeState } from '../../../treeState';
+import { useLazyFetchingAdvisor } from './useLazyFetchingAdvisor';
+import { getSelectedAndChecked } from '../../../treeStructure';
+import { isSelectedOrCheckedChanged } from '../checked';
+
+export function useLazyTree<TItem, TId, TFilter = any>(
+    { flattenSearchResults = true, ...restProps }: LazyTreeProps<TItem, TId, TFilter>,
+    deps: any[],
+): UseTreeResult<TItem, TId, TFilter> {
+    const props = { flattenSearchResults, ...restProps };
+    const {
+        filter, backgroundReload, showSelectedOnly,
+        isFoldedByDefault, getId, getParentId, setDataSourceState,
+        cascadeSelection, getRowOptions, rowOptions, selectAll, fetchStrategy,
+        getChildCount, itemsStatusMap, complexIds, patch, isDeleted, getNewItemPosition, sortBy, getItemTemporaryOrder,
+    } = props;
+
+    const dataSourceState = useDataSourceStateWithDefaults({ dataSourceState: props.dataSourceState });
+    const { itemsMap, setItems } = useItemsStorage({
+        itemsMap: props.itemsMap,
+        setItems: props.setItems,
+        params: { getId, complexIds },
+    });
+
+    const itemsStatusCollector = useItemsStatusCollector({ itemsStatusMap, complexIds, getId }, []);
+
+    const api = useMemo(
+        () => itemsStatusCollector.watch(props.api),
+        [itemsStatusCollector, props.api],
+    );
+
+    const blankTree = useMemo(
+        () => TreeState.blank({ getId, getParentId, getChildCount, complexIds }, itemsMap, setItems),
+        deps,
+    );
+
+    const [treeWithData, setTreeWithData] = useState(blankTree);
+
+    const prevDataSourceState = usePrevious(dataSourceState);
+
+    const [isFetching, setIsFetching] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isForceReload, setIsForceReload] = useState(false);
+
+    const { isFolded } = useFoldingService({
+        getId,
+        isFoldedByDefault,
+        dataSourceState,
+        setDataSourceState,
+    });
+
+    useEffect(() => {
+        setTreeWithData(blankTree);
+    }, [blankTree]);
+
+    const { loadMissing, loadMissingOnCheck } = useLoadData({
+        api,
+        filter,
+        dataSourceState,
+        isFolded,
+        fetchStrategy,
+        flattenSearchResults,
+        getChildCount,
+        cascadeSelection,
+    });
+
+    const loadMissingRecordsOnCheck = useCallback(async (id: TId, isChecked: boolean, isRoot: boolean) => {
+        const newTree = await loadMissingOnCheck(tree, id, isChecked, isRoot);
+        if (tree !== treeWithData || tree !== newTree) {
+            setTreeWithData(newTree);
+        }
+
+        return newTree.full;
+    }, [loadMissingOnCheck, setTreeWithData, treeWithData]);
+
+    const { shouldRefetch, shouldLoad, shouldFetch } = useLazyFetchingAdvisor({
+        dataSourceState,
+        filter,
+        forceReload: isForceReload,
+        backgroundReload,
+        showSelectedOnly,
+    });
+
+    useEffect(() => {
+        if (showSelectedOnly && isSelectedOrCheckedChanged(dataSourceState, prevDataSourceState)) {
+            itemsStatusCollector.setPending(getSelectedAndChecked(dataSourceState, patch));
+
+            loadMissing({
+                tree: treeWithData,
+                using: 'full',
+                abortInProgress: shouldRefetch,
+                dataSourceState: {
+                    visibleCount: 0,
+                    topIndex: 0,
+                },
+            })
+                .then(({ isUpdated, isOutdated, tree: newTree }) => {
+                    if (!isOutdated && (isUpdated || newTree !== treeWithData)) {
+                        setTreeWithData(newTree);
+                    }
+                });
+        }
+    }, [showSelectedOnly, dataSourceState.checked, dataSourceState.selectedId]);
+
+    useEffect(() => {
+        if (showSelectedOnly) {
+            return;
+        }
+
+        let currentTree = treeWithData;
+        if (shouldRefetch) {
+            setIsFetching(true);
+            currentTree = treeWithData.clearStructure();
+        }
+
+        if (shouldLoad) {
+            if (currentTree !== treeWithData) {
+                setTreeWithData(currentTree);
+            }
+            setIsLoading(true);
+        }
+
+        if (shouldFetch) {
+            loadMissing({
+                tree: currentTree,
+                using: 'visible',
+                abortInProgress: shouldRefetch,
+            })
+                .then(({ isUpdated, isOutdated, tree: newTree }) => {
+                    if (!isOutdated && (isUpdated || newTree !== treeWithData)) {
+                        setTreeWithData(newTree);
+                    }
+                }).finally(() => {
+                    setIsFetching(false);
+                    setIsLoading(false);
+                    if (isForceReload === true) {
+                        setIsForceReload(false);
+                    }
+                });
+        }
+    }, [
+        showSelectedOnly,
+        shouldFetch,
+        shouldLoad,
+        shouldRefetch,
+    ]);
+
+    const treeWithSelectedOnly = useSelectedOnlyTree({
+        tree: treeWithData,
+        dataSourceState,
+        isLoading: isLoading || isFetching,
+    }, [treeWithData]);
+
+    const tree = usePatchTree({
+        tree: treeWithSelectedOnly,
+        patch: showSelectedOnly ? null : patch,
+        isDeleted,
+        getNewItemPosition,
+        getItemTemporaryOrder,
+        sorting: dataSourceState.sorting,
+        sortBy,
+    });
+
+    const reload = useCallback(() => {
+        setIsForceReload(true);
+    }, [props, setTreeWithData]);
+
+    const totalCount = useMemo(() => {
+        const { totalCount: rootTotalCount } = tree.visible.getItems(undefined);
+
+        return rootTotalCount ?? tree.visible.getTotalCount?.() ?? 0;
+    }, [tree.visible]);
+
+    return {
+        tree: showSelectedOnly ? tree.selectedOnly : tree.visible,
+        treeWithoutPatch: treeWithSelectedOnly.visible,
+        selectionTree: tree.full,
+        totalCount,
+        dataSourceState,
+        setDataSourceState,
+        isFoldedByDefault,
+        getId,
+        getParentId,
+        cascadeSelection,
+        getRowOptions,
+        rowOptions,
+        reload,
+        isFetching,
+        isLoading,
+        getItemStatus: itemsStatusCollector.getItemStatus(itemsMap),
+        loadMissingRecordsOnCheck,
+        showSelectedOnly,
+        selectAll,
+    };
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLoadData.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLoadData.ts
new file mode 100644
index 0000000000..e31a701de3
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLoadData.ts
@@ -0,0 +1,153 @@
+import { useCallback, useRef } from 'react';
+import { CascadeSelectionTypes, DataSourceState, LazyDataSourceApi } from '../../../../../../../types';
+import isEqual from 'lodash.isequal';
+import { TreeState } from '../../../treeState';
+import { Tree } from '../../../Tree';
+import { LazyTreeProps } from './types';
+import { CommonTreeConfig } from '../types';
+import { ROOT_ID } from '../../../constants';
+import { TreeStructureId } from '../../../treeState/types';
+
+export interface UseLoadDataProps<TItem, TId, TFilter = any> extends
+    Pick<LazyTreeProps<TItem, TId, TFilter>, 'getChildCount'>,
+    Pick<CommonTreeConfig<TItem, TId, TFilter>, 'dataSourceState' | 'cascadeSelection'> {
+
+    api: LazyDataSourceApi<TItem, TId, TFilter>;
+    filter?: TFilter;
+    isFolded: (item: TItem) => boolean;
+    fetchStrategy?: 'sequential' | 'parallel';
+    flattenSearchResults?: boolean;
+    getChildCount?(item: TItem): number;
+}
+
+export interface LoadResult<TItem, TId> {
+    isUpdated: boolean;
+    isOutdated: boolean;
+    tree: TreeState<TItem, TId>;
+}
+
+interface LoadMissingOptions<TItem, TId, TFilter> {
+    using?: TreeStructureId;
+    tree: TreeState<TItem, TId>;
+    abortInProgress?: boolean;
+    loadAllChildren?(id: TId): boolean;
+    isLoadStrict?: boolean;
+    dataSourceState?: DataSourceState<TFilter, TId>;
+    withNestedChildren?: boolean;
+}
+
+export function useLoadData<TItem, TId, TFilter = any>(
+    props: UseLoadDataProps<TItem, TId, TFilter>,
+) {
+    const { api, filter, isFolded, cascadeSelection } = props;
+
+    const promiseInProgressRef = useRef<Promise<LoadResult<TItem, TId>>>();
+
+    const loadMissingImpl = useCallback(async ({
+        using,
+        tree,
+        loadAllChildren,
+        isLoadStrict,
+        dataSourceState,
+        withNestedChildren,
+    }: LoadMissingOptions<TItem, TId, TFilter>): Promise<LoadResult<TItem, TId>> => {
+        const loadingTree = tree;
+        const completeDsState = { ...props.dataSourceState, ...dataSourceState };
+        try {
+            const newTreePromise = tree.load({
+                using,
+                options: {
+                    ...props,
+                    loadAllChildren,
+                    isLoadStrict,
+                    isFolded,
+                    api,
+                    filter: {
+                        ...filter,
+                        ...props.dataSourceState?.filter,
+                        ...dataSourceState?.filter,
+                    },
+                },
+                dataSourceState: completeDsState,
+                withNestedChildren,
+            });
+
+            const newTree = await newTreePromise;
+            const linkToTree = tree;
+
+            // If tree is changed during this load, than there was reset occurred (new value arrived)
+            // We need to tell caller to reject this result
+            const isOutdated = linkToTree !== loadingTree;
+            const isUpdated = linkToTree !== newTree;
+            return { isUpdated, isOutdated, tree: newTree };
+        } catch (e) {
+            // TBD - correct error handling
+            console.error('LazyListView: Error while loading items.', e);
+            return { isUpdated: false, isOutdated: false, tree: loadingTree };
+        }
+    }, [isFolded, api, filter, props.dataSourceState]);
+
+    const loadMissing = useCallback(({
+        tree,
+        using,
+        abortInProgress,
+        loadAllChildren,
+        isLoadStrict,
+        dataSourceState,
+        withNestedChildren,
+    }: LoadMissingOptions<TItem, TId, TFilter>): Promise<LoadResult<TItem, TId>> => {
+        // Make tree updates sequential, by executing all consequent calls after previous promise completed
+        if (promiseInProgressRef.current === null || abortInProgress) {
+            promiseInProgressRef.current = Promise.resolve({ isUpdated: false, isOutdated: false, tree });
+        }
+
+        promiseInProgressRef.current = promiseInProgressRef.current.then(() =>
+            loadMissingImpl({ tree, using, loadAllChildren, isLoadStrict, dataSourceState, withNestedChildren }));
+
+        return promiseInProgressRef.current;
+    }, [loadMissingImpl]);
+
+    const loadMissingOnCheck = useCallback(async (currentTree: TreeState<TItem, TId>, id: TId, isChecked: boolean, isRoot: boolean) => {
+        const isImplicitMode = cascadeSelection === CascadeSelectionTypes.IMPLICIT;
+
+        if (!cascadeSelection && !isRoot) {
+            return currentTree;
+        }
+
+        const loadNestedLayersChildren = !isImplicitMode;
+        const parents = Tree.getParents(id, currentTree.full);
+        const { tree: treeWithMissingRecords } = await loadMissing({
+            tree: currentTree,
+            // If cascadeSelection is implicit and the element is unchecked, it is necessary to load all children
+            // of all parents of the unchecked element to be checked explicitly. Only one layer of each parent should be loaded.
+            // Otherwise, should be loaded only checked element and all its nested children.
+            loadAllChildren: (itemId) => {
+                if (!cascadeSelection) {
+                    return isChecked && isRoot;
+                }
+
+                if (isImplicitMode) {
+                    return itemId === ROOT_ID || parents.some((parent) => isEqual(parent, itemId));
+                }
+                const { ids } = currentTree.full.getItems(undefined);
+                const rootIsNotLoaded = ids.length === 0;
+
+                // `isEqual` is used, because complex ids can be recreated after fetching of parents.
+                // So, they should be compared not by reference, but by value.
+                return isRoot
+                    || isEqual(itemId, id)
+                    || (props.dataSourceState.search
+                        && (parents.some((parent) => isEqual(parent, itemId))
+                            || (itemId === ROOT_ID && rootIsNotLoaded)));
+            },
+            isLoadStrict: true,
+            dataSourceState: { search: null },
+            withNestedChildren: loadNestedLayersChildren,
+            using: 'full',
+        });
+
+        return treeWithMissingRecords;
+    }, [cascadeSelection, loadMissing, props.dataSourceState.search]);
+
+    return { loadMissing, loadMissingOnCheck };
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/__tests__/useSyncTree.test.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/__tests__/useSyncTree.test.ts
new file mode 100644
index 0000000000..1db6bb1431
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/__tests__/useSyncTree.test.ts
@@ -0,0 +1,183 @@
+import { renderHook, waitFor } from '@epam/uui-test-utils';
+import { useSyncTree } from '../useSyncTree';
+import { DataQueryFilter, DataSourceState } from '../../../../../../../../types';
+import { LocationItem } from '../../../../../../__tests__/mocks';
+import { demoData } from '@epam/uui-docs';
+import { NOT_FOUND_RECORD } from '../../../../exposed';
+import { ItemsStorage } from '../../../../ItemsStorage';
+import { TreeStructure } from '../../../../treeStructure';
+
+describe('useSyncTree', () => {
+    let dataSourceState: DataSourceState<DataQueryFilter<LocationItem>, string>;
+    const setDataSourceState = (newDsState: React.SetStateAction<DataSourceState<DataQueryFilter<LocationItem>, string>>) => {
+        if (typeof newDsState === 'function') {
+            dataSourceState = newDsState(dataSourceState);
+            return;
+        }
+        dataSourceState = newDsState;
+    };
+
+    const items = demoData.locations;
+    const getId = ({ id }: LocationItem) => id;
+    const getParentId = ({ parentId }: LocationItem) => parentId;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        dataSourceState = { topIndex: 0, visibleCount: 3 };
+    });
+
+    it('should path through minimal props', async () => {
+        const hookResult = renderHook(
+            (props) => useSyncTree({
+                type: 'sync',
+                items,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        const tree = hookResult.result.current;
+
+        expect(tree).toEqual(expect.objectContaining({
+            dataSourceState,
+            setDataSourceState,
+            totalCount: 42,
+            getId,
+            getParentId: undefined,
+            rowOptions: undefined,
+            getRowOptions: undefined,
+            isFoldedByDefault: undefined,
+            cascadeSelection: undefined,
+            selectAll: undefined,
+            showSelectedOnly: undefined,
+        }));
+
+        expect(tree.tree instanceof TreeStructure).toBeTruthy();
+        expect(tree.selectionTree instanceof TreeStructure).toBeTruthy();
+        expect(tree.getItemStatus).toBeUndefined();
+        expect(typeof tree.reload).toBe('function');
+    });
+
+    it('should path through maximum props', async () => {
+        const rowOptions = { checkbox: { isVisible: true } };
+        const getRowOptions = () => ({ isReadonly: true });
+        const cascadeSelection = 'explicit';
+        const isFoldedByDefault = () => true;
+        const selectAll = true;
+        const showSelectedOnly = true;
+
+        const hookResult = renderHook(
+            (props) => useSyncTree({
+                type: 'sync',
+                items,
+                getId,
+                getParentId,
+                rowOptions,
+                getRowOptions,
+                cascadeSelection,
+                isFoldedByDefault,
+                showSelectedOnly,
+                selectAll,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        const tree = hookResult.result.current;
+
+        expect(tree).toEqual(expect.objectContaining({
+            dataSourceState,
+            setDataSourceState,
+            totalCount: 42,
+            getId,
+            getParentId,
+            rowOptions,
+            getRowOptions,
+            isFoldedByDefault,
+            cascadeSelection,
+            showSelectedOnly,
+            selectAll,
+        }));
+
+        expect(tree.tree instanceof TreeStructure).toBeTruthy();
+        expect(tree.selectionTree instanceof TreeStructure).toBeTruthy();
+        expect(tree.getItemStatus).toBeUndefined();
+        expect(typeof tree.reload).toBe('function');
+    });
+
+    it('should defined itemsMap/setItems inside hook if not passed to props', async () => {
+        const hookResult = renderHook(
+            (props) => useSyncTree({
+                type: 'sync',
+                items,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        const tree = hookResult.result.current;
+
+        const itemFromVisibleTree = tree.tree.getById('BJ');
+        expect(itemFromVisibleTree).toEqual(expect.objectContaining({ id: 'BJ', parentId: 'c-AF' }));
+
+        const itemFromSelectionTree = tree.selectionTree.getById('BJ');
+        expect(itemFromSelectionTree).toEqual(expect.objectContaining({ id: 'BJ', parentId: 'c-AF' }));
+
+        const unknownItemFromVisibleTree = tree.tree.getById('GW');
+        expect(unknownItemFromVisibleTree).toBe(NOT_FOUND_RECORD);
+
+        const unknownItemFromSelectionTree = tree.tree.getById('GW');
+        expect(unknownItemFromSelectionTree).toBe(NOT_FOUND_RECORD);
+    });
+
+    it('should use setItems inside hook if passed to props', async () => {
+        const itemsStorage = new ItemsStorage({
+            items: [],
+            params: { getId },
+        });
+        expect(itemsStorage.getItemsMap().get('GM')).toBeUndefined();
+
+        const hookResult = renderHook(
+            (props) => useSyncTree({
+                type: 'sync',
+                items,
+                getId,
+                dataSourceState,
+                setDataSourceState,
+                setItems: itemsStorage.setItems,
+                ...props,
+            }, []),
+            { initialProps: {} },
+        );
+
+        await waitFor(() => {
+            const tree = hookResult.result.current;
+
+            expect(tree.isFetching).toBeFalsy();
+        });
+
+        const tree = hookResult.result.current;
+
+        const itemFromVisibleTree = tree.tree.getById('GM');
+        const itemFromSelectionTree = tree.selectionTree.getById('GM');
+        const gmItem = { __typename: 'Location', childCount: 6, id: 'GM', name: 'Gambia', parentId: 'c-AF', type: 'country' };
+        expect(itemFromVisibleTree).toEqual(gmItem);
+        expect(itemFromSelectionTree).toEqual(gmItem);
+
+        expect(itemsStorage.getItemsMap().get('GM')).toEqual(gmItem);
+    });
+});
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/index.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/index.ts
new file mode 100644
index 0000000000..5208bfae1c
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/index.ts
@@ -0,0 +1 @@
+export { useSyncTree } from './useSyncTree';
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/types.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/types.ts
new file mode 100644
index 0000000000..7a189a9a11
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/types.ts
@@ -0,0 +1,18 @@
+import { FilterConfig, PatchOptions, SearchConfig, SortConfig } from '../../../../../../../types';
+import { STRATEGIES } from '../constants';
+import { ArrayDataSourceConfig, CommonTreeConfig, SharedItemsState } from '../types/common';
+
+export type SyncTreeProps<TItem, TId, TFilter> =
+    CommonTreeConfig<TItem, TId, TFilter>
+    & PatchOptions<TItem, TId>
+    & SearchConfig<TItem>
+    & SortConfig<TItem>
+    & FilterConfig<TItem, TFilter>
+    & Pick<SharedItemsState<TItem, TId>, 'setItems'>
+    & ArrayDataSourceConfig<TItem>
+    & {
+        /**
+         * Type of the tree to be supported.
+         */
+        type: typeof STRATEGIES.sync;
+    };
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/useCreateTree.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/useCreateTree.ts
new file mode 100644
index 0000000000..1dcb67cf5f
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/useCreateTree.ts
@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { SyncTreeProps } from './types';
+import { TreeState } from '../../../treeState';
+import { SharedItemsState } from '../types';
+
+export interface UseCreateTreeProps<TItem, TId, TFilter = any> extends
+    Pick<
+    SyncTreeProps<TItem, TId, TFilter>,
+    'complexIds' | 'getId' | 'getParentId'
+    >,
+    SharedItemsState<TItem, TId> {
+    items?: TItem[] | TreeState<TItem, TId>;
+}
+
+export function useCreateTree<TItem, TId, TFilter = any>(
+    props: UseCreateTreeProps<TItem, TId, TFilter>,
+    deps: any[],
+): TreeState<TItem, TId> {
+    const { items, itemsMap, setItems, complexIds, getId, getParentId } = props;
+    const tree = useMemo(() => {
+        if (items instanceof TreeState) {
+            return items;
+        }
+
+        return TreeState.createFromItems<TItem, TId>(
+            items,
+            itemsMap,
+            { getId, getParentId, complexIds },
+            setItems,
+        );
+    }, [...deps, itemsMap]);
+
+    return tree;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/useSyncTree.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/useSyncTree.ts
new file mode 100644
index 0000000000..4eed9c6026
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/useSyncTree.ts
@@ -0,0 +1,106 @@
+import { useCallback, useMemo, useState } from 'react';
+import { SyncTreeProps } from './types';
+import { useCreateTree } from './useCreateTree';
+import {
+    useFilterTree, useSearchTree, useSortTree, useDataSourceStateWithDefaults,
+    useItemsStorage, usePatchTree, useSelectedOnlyTree,
+} from '../../common';
+import { UseTreeResult } from '../../types';
+
+export function useSyncTree<TItem, TId, TFilter = any>(
+    { sortSearchByRelevance = true, items, ...restProps }: SyncTreeProps<TItem, TId, TFilter>,
+    deps: any[],
+): UseTreeResult<TItem, TId, TFilter> {
+    const props = { ...restProps, sortSearchByRelevance };
+    const [triggerValue, trigger] = useState(false);
+
+    const resetTree = useCallback(() => {
+        trigger((currentTriggerValue) => !currentTriggerValue);
+    }, [trigger]);
+
+    const {
+        getId,
+        getParentId,
+        complexIds,
+        getFilter,
+        getSearchFields,
+        sortBy,
+        rowOptions,
+        getRowOptions,
+        setDataSourceState,
+        isFoldedByDefault,
+        cascadeSelection,
+        showSelectedOnly,
+        selectAll,
+    } = props;
+
+    const { itemsMap, setItems } = useItemsStorage({
+        items,
+        setItems: props.setItems,
+        params: { getId, complexIds },
+    });
+
+    const fullTree = useCreateTree(
+        { items, itemsMap, setItems, getId, getParentId, complexIds },
+        [...deps, items, itemsMap, triggerValue],
+    );
+
+    const dataSourceState = useDataSourceStateWithDefaults({ dataSourceState: props.dataSourceState });
+
+    const filteredTree = useFilterTree(
+        { tree: fullTree, getFilter, dataSourceState },
+        [fullTree],
+    );
+
+    const sortTree = useSortTree(
+        { tree: filteredTree, sortBy, dataSourceState },
+        [filteredTree],
+    );
+
+    const searchTree = useSearchTree(
+        { tree: sortTree, getSearchFields, sortSearchByRelevance, dataSourceState },
+        [sortTree],
+    );
+
+    const treeWithSelectedOnly = useSelectedOnlyTree({
+        tree: searchTree,
+        dataSourceState,
+    }, [searchTree]);
+
+    const tree = usePatchTree({
+        tree: treeWithSelectedOnly,
+        patch: showSelectedOnly ? null : restProps.patch,
+        isDeleted: restProps.isDeleted,
+        getNewItemPosition: restProps.getNewItemPosition,
+        sorting: dataSourceState.sorting,
+        sortBy: restProps.sortBy,
+    });
+
+    const reload = useCallback(() => {
+        resetTree();
+    }, [resetTree]);
+
+    const totalCount = useMemo(() => {
+        const { totalCount: rootTotalCount } = tree.visible.getItems(undefined);
+
+        return rootTotalCount ?? tree.visible.getTotalCount?.() ?? 0;
+    }, [tree.visible]);
+
+    return {
+        tree: showSelectedOnly ? tree.selectedOnly : tree.visible,
+        treeWithoutPatch: treeWithSelectedOnly.visible,
+        selectionTree: tree.full,
+        totalCount,
+        rowOptions,
+        getRowOptions,
+        getParentId,
+        getId,
+        dataSourceState,
+        setDataSourceState,
+        isFoldedByDefault,
+        reload,
+        cascadeSelection,
+        showSelectedOnly,
+        selectAll,
+    };
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts
new file mode 100644
index 0000000000..4edf329a75
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts
@@ -0,0 +1,149 @@
+import {
+    BaseDataSourceConfig,
+    DataSourceState, IMap, LazyDataSourceApi,
+    SetDataSourceState,
+} from '../../../../../../../types';
+import { ItemsMap } from '../../../ItemsMap';
+import { ItemsStorage } from '../../../ItemsStorage';
+import { RecordStatus } from '../../../types';
+
+/**
+ * Tree configuration.
+ */
+export interface CommonTreeConfig<TItem, TId, TFilter = any> extends BaseDataSourceConfig<TItem, TId, TFilter> {
+    /**
+     * State of the dataSource.
+     */
+    dataSourceState: DataSourceState<TFilter, TId>;
+
+    /**
+     * DataSource state update handler.
+     */
+    setDataSourceState: SetDataSourceState<TFilter, TId>;
+}
+
+/**
+ * Loading state of the tree.
+ */
+export interface ITreeLoadingState {
+    /**
+     * Are tree records loading silently.
+     */
+    isFetching?: boolean;
+    /**
+     * Are tree records loading loadly (show loading placeholders, etc).
+     */
+    isLoading?: boolean;
+}
+
+/**
+ * Actions, allowed to be performed on the tree.
+ */
+export interface ITreeActions {
+    /**
+     * Tree reloading handler.
+     */
+    reload(): void;
+}
+
+export interface TreeRowsStats {
+    completeFlatListRowsCount: number;
+    totalCount: number;
+}
+
+export interface SharedItemsState<TItem, TId> {
+    /**
+     * Map of shared items.
+     */
+    itemsMap?: ItemsMap<TId, TItem>;
+
+    /**
+     * Items updating listener, which fires on items loading/reloading/reset.
+     */
+    setItems?: ItemsStorage<TItem, TId>['setItems'];
+}
+
+export interface ItemsStatuses<TId> {
+    /**
+     * Map of items statuses.
+     */
+    itemsStatusMap?: IMap<TId, RecordStatus>;
+}
+
+export interface LazyDataSourceConfig<TItem, TId, TFilter> {
+    /**
+     * A function to retrieve the data, asynchronously.
+     * This function usually performs a REST API call.
+     * API is used to retrieve lists of items.
+     * It is expected to:
+     * - be able to handle paging (via from/count params)
+     * - be able to retrieve specific items by the list of their ids
+     * - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)
+     */
+    api: LazyDataSourceApi<TItem, TId, TFilter>;
+
+    /**
+     * Should return number of children of the item.
+     * If it returns > 0, the item is assumed to have children and to be foldable.
+     * Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.
+     * In this case, you can implement getChildCount as (i) => i.childCount.
+     *
+     * If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).
+     * Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode.
+     */
+    getChildCount?(item: TItem): number;
+
+    /**
+     * A filter to pass to API.
+     * Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.
+     * Use this prop if you need to apply some filter in any case.
+     * Prefer to use filter in the DataSourceState for end-user editable filters.
+     */
+    filter?: TFilter;
+
+    /**
+     * Defines how to fetch children:
+     * sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.
+     * parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.
+     * Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy.
+     */
+    fetchStrategy?: 'sequential' | 'parallel';
+
+    /**
+     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.
+     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.
+     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.
+     * It is required to add blockers/spinners to the components, built on your own.
+     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`.
+     */
+    backgroundReload?: boolean;
+
+    /**
+     * Falls back to plain list from tree, if there's search.
+     * Default is true.
+     *
+     * If enabled, and search is active:
+     * - API will be called with parentId and parent undefined
+     * - getChildCount is ignored, all nodes are assumed to have no children
+     *
+     * See more here: https://github.com/epam/UUI/issues/8
+     */
+    flattenSearchResults?: boolean;
+}
+
+export interface AsyncDataSourceConfig<TItem> {
+    /**
+     * A function to retrieve the data, asynchronously. This function usually performs a REST API call.
+     * Should return the array of items, which will be processed by dataSource.
+     * This api called only once during the initialization and assumed to return the full amount of data.
+     * For lazy loading cases, use LazyDataSource
+     */
+    api(): Promise<TItem[]>;
+}
+
+export interface ArrayDataSourceConfig<TItem> {
+    /**
+     * Data, which should be represented by a DataSource.
+     */
+    items?: TItem[];
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/types/index.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/types/index.ts
new file mode 100644
index 0000000000..a94061f034
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/types/index.ts
@@ -0,0 +1,2 @@
+export * from './common';
+export * from './strategies';
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/types/strategies.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/types/strategies.ts
new file mode 100644
index 0000000000..6711aebd3e
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/strategies/types/strategies.ts
@@ -0,0 +1,52 @@
+import { UseTreeResult } from '../../types';
+import { STRATEGIES } from '../constants';
+import { LazyTreeProps } from '../lazyTree/types';
+import { SyncTreeProps } from '../syncTree/types';
+import { AsyncTreeProps } from '../asyncTree/types';
+import { ITree } from '../../../ITree';
+import { RecordStatus } from '../../../types';
+
+export type Strategies = typeof STRATEGIES[keyof typeof STRATEGIES];
+
+export type ExtractTreeProps<T extends Strategies, TItem, TId, TFilter = any> = Extract<UseTreeProps< TItem, TId, TFilter>, { type: T }>;
+
+export type TreeHook<T extends Strategies> =
+    <TItem, TId, TFilter = any>(
+        props: ExtractTreeProps<T, TItem, TId, TFilter>,
+        deps: any[],
+    ) => UseTreeResult<TItem, TId, TFilter>;
+
+/**
+ * useTree hook configuration.
+ */
+export type UseTreeProps<TItem, TId, TFilter = any> = (
+    SyncTreeProps<TItem, TId, TFilter>
+    | AsyncTreeProps<TItem, TId, TFilter>
+    | LazyTreeProps<TItem, TId, TFilter>
+);
+
+/**
+ * Load missing records getter.
+ */
+export interface LoadMissingRecords<TItem, TId> {
+    /**
+     * Loads missing records and provides a fulfilled tree.
+     * @param id - id of an item, which is checked and records should be loaded for.
+     * @param isChecked - checking status of the record.
+     * @param isRoot - a flag, which marks if all records should be checked/unchecked.
+     * @returns fulfilled tree with missing records, those required to be loaded for checking.
+     */
+    loadMissingRecordsOnCheck?: (id: TId, isChecked: boolean, isRoot: boolean) => Promise<ITree<TItem, TId>>;
+}
+
+/**
+ * Item status getter.
+ */
+export interface GetItemStatus<TId> {
+    /**
+     * Provides a status of the given item.
+     * @param id - id of an item, status to be provided for.
+     * @returns status of the item.
+     */
+    getItemStatus?: (id: TId) => RecordStatus;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/types.ts b/uui-core/src/data/processing/views/tree/hooks/types.ts
new file mode 100644
index 0000000000..a2cb3cc9b5
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/types.ts
@@ -0,0 +1,33 @@
+import { ITree } from '../ITree';
+import { CommonTreeConfig, GetItemStatus, LoadMissingRecords, ITreeActions, ITreeLoadingState } from './strategies/types';
+
+/**
+ * Result of the useTree hook.
+ */
+export interface UseTreeResult<TItem, TId, TFilter = any> extends
+    CommonTreeConfig<TItem, TId, TFilter>,
+    ITreeLoadingState,
+    ITreeActions,
+    LoadMissingRecords<TItem, TId>,
+    GetItemStatus<TId> {
+
+    /**
+     * Tree-like data, rows to be build from.
+     */
+    tree: ITree<TItem, TId>;
+
+    /**
+     * Tree-like data, selected rows to be build from and cascade selection should be performed on.
+     */
+    selectionTree: ITree<TItem, TId>;
+
+    /**
+     * Version of the tree before applying patch to it.
+     */
+    treeWithoutPatch: ITree<TItem, TId>;
+
+    /**
+     * Total count of the rows.
+     */
+    totalCount?: number;
+}
diff --git a/uui-core/src/data/processing/views/tree/hooks/useTree.ts b/uui-core/src/data/processing/views/tree/hooks/useTree.ts
new file mode 100644
index 0000000000..6068de8922
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/hooks/useTree.ts
@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { UseTreeResult } from './types';
+import { TreeHook, UseTreeProps } from './strategies/types';
+import { usePrevious } from '../../../../../hooks/usePrevious';
+import { strategies } from './strategies';
+
+export function useTree<TItem, TId, TFilter = any>(props: UseTreeProps<TItem, TId, TFilter>, deps: any[]): UseTreeResult<TItem, TId, TFilter> {
+    const prevType = usePrevious(props.type);
+
+    if (prevType && props.type !== prevType) {
+        throw new Error("Tree type can't be changed between renders");
+    }
+
+    const useStrategy: TreeHook<typeof props.type> = useMemo(
+        () => strategies[props.type] as TreeHook<typeof props.type>,
+        [props.type],
+    );
+
+    const tree = useStrategy<TItem, TId>(props, [...deps]);
+
+    return tree;
+}
diff --git a/uui-core/src/data/processing/views/tree/index.ts b/uui-core/src/data/processing/views/tree/index.ts
index 5e945595db..8229832ac5 100644
--- a/uui-core/src/data/processing/views/tree/index.ts
+++ b/uui-core/src/data/processing/views/tree/index.ts
@@ -1,2 +1,9 @@
-export * from './Tree';
+export * from './hooks';
 export * from './ITree';
+export * from './Tree';
+export * from './constants';
+export * from './helpers';
+
+export * from './types';
+export * from './ItemsMap';
+export * from './ItemsStorage';
diff --git a/uui-core/src/data/processing/views/tree/treeState/TreeState.ts b/uui-core/src/data/processing/views/tree/treeState/TreeState.ts
new file mode 100644
index 0000000000..41a921965b
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeState/TreeState.ts
@@ -0,0 +1,400 @@
+import { ItemsStorage } from '../ItemsStorage';
+import {
+    ExtendedPatchOptions,
+    FilterOptions, LoadAllOptions, LoadOptions,
+    SearchOptions, SortOptions, TreeStructureId, UpdateTreeStructuresOptions,
+} from './types';
+import { TreeStructure, FetchingHelper, FilterHelper, SortHelper, SearchHelper, PatchHelper } from '../treeStructure';
+import { ItemsMap } from '../ItemsMap';
+import { ItemsAccessor } from '../ItemsAccessor';
+import { NOT_FOUND_RECORD } from '../constants';
+import { cloneMap, newMap } from '../helpers';
+import { ITreeNodeInfo, ITreeParams } from '../treeStructure/types';
+import { TreeHelper } from '../treeStructure/helpers/TreeHelper';
+import { PatchIntoTreeStructureOptions } from '../treeStructure/helpers/types';
+
+export class TreeState<TItem, TId> {
+    protected constructor(
+        private _fullTree: TreeStructure<TItem, TId> | null,
+        private _visibleTree: TreeStructure<TItem, TId> | null,
+        private _selectedOnlyTree: TreeStructure<TItem, TId> | null,
+        protected _itemsMap: ItemsMap<TId, TItem>,
+        protected _setItems: ItemsStorage<TItem, TId>['setItems'],
+    ) {}
+
+    public get itemsMap() {
+        return this._itemsMap;
+    }
+
+    public get setItems() {
+        return this._setItems;
+    }
+
+    public get visible() {
+        return this._visibleTree;
+    }
+
+    public get selectedOnly() {
+        return this._selectedOnlyTree;
+    }
+
+    public get full() {
+        return this._fullTree;
+    }
+
+    public getById(id: TId) {
+        return this.itemsMap.has(id) ? this.itemsMap.get(id) : NOT_FOUND_RECORD;
+    }
+
+    public async load<TFilter>({
+        using,
+        options,
+        dataSourceState,
+        withNestedChildren = true,
+    }: LoadOptions<TItem, TId, TFilter>): Promise<TreeState<TItem, TId>> {
+        const treeStructure = this.getTreeStructure(using);
+
+        const { loadedItems, byParentId, nodeInfoById } = await FetchingHelper.load<TItem, TId, TFilter>({
+            tree: treeStructure,
+            options,
+            dataSourceState,
+            withNestedChildren,
+        });
+
+        if (!loadedItems.length && !byParentId.size && !nodeInfoById.size) {
+            if (using === undefined && treeStructure !== this.getTreeStructure('visible')) {
+                return this.withNewTreeStructures({
+                    using,
+                    treeStructure,
+                    itemsMap: this.itemsMap,
+                });
+            }
+
+            return this;
+        }
+
+        const itemsMap = loadedItems.length ? this.setItems(loadedItems, { on: 'load' }) : this.itemsMap;
+        const newByParentId = byParentId.size ? cloneMap(treeStructure.byParentId) : treeStructure.byParentId;
+        for (const [id, ids] of byParentId) {
+            newByParentId.set(id, ids);
+        }
+        const newNodeInfoById = nodeInfoById.size ? cloneMap(treeStructure.nodeInfoById) : treeStructure.nodeInfoById;
+        for (const [id, nodeInfo] of nodeInfoById) {
+            newNodeInfoById.set(id, nodeInfo);
+        }
+        let treeToUpdate: TreeStructureId = using;
+        if (treeToUpdate === 'visible') {
+            treeToUpdate = dataSourceState.search ? 'visible' : undefined;
+        }
+
+        return this.withNewTreeStructures({
+            using: treeToUpdate,
+            treeStructure: TreeStructure.create(
+                treeStructure.getParams(),
+                ItemsAccessor.toItemsAccessor(itemsMap),
+                newByParentId,
+                newNodeInfoById,
+            ),
+            itemsMap,
+        });
+    }
+
+    public async loadAll<TFilter>({
+        using,
+        options,
+        dataSourceState,
+    }: LoadAllOptions<TItem, TId, TFilter>): Promise<TreeState<TItem, TId>> {
+        const treeStructure = this.getTreeStructure(using);
+
+        const { treeStructure: newTreeStructure, itemsMap: newItemsMap, loadedItems } = await FetchingHelper.loadAll({
+            treeStructure,
+            itemsMap: this.itemsMap,
+            options,
+            dataSourceState,
+        });
+
+        if (newTreeStructure === treeStructure && newItemsMap === this.itemsMap && !loadedItems.length) {
+            return this;
+        }
+
+        if (loadedItems.length) {
+            this.setItems(loadedItems, { reset: true });
+        }
+
+        return this.withNewTreeStructures({ using, treeStructure: newTreeStructure, itemsMap: newItemsMap });
+    }
+
+    public filter<TFilter>({
+        filter,
+        getFilter,
+    }: FilterOptions<TItem, TId, TFilter>): TreeState<TItem, TId> {
+        const treeStructure = this.getTreeStructure('full');
+        const newTreeStructure = FilterHelper.filter<TItem, TId, TFilter>({ treeStructure, getFilter, filter });
+
+        if (treeStructure === newTreeStructure) {
+            return this;
+        }
+
+        return this.withNewTreeStructures({ treeStructure: newTreeStructure, itemsMap: this.itemsMap });
+    }
+
+    public sort<TFilter>({
+        getId,
+        sorting,
+        sortBy,
+    }: SortOptions<TItem, TId, TFilter>): TreeState<TItem, TId> {
+        const treeStructure = this.getTreeStructure('full');
+        const newTreeStructure = SortHelper.sort<TItem, TId, TFilter>({ treeStructure, sorting, sortBy, getId });
+
+        if (treeStructure === newTreeStructure) {
+            return this;
+        }
+
+        return this.withNewTreeStructures({ treeStructure: newTreeStructure, itemsMap: this.itemsMap });
+    }
+
+    public search<TFilter>({
+        search,
+        getSearchFields,
+        sortSearchByRelevance,
+    }: SearchOptions<TItem, TId, TFilter>): TreeState<TItem, TId> {
+        const treeStructure = this.getTreeStructure('full');
+        const newTreeStructure = SearchHelper.search({ treeStructure, search, getSearchFields, sortSearchByRelevance });
+
+        if (newTreeStructure === treeStructure) {
+            return this;
+        }
+
+        return this.withNewTreeStructures({ using: 'visible', treeStructure: newTreeStructure, itemsMap: this.itemsMap });
+    }
+
+    private patchTreeStructure(
+        { treeStructure, itemsMap, sortedPatch, patchAtLastSort, getItemTemporaryOrder, isDeleted, sorting, sortBy }: PatchIntoTreeStructureOptions<TItem, TId>,
+    ) {
+        const { treeStructure: newTreeStructure, itemsMap: newItemsMap, newItems } = PatchHelper.patch<TItem, TId>({
+            treeStructure,
+            itemsMap: itemsMap,
+            sortedPatch,
+            patchAtLastSort,
+            getItemTemporaryOrder,
+            isDeleted,
+            sorting,
+            sortBy,
+        });
+
+        if (newTreeStructure === treeStructure && newItemsMap === itemsMap && !newItems.length) {
+            return { treeStructure, itemsMap };
+        }
+
+        return { treeStructure: newTreeStructure, itemsMap: newItemsMap };
+    }
+
+    public patch(
+        { sortedPatch, patchAtLastSort, getItemTemporaryOrder, isDeleted, sorting, sortBy }: ExtendedPatchOptions<TItem, TId>,
+    ): TreeState<TItem, TId> {
+        const { treeStructure: newFull } = this.patchTreeStructure({
+            treeStructure: this.getTreeStructure('full'),
+            itemsMap: this.itemsMap,
+            sortedPatch,
+            patchAtLastSort,
+            getItemTemporaryOrder,
+            isDeleted,
+            sorting,
+            sortBy,
+        });
+
+        const { treeStructure: newVisible, itemsMap: updatedItemsMap } = this.patchTreeStructure({
+            treeStructure: this.getTreeStructure('visible'),
+            itemsMap: this.itemsMap,
+            sortedPatch,
+            patchAtLastSort,
+            getItemTemporaryOrder,
+            isDeleted,
+            sorting,
+            sortBy,
+        });
+
+        if (this.getTreeStructure('full') === newFull && this.getTreeStructure('visible') === newVisible) {
+            return this;
+        }
+
+        const itemsAccessor = ItemsAccessor.toItemsAccessor(updatedItemsMap);
+        const selectedOnly = TreeStructure.withNewItemsAccessor(itemsAccessor, this._selectedOnlyTree);
+        return TreeState.create(newFull, newVisible, selectedOnly, updatedItemsMap, this._setItems);
+    }
+
+    /**
+     * TODO: Add later `selectedOnlyMode: 'tree' | 'flat'.
+     */
+    private buildSelectedOnlyTree(checkedIds: TId[]) {
+        const foundIds = checkedIds
+            .filter((id) => this.getById(id) !== NOT_FOUND_RECORD);
+        let items = new ItemsMap<TId, TItem>(null, this.selectedOnly.getParams());
+        foundIds.forEach((id) => {
+            const parents = TreeHelper.getParents(id, this.full);
+            parents
+                .filter((parentId) => !items.has(parentId) && this.getById(parentId) !== NOT_FOUND_RECORD)
+                .forEach((parentId) => {
+                    items = items.set(parentId, this.getById(parentId) as TItem);
+                });
+
+            items = items.set(id, this.getById(id) as TItem);
+        });
+
+        const newSelectedOnly = TreeStructure.createFromItems({
+            params: this.selectedOnly.getParams(),
+            items,
+            itemsAccessor: ItemsAccessor.toItemsAccessor(this.itemsMap),
+        });
+
+        return TreeState.create(
+            this.full,
+            this.visible,
+            newSelectedOnly,
+            this.itemsMap,
+            this.setItems,
+        );
+    }
+
+    public buildSelectedOnly(checkedIds: TId[]) {
+        const foundIds = (checkedIds ?? [])
+            .filter((id) => this.getById(id) !== NOT_FOUND_RECORD);
+
+        const byParentId = newMap<TId, TId[]>(this.selectedOnly.getParams());
+        const nodeInfoById = newMap<TId, ITreeNodeInfo>(this.selectedOnly.getParams());
+        byParentId.set(undefined, foundIds);
+        nodeInfoById.set(undefined, { count: foundIds.length });
+
+        const newSelectedOnly = TreeStructure.create(
+            this.selectedOnly.getParams(),
+            ItemsAccessor.toItemsAccessor(this.itemsMap),
+            byParentId,
+            nodeInfoById,
+        );
+
+        return TreeState.create(
+            this.full,
+            this.visible,
+            newSelectedOnly,
+            this.itemsMap,
+            this.setItems,
+        );
+    }
+
+    private getTreeStructure(treeStructureId: TreeStructureId = 'full') {
+        return (treeStructureId ?? 'full') === 'full' ? this._fullTree : this._visibleTree;
+    }
+
+    public clearStructure(): TreeState<TItem, TId> {
+        return TreeState.create(
+            this.full,
+            TreeStructure.create(this.visible.getParams(), ItemsAccessor.toItemsAccessor(this.itemsMap)),
+            this.selectedOnly,
+            this.itemsMap,
+            this.setItems,
+        );
+    }
+
+    public reset(): TreeState<TItem, TId> {
+        return TreeState.create(
+            this.full,
+            this.full,
+            this.selectedOnly,
+            this.itemsMap,
+            this.setItems,
+        );
+    }
+
+    private withNewTreeStructures({
+        using,
+        treeStructure,
+        itemsMap,
+    }: UpdateTreeStructuresOptions<TItem, TId>): TreeState<TItem, TId> {
+        const itemsAccessor = ItemsAccessor.toItemsAccessor(itemsMap);
+        const selectedOnly = TreeStructure.withNewItemsAccessor(itemsAccessor, this._selectedOnlyTree);
+        if (!using) {
+            return TreeState.create(treeStructure, treeStructure, selectedOnly, itemsMap, this._setItems);
+        }
+        const visibleTree = using === 'visible'
+            ? treeStructure
+            : TreeStructure.withNewItemsAccessor(itemsAccessor, this._visibleTree);
+
+        const fullTree = using === 'full'
+            ? treeStructure
+            : TreeStructure.withNewItemsAccessor(itemsAccessor, this._fullTree);
+
+        return TreeState.create(fullTree, visibleTree, selectedOnly, itemsMap, this._setItems);
+    }
+
+    public static create<TItem, TId>(
+        fullTree: TreeStructure<TItem, TId>,
+        visibleTree: TreeStructure<TItem, TId>,
+        selectedOnlyTree: TreeStructure<TItem, TId>,
+        itemsMap: ItemsMap<TId, TItem>,
+        setItems: ItemsStorage<TItem, TId>['setItems'],
+    ) {
+        return new TreeState(
+            fullTree,
+            visibleTree,
+            selectedOnlyTree,
+            itemsMap,
+            setItems,
+        );
+    }
+
+    public static createFromItems<TItem, TId>(
+        items: TItem[] | undefined,
+        itemsMap: ItemsMap<TId, TItem> | undefined,
+        params: ITreeParams<TItem, TId>,
+        setItems: ItemsStorage<TItem, TId>['setItems'],
+    ) {
+        if (items === undefined && itemsMap === undefined) {
+            throw Error('At least one of the following args should be defined: `items` or `itemsMap`.');
+        }
+
+        let treeItemsMap: ItemsMap<TId, TItem>;
+        if (itemsMap) {
+            treeItemsMap = items ? itemsMap.setItems(items) : itemsMap;
+        } else {
+            treeItemsMap = new ItemsMap(new Map(), params).setItems(items);
+        }
+
+        const itemsAccessor = ItemsAccessor.toItemsAccessor(treeItemsMap);
+        const treeStructure = TreeStructure.createFromItems({ params, items: items ?? treeItemsMap, itemsAccessor });
+        return new TreeState(
+            treeStructure,
+            treeStructure,
+            TreeStructure.create(params, ItemsAccessor.toItemsAccessor(itemsMap)),
+            treeItemsMap,
+            setItems,
+        );
+    }
+
+    public static createFromItemsMap<TItem, TId>(
+        itemsMap: ItemsMap<TId, TItem> | undefined,
+        setItems: ItemsStorage<TItem, TId>['setItems'],
+        params: ITreeParams<TItem, TId>,
+    ) {
+        const itemsAccessor = ItemsAccessor.toItemsAccessor(itemsMap);
+        const treeStructure = TreeStructure.createFromItems({ params, items: itemsMap, itemsAccessor });
+        return new TreeState(
+            treeStructure,
+            treeStructure,
+            TreeStructure.create(params, ItemsAccessor.toItemsAccessor(itemsMap)),
+            itemsMap,
+            setItems,
+        );
+    }
+
+    public static blank<TItem, TId>(params: ITreeParams<TItem, TId>, itemsMap: ItemsMap<TId, TItem>, setItems: ItemsStorage<TItem, TId>['setItems']): TreeState<TItem, TId> {
+        const treeStructure = TreeStructure.create(params, ItemsAccessor.toItemsAccessor(itemsMap));
+
+        return this.create(
+            treeStructure,
+            treeStructure,
+            treeStructure,
+            itemsMap,
+            setItems,
+        );
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/treeState/index.ts b/uui-core/src/data/processing/views/tree/treeState/index.ts
new file mode 100644
index 0000000000..f97e1dafa3
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeState/index.ts
@@ -0,0 +1 @@
+export { TreeState } from './TreeState';
diff --git a/uui-core/src/data/processing/views/tree/treeState/types.ts b/uui-core/src/data/processing/views/tree/treeState/types.ts
new file mode 100644
index 0000000000..e6e4eff398
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeState/types.ts
@@ -0,0 +1,81 @@
+import { CascadeSelection, DataSourceState, IImmutableMap, IMap, SortConfig, SortedPatchByParentId, SortingOption, PatchOptions as PatchConfig } from '../../../../../types';
+import { LazyListViewProps } from '../../types';
+import { ItemsMap } from '../ItemsMap';
+import { TreeStructure } from '../treeStructure/TreeStructure';
+
+export interface LoadTreeOptions<TItem, TId, TFilter>
+    extends Pick<LazyListViewProps<TItem, TId, TFilter>, 'api' | 'getChildCount' | 'filter' | 'fetchStrategy' | 'flattenSearchResults'> {
+    loadAllChildren?(id: TId): boolean;
+    isLoadStrict?: boolean;
+    isFolded?: (item: TItem) => boolean;
+}
+
+export type TreeStructureId = 'full' | 'visible';
+export interface LoadOptions<TItem, TId, TFilter> {
+    using?: TreeStructureId;
+    options: LoadTreeOptions<TItem, TId, TFilter>,
+    dataSourceState: Readonly<DataSourceState<TFilter, TId>>,
+    withNestedChildren: boolean,
+}
+
+export interface LoadAllOptions<TItem, TId, TFilter> {
+    using?: TreeStructureId;
+    options: LoadTreeOptions<TItem, TId, TFilter>,
+    dataSourceState: Readonly<DataSourceState>,
+}
+
+export interface UpdateTreeStructuresOptions<TItem, TId> {
+    using?: TreeStructureId;
+    treeStructure: TreeStructure<TItem, TId>;
+    itemsMap: ItemsMap<TId, TItem>;
+}
+export interface ApplyFilterOptions<TItem, TId, TFilter> {
+    filter: DataSourceState<TFilter, TId>['filter'];
+    getFilter?: (filter: TFilter) => (item: TItem) => boolean;
+}
+
+export interface ApplySearchOptions<TItem, TId, TFilter> {
+    search: DataSourceState<TFilter, TId>['search'];
+    getSearchFields?: (item: TItem) => string[];
+    sortSearchByRelevance?: boolean;
+}
+
+export interface ApplySortOptions<TItem, TId, TFilter> {
+    getId: (item: TItem) => TId;
+    sorting: DataSourceState<TFilter, TId>['sorting'];
+    sortBy?(item: TItem, sorting: SortingOption): any;
+}
+
+export type ItemsComparator<TItem> = (newItem: TItem, existingItem: TItem) => number;
+
+export interface FilterOptions<TItem, TId, TFilter = any> extends ApplyFilterOptions<TItem, TId, TFilter> {}
+export interface SortOptions<TItem, TId, TFilter> extends ApplySortOptions<TItem, TId, TFilter> {}
+export interface SearchOptions<TItem, TId, TFilter> extends ApplySearchOptions<TItem, TId, TFilter> {}
+
+export interface CascadeSelectionOptions<TItem, TId> {
+    using?: TreeStructureId;
+    currentCheckedIds: TId[];
+    checkedId: TId;
+    isChecked: boolean;
+    isCheckable?: (item: TItem) => boolean;
+    cascadeSelectionType?: CascadeSelection;
+}
+
+export interface PatchOptions<TItem> {
+    using?: TreeStructureId;
+    items: TItem[];
+    isDeleted?: () => boolean;
+    comparator?: ItemsComparator<TItem>;
+}
+
+/**
+ * Patching tree configuration.
+ */
+export interface ExtendedPatchOptions<TItem, TId, TFilter = any> extends SortConfig<TItem>, Omit<PatchConfig<TItem, TId>, 'patch' | 'getNewItemPosition'> {
+    /**
+     * To add/move/delete some item from the existing dataset, it is required to pass that item via the `patch` map.
+     */
+    sortedPatch?: SortedPatchByParentId<TItem, TId>,
+    patchAtLastSort: IMap<TId, TItem> | IImmutableMap<TId, TItem>,
+    sorting: DataSourceState<TFilter, TId>['sorting'];
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/TreeStructure.ts b/uui-core/src/data/processing/views/tree/treeStructure/TreeStructure.ts
new file mode 100644
index 0000000000..922e9b4f8f
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/TreeStructure.ts
@@ -0,0 +1,160 @@
+import { IMap } from '../../../../../types';
+import { ITreeNodeInfo, ITreeParams, IItemsAccessor } from './types';
+import { newMap } from '../helpers/map';
+import { EMPTY, FULLY_LOADED, NOT_FOUND_RECORD, PARTIALLY_LOADED } from '../constants';
+import { ItemsMap } from '../ItemsMap';
+import { ITree, ITreeItemsInfo, ITreeNodeStatus } from '../ITree';
+import { Tree } from '../Tree';
+
+export class TreeStructure<TItem, TId> implements ITree<TItem, TId> {
+    constructor(
+        private _params: ITreeParams<TItem, TId>,
+        private readonly _itemsAccessor: IItemsAccessor<TItem, TId>,
+        protected readonly _byParentId: IMap<TId, TId[]> = newMap(_params),
+        protected readonly _nodeInfoById: IMap<TId, ITreeNodeInfo> = newMap(_params),
+    ) {}
+
+    public get itemsAccessor() {
+        return this._itemsAccessor;
+    }
+
+    public getParams() {
+        return this._params;
+    }
+
+    public get byParentId() {
+        return this._byParentId;
+    }
+
+    public get nodeInfoById() {
+        return this._nodeInfoById;
+    }
+
+    public getRootItems() {
+        return this.getItems(undefined).ids
+            .map((id) => this.itemsAccessor.get(id)!)
+            .filter<TItem>((item): item is TItem => item !== NOT_FOUND_RECORD);
+    }
+
+    public getById(id: TId) {
+        return this.itemsAccessor.get(id);
+    }
+
+    public getItems(parentId?: TId): ITreeItemsInfo<TId> {
+        const currentParentId = parentId ?? undefined;
+        const ids = this.byParentId.get(currentParentId) ?? [];
+        const { count, ...restNodeInfo } = this.nodeInfoById.get(currentParentId) || {};
+
+        let status: ITreeNodeStatus = count === undefined ? PARTIALLY_LOADED : EMPTY;
+        if (count !== 0 && ids.length === count) {
+            status = FULLY_LOADED;
+        }
+
+        return { ids, count, status, ...restNodeInfo };
+    }
+
+    public getChildren(parentId: TId) {
+        const { ids } = this.getItems(parentId);
+        const children = ids.map((id) => this.itemsAccessor.get(id));
+        return children.filter<TItem>((item): item is TItem => item !== NOT_FOUND_RECORD);
+    }
+
+    public getTotalCount() {
+        let count = undefined;
+        for (const [, info] of this.nodeInfoById) {
+            if (info.count == null) {
+                // TBD: getTotalCount() is used for totalCount, but we can't have correct count until all branches are loaded
+                return null;
+            } else {
+                if (count === undefined) {
+                    count = 0;
+                }
+                count += info.count;
+            }
+        }
+        return count;
+    }
+
+    public computeSubtotals<TSubtotals>(get: (item: TItem, hasChildren: boolean) => TSubtotals, add: (a: TSubtotals, b: TSubtotals) => TSubtotals) {
+        const subtotalsMap = newMap<TId | undefined, TSubtotals>(this.getParams());
+
+        Tree.forEach(
+            this,
+            (item, id, parentId) => {
+                let itemSubtotals = get(item, this.byParentId.has(id));
+
+                // add already computed children subtotals
+                if (subtotalsMap.has(id)) {
+                    itemSubtotals = add(itemSubtotals, subtotalsMap.get(id));
+                }
+
+                // store
+                subtotalsMap.set(id, itemSubtotals);
+
+                // add value to parent
+                let parentSubtotals: TSubtotals;
+                if (!subtotalsMap.has(parentId)) {
+                    parentSubtotals = itemSubtotals;
+                } else {
+                    parentSubtotals = add(itemSubtotals, subtotalsMap.get(parentId));
+                }
+                subtotalsMap.set(parentId, parentSubtotals);
+            },
+            { direction: 'bottom-up' },
+        );
+        return subtotalsMap;
+    }
+
+    public static create<TItem, TId>(
+        params: ITreeParams<TItem, TId>,
+        itemsAccessor: IItemsAccessor<TItem, TId>,
+        byParentId?: IMap<TId, TId[]>,
+        nodeInfoById?: IMap<TId, ITreeNodeInfo>,
+    ): TreeStructure<TItem, TId> {
+        return new TreeStructure(params, itemsAccessor, byParentId, nodeInfoById);
+    }
+
+    public static withNewItemsAccessor<TItem, TId>(itemsAccessor: IItemsAccessor<TItem, TId>, treeStructure: TreeStructure<TItem, TId>) {
+        return TreeStructure.create<TItem, TId>(treeStructure.getParams(), itemsAccessor, treeStructure.byParentId, treeStructure.nodeInfoById);
+    }
+
+    public static createFromItems<TItem, TId>({
+        params,
+        items,
+        itemsAccessor,
+    }: {
+        params: ITreeParams<TItem, TId>,
+        items: TItem[] | ItemsMap<TId, TItem>,
+        itemsAccessor: IItemsAccessor<TItem, TId>,
+    }) {
+        const byParentId = newMap<TId, TId[]>(params);
+
+        const itemsMap = newMap<TId, TItem>(params);
+
+        items.forEach((item) => {
+            const parentId = params.getParentId?.(item) ?? undefined;
+
+            if (!byParentId.has(parentId)) {
+                byParentId.set(parentId, []);
+            }
+            const children = byParentId.get(parentId);
+            children.push(params.getId(item));
+
+            byParentId.set(parentId, children);
+            itemsMap.set(parentId, item);
+        });
+
+        const newNodeInfoById = newMap<TId, ITreeNodeInfo>(params);
+        for (const [parentId, ids] of byParentId) {
+            const assumedCount = itemsMap.has(parentId) ? params.getChildCount?.(itemsMap.get(parentId)) : undefined;
+            newNodeInfoById.set(parentId, { count: ids.length, ...(params.getChildCount ? { assumedCount } : {}) });
+        }
+
+        // if items is empty, count should be defined, otherwise, loading placeholders will be rendered.
+        if (!newNodeInfoById.size) {
+            newNodeInfoById.set(undefined, { count: 0 });
+        }
+
+        return this.create<TItem, TId>(params, itemsAccessor, byParentId, newNodeInfoById);
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/exposed.ts b/uui-core/src/data/processing/views/tree/treeStructure/exposed.ts
new file mode 100644
index 0000000000..dc307e08e6
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/exposed.ts
@@ -0,0 +1,2 @@
+export { FetchingHelper } from './helpers';
+export type { ITreeNodeInfo, ITreeParams } from './types';
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/CheckingHelper.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/CheckingHelper.ts
new file mode 100644
index 0000000000..f106dfc0fc
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/CheckingHelper.ts
@@ -0,0 +1,308 @@
+import { CascadeSelectionTypes } from '../../../../../../types';
+import { Tree } from '../../Tree';
+import { NOT_FOUND_RECORD, ROOT_ID } from '../../constants';
+import { newMap } from '../../helpers/map';
+import { ActForCheckableOptions, CascadeSelectionOptions, CheckParentsWithFullCheckOptions, ClearIfTreeNotLoadedOptions, ClearUnknownItemsOptions, SelectionOptions } from './types';
+
+export class CheckingHelper {
+    public static cascadeSelection<TItem, TId>({
+        tree,
+        currentCheckedIds,
+        checkedId,
+        isChecked,
+        isCheckable,
+        isUnknown,
+        cascadeSelectionType,
+    }: CascadeSelectionOptions<TItem, TId>) {
+        const isImplicitMode = cascadeSelectionType === CascadeSelectionTypes.IMPLICIT;
+        let checkedIdsMap = newMap<TId, boolean>(tree.getParams());
+        if (!(checkedId === ROOT_ID && isImplicitMode)) {
+            currentCheckedIds.forEach((id) => checkedIdsMap.set(id, true));
+        }
+        const optionsWithDefaults = { isCheckable: isCheckable ?? (() => true), cascadeSelectionType };
+
+        const { count } = tree.getItems(undefined);
+        const treeIsLoaded = count !== 0;
+        // If clear items while tree is not loaded yet (while clearing tags of PickerInput before opening body).
+        if (!treeIsLoaded && !isChecked) {
+            checkedIdsMap = this.clearIfTreeNotLoaded({
+                tree,
+                checkedIdsMap,
+                checkedId,
+                isCheckable: optionsWithDefaults.isCheckable,
+            });
+        }
+
+        if (treeIsLoaded && !optionsWithDefaults.cascadeSelectionType) {
+            checkedIdsMap = this.simpleSelection({
+                tree,
+                checkedIdsMap,
+                checkedId,
+                isChecked,
+                ...optionsWithDefaults,
+            });
+        }
+
+        if (treeIsLoaded && (
+            optionsWithDefaults.cascadeSelectionType === true
+            || optionsWithDefaults.cascadeSelectionType === CascadeSelectionTypes.EXPLICIT)
+        ) {
+            checkedIdsMap = this.explicitCascadeSelection({
+                tree,
+                checkedIdsMap,
+                checkedId,
+                isChecked,
+                ...optionsWithDefaults,
+            });
+        }
+
+        if (treeIsLoaded && optionsWithDefaults.cascadeSelectionType === CascadeSelectionTypes.IMPLICIT) {
+            checkedIdsMap = this.implicitCascadeSelection({
+                tree,
+                checkedIdsMap,
+                checkedId,
+                isChecked,
+                ...optionsWithDefaults,
+            });
+        }
+
+        if (!isChecked && checkedId === ROOT_ID && checkedIdsMap.size > 0) {
+            checkedIdsMap = this.clearUnknownItems({ checkedIdsMap, isUnknown });
+        }
+
+        const result = [];
+        for (const [id, value] of checkedIdsMap) {
+            value && result.push(id);
+        }
+
+        return result;
+    }
+
+    private static simpleSelection<TItem, TId>({
+        tree,
+        checkedIdsMap,
+        checkedId,
+        isChecked,
+        isCheckable,
+    }: SelectionOptions<TItem, TId>) {
+        if (isChecked) {
+            // eslint-disable-next-line eqeqeq
+            if (checkedId != ROOT_ID) {
+                checkedIdsMap.set(checkedId, true);
+            } else {
+                Tree.forEachChildren<TItem, TId>(
+                    tree,
+                    (id) => { checkedIdsMap.set(id, true); },
+                    isCheckable,
+                );
+            }
+            return checkedIdsMap;
+        }
+
+        // eslint-disable-next-line eqeqeq
+        if (checkedId != ROOT_ID) {
+            checkedIdsMap.delete(checkedId);
+        } else {
+            for (const [checkedItemId, isItemChecked] of checkedIdsMap) {
+                if (isItemChecked) {
+                    this.actForCheckable({
+                        tree,
+                        action: (id) => checkedIdsMap.delete(id),
+                        isCheckable,
+                        id: checkedItemId,
+                    });
+                }
+            }
+            return checkedIdsMap;
+        }
+
+        return checkedIdsMap;
+    }
+
+    private static actForCheckable<TItem, TId>({
+        tree,
+        action,
+        isCheckable,
+        id,
+    }: ActForCheckableOptions<TItem, TId>) {
+        const item = tree.getById(id);
+        if (isCheckable(id, item)) {
+            action(id);
+        }
+    }
+
+    private static explicitCascadeSelection<TItem, TId>({
+        tree,
+        checkedIdsMap,
+        checkedId,
+        isChecked,
+        isCheckable,
+    }: SelectionOptions<TItem, TId>) {
+        if (isChecked) {
+            // eslint-disable-next-line eqeqeq
+            if (checkedId != ROOT_ID) {
+                checkedIdsMap.set(checkedId, true);
+            }
+            // check all children recursively
+            Tree.forEachChildren<TItem, TId>(
+                tree,
+                // eslint-disable-next-line eqeqeq
+                (id) => id != ROOT_ID && checkedIdsMap.set(id, true),
+                isCheckable,
+                checkedId,
+            );
+            return this.checkParentsWithFullCheck({ tree, checkedIdsMap, checkedId, isCheckable });
+        }
+
+        // eslint-disable-next-line eqeqeq
+        if (checkedId != ROOT_ID) {
+            checkedIdsMap.delete(checkedId);
+        }
+
+        // uncheck all children recursively
+        Tree.forEachChildren<TItem, TId>(
+            tree,
+            (id) => checkedIdsMap.delete(id),
+            isCheckable,
+            checkedId,
+        );
+
+        Tree.getParents(checkedId, tree).forEach((parentId) => checkedIdsMap.delete(parentId));
+
+        return checkedIdsMap;
+    }
+
+    private static implicitCascadeSelection<TItem, TId>({
+        tree,
+        checkedIdsMap,
+        checkedId,
+        isChecked,
+        isCheckable,
+    }: SelectionOptions<TItem, TId>) {
+        if (isChecked) {
+            // eslint-disable-next-line eqeqeq
+            if (checkedId != ROOT_ID) {
+                checkedIdsMap.set(checkedId, true);
+            }
+            // for implicit mode, it is required to remove explicit check from children,
+            // if parent is checked
+            Tree.forEachChildren<TItem, TId>(
+                tree,
+                (id) => checkedIdsMap.delete(id),
+                isCheckable,
+                checkedId,
+                false,
+            );
+
+            if (checkedId === ROOT_ID) {
+                const { ids: childrenIds } = tree.getItems(checkedId);
+
+                // if selectedId is undefined and it is selected, that means selectAll
+                childrenIds.forEach((id) => checkedIdsMap.set(id, true));
+            }
+            // check parents if all children are checked
+            return this.checkParentsWithFullCheck({
+                tree,
+                checkedIdsMap,
+                checkedId,
+                isCheckable,
+                removeExplicitChildrenSelection: true,
+            });
+        }
+
+        // eslint-disable-next-line eqeqeq
+        if (checkedId != ROOT_ID) {
+            checkedIdsMap.delete(checkedId);
+        }
+
+        const selectNeighboursOnly = (itemId: TId) => {
+            const item = tree.getById(itemId);
+            if (item === NOT_FOUND_RECORD) {
+                return;
+            }
+
+            const parentId = tree.getParams().getParentId?.(item);
+            const parents = Tree.getParents(itemId, tree);
+            // if some parent is checked, it is required to check all children explicitly,
+            // except unchecked one.
+            const someParentIsChecked = parents.some((parent) => checkedIdsMap.get(parent));
+            tree.getItems(parentId).ids.forEach((id) => {
+                if (itemId !== id && someParentIsChecked) {
+                    checkedIdsMap.set(id, true);
+                }
+            });
+            checkedIdsMap.delete(parentId);
+        };
+
+        // eslint-disable-next-line eqeqeq
+        if (checkedId != ROOT_ID) {
+            const parents = Tree.getParents(checkedId, tree);
+            [checkedId, ...parents.reverse()].forEach(selectNeighboursOnly);
+        }
+        return checkedIdsMap;
+    }
+
+    private static checkParentsWithFullCheck<TItem, TId>({
+        tree,
+        checkedIdsMap,
+        checkedId,
+        isCheckable,
+        removeExplicitChildrenSelection,
+    }: CheckParentsWithFullCheckOptions<TItem, TId>) {
+        Tree.getParents(checkedId, tree)
+            .reverse()
+            .forEach((parentId) => {
+                const { ids: childrenIds } = tree.getItems(parentId);
+                if (childrenIds && childrenIds.every((childId) => checkedIdsMap.has(childId))) {
+                    // eslint-disable-next-line eqeqeq
+                    if (parentId != ROOT_ID) {
+                        checkedIdsMap.set(parentId, true);
+                    }
+                    if (removeExplicitChildrenSelection) {
+                        Tree.forEachChildren(
+                            tree,
+                            (id) => checkedIdsMap.delete(id),
+                            isCheckable,
+                            parentId,
+                            false,
+                        );
+                    }
+                }
+            });
+        return checkedIdsMap;
+    }
+
+    private static clearIfTreeNotLoaded<TItem, TId>({
+        tree,
+        checkedIdsMap,
+        checkedId,
+        isCheckable,
+    }: ClearIfTreeNotLoadedOptions<TItem, TId>) {
+        if (checkedId !== ROOT_ID) {
+            const item = tree.getById(checkedId);
+            if (isCheckable(checkedId, item)) {
+                checkedIdsMap.delete(checkedId);
+            }
+        } else {
+            for (const [selectedItemId, isItemSelected] of checkedIdsMap) {
+                const selectedItem = tree.getById(selectedItemId);
+                if (isItemSelected && isCheckable(selectedItemId, selectedItem)) {
+                    checkedIdsMap.delete(selectedItemId);
+                }
+            }
+        }
+        return checkedIdsMap;
+    }
+
+    private static clearUnknownItems<TId>({
+        checkedIdsMap,
+        isUnknown,
+    }: ClearUnknownItemsOptions<TId>) {
+        for (const [selectedItemId, isItemSelected] of checkedIdsMap) {
+            if (isItemSelected && isUnknown(selectedItemId)) {
+                checkedIdsMap.delete(selectedItemId);
+            }
+        }
+        return checkedIdsMap;
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/FetchingHelper.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/FetchingHelper.ts
new file mode 100644
index 0000000000..e95a091693
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/FetchingHelper.ts
@@ -0,0 +1,358 @@
+import isEqual from 'lodash.isequal';
+import { LazyDataSourceApiRequestContext, LazyDataSourceApiRequestRange } from '../../../../../../types';
+import { TreeStructure } from '../TreeStructure';
+import { cloneMap, newMap } from '../../helpers/map';
+import { ItemsAccessor } from '../../ItemsAccessor';
+import { LoadOptions, LoadAllOptions, LoadItemsOptions, LoadMissingItemsAndParentsOptions, LoadOptionsMissing } from './types';
+import { ITreeNodeInfo } from '../types';
+import { NOT_FOUND_RECORD } from '../../constants';
+import { getSelectedAndChecked } from './checked';
+
+export class FetchingHelper {
+    public static async loadAll<TItem, TId, TFilter>({
+        treeStructure,
+        itemsMap,
+        options,
+        dataSourceState,
+    }: LoadAllOptions<TItem, TId, TFilter>) {
+        const response = await options.api(
+            {
+                sorting: dataSourceState.sorting,
+                search: dataSourceState.search,
+                filter: options.filter,
+                page: dataSourceState.page,
+                pageSize: dataSourceState.pageSize,
+            },
+        );
+
+        const newItemsMap = itemsMap.clear().setItems(response.items);
+
+        return {
+            itemsMap: newItemsMap,
+            treeStructure: TreeStructure.createFromItems({
+                params: treeStructure.getParams(),
+                items: response.items,
+                itemsAccessor: ItemsAccessor.toItemsAccessor(newItemsMap),
+            }),
+            loadedItems: response.items,
+        };
+    }
+
+    public static async load<TItem, TId, TFilter = any>({
+        tree,
+        options,
+        dataSourceState,
+        patch,
+        withNestedChildren = true,
+    }: LoadOptions<TItem, TId, TFilter>) {
+        const { loadedItems: loadedMissingItems, loadedItemsMap, byParentId, nodeInfoById } = await this.loadMissing<TItem, TId, TFilter>({
+            tree,
+            options,
+            dataSourceState,
+            withNestedChildren,
+        });
+
+        const missing = getSelectedAndChecked(dataSourceState, patch);
+
+        const { loadedItems: loadedMissingItemsAndParents } = await this.loadMissingItemsAndParents<TItem, TId, TFilter>({
+            tree,
+            newItemsMap: loadedItemsMap,
+            options,
+            itemsToLoad: missing,
+        });
+
+        return {
+            loadedItems: loadedMissingItems.concat(loadedMissingItemsAndParents),
+            byParentId,
+            nodeInfoById,
+        };
+    }
+
+    private static async loadMissing<TItem, TId, TFilter = any>({
+        tree,
+        options,
+        dataSourceState,
+        withNestedChildren = true,
+    }: LoadOptionsMissing<TItem, TId, TFilter>) {
+        const requiredRowsCount = dataSourceState.topIndex + dataSourceState.visibleCount;
+
+        const byParentId = newMap<TId, TId[]>(tree.getParams());
+        const nodeInfoById = newMap<TId, ITreeNodeInfo>(tree.getParams());
+
+        const newItemsMap = newMap<TId, TItem>(tree.getParams());
+        const flatten = dataSourceState.search && options.flattenSearchResults;
+
+        let newItems: TItem[] = [];
+        const loadRecursive = async (parentId: TId, parent: TItem, parentLoadAll: boolean, remainingRowsCount: number) => {
+            let recursiveLoadedCount = 0;
+
+            const { ids, nodeInfo, loadedItems } = await this.loadItems<TItem, TId, TFilter>({
+                tree,
+                byParentId,
+                options,
+                parentId,
+                parent,
+                dataSourceState,
+                remainingRowsCount,
+                loadAll: parentLoadAll,
+            });
+
+            const { ids: originalIds, ...originalNodeInfo } = tree.getItems(parentId);
+            const currentIds = byParentId.has(parentId) ? byParentId.get(parentId) : originalIds;
+
+            if (ids !== currentIds
+                    || nodeInfo.count !== originalNodeInfo.count
+                    || nodeInfo.totalCount !== originalNodeInfo.totalCount
+                    || nodeInfo.assumedCount !== originalNodeInfo.assumedCount) {
+                nodeInfoById.set(parentId, nodeInfo);
+            }
+
+            byParentId.set(parentId, ids);
+
+            recursiveLoadedCount += ids.length;
+            if (loadedItems.length > 0) {
+                loadedItems.forEach((item) => {
+                    const id = tree.getParams().getId(item);
+                    const prevNodeInfo = nodeInfoById.get(id) ?? {};
+                    const assumedCount = flatten ? undefined : prevNodeInfo.assumedCount ?? tree.getParams().getChildCount?.(item);
+                    nodeInfoById.set(id, { ...prevNodeInfo, ...(tree.getParams().getChildCount ? { assumedCount } : {}) });
+                    newItemsMap.set(id, item);
+                });
+                newItems = newItems.concat(loadedItems);
+            }
+
+            if (!flatten && tree.getParams().getChildCount) {
+                const childrenPromises: Promise<any>[] = [];
+
+                for (let n = 0; n < ids.length; n++) {
+                    const id = ids[n];
+                    const itemInTree = tree.getById(id);
+                    let item: TItem = itemInTree === NOT_FOUND_RECORD ? undefined : itemInTree;
+                    if (newItemsMap.has(id)) {
+                        item = newItemsMap.get(id);
+                    }
+
+                    let isFolded = false;
+                    let hasChildren = false;
+
+                    if (tree.getParams().getChildCount) {
+                        // not a root node
+                        const childrenCount = tree.getParams().getChildCount(item);
+                        if (childrenCount) {
+                            // foldable
+                            isFolded = options.isFolded(item);
+                            hasChildren = true;
+                        }
+                    }
+
+                    const loadAllChildren = hasChildren && options.loadAllChildren && options.loadAllChildren(id);
+                    const loadAll = withNestedChildren ? parentLoadAll || loadAllChildren : loadAllChildren;
+                    remainingRowsCount--;
+
+                    if (hasChildren && ((!isFolded && remainingRowsCount > 0) || loadAll)) {
+                        const childPromise = loadRecursive(id, item, loadAll, remainingRowsCount);
+
+                        childrenPromises.push(childPromise);
+
+                        if (options.fetchStrategy === 'sequential') {
+                            const loadedCount = await childPromise;
+                            remainingRowsCount -= loadedCount;
+                            recursiveLoadedCount += loadedCount;
+                        }
+                    }
+                }
+
+                const childCounts = await Promise.all(childrenPromises);
+                if (options.fetchStrategy === 'parallel') {
+                    const recursiveChildrenCount = childCounts.reduce((a, b) => a + b, 0);
+                    recursiveLoadedCount += recursiveChildrenCount;
+                    remainingRowsCount -= recursiveChildrenCount;
+                }
+            }
+
+            return recursiveLoadedCount;
+        };
+
+        await loadRecursive(undefined, undefined, options?.loadAllChildren?.(undefined), requiredRowsCount);
+
+        return {
+            tree,
+            loadedItemsMap: newItemsMap,
+            loadedItems: newItems,
+            byParentId, // ?
+            nodeInfoById, // ?
+        };
+    }
+
+    private static async loadMissingItemsAndParents<TItem, TId, TFilter>({
+        tree,
+        newItemsMap,
+        options,
+        itemsToLoad,
+    }: LoadMissingItemsAndParentsOptions<TItem, TId, TFilter>) {
+        const updatedItemsMap = cloneMap(newItemsMap);
+        let iteration = 0;
+        let prevMissingIds = new Set<TId>();
+        let loadedItems: TItem[] = [];
+
+        while (true) {
+            const missingIds = new Set<TId>();
+            if (itemsToLoad && itemsToLoad.length > 0) {
+                itemsToLoad.forEach((id) => {
+                    if (tree.getById(id) === NOT_FOUND_RECORD && !updatedItemsMap.has(id)) {
+                        missingIds.add(id);
+                    }
+                });
+            }
+            if (tree.getParams().getParentId) {
+                for (const [, item] of updatedItemsMap) {
+                    const parentId = tree.getParams().getParentId(item);
+                    if (parentId != null && !updatedItemsMap.has(parentId)) {
+                        missingIds.add(parentId);
+                    }
+                }
+            }
+
+            if (missingIds.size === 0) {
+                break;
+            } else {
+                const ids = Array.from(missingIds);
+                const response = await options.api({ ids });
+                if (response.items.length !== ids.length) {
+                    console.error(`LazyTree: api does not returned requested items. Check that you handle 'ids' argument correctly.
+                        Read more here: https://github.com/epam/UUI/issues/89`);
+                }
+
+                const newItems = response.items.filter((item) => {
+                    const id = item ? tree.getParams().getId(item) : null;
+                    return id !== null;
+                });
+
+                newItems.forEach((item) => {
+                    const id = tree.getParams().getId(item);
+                    updatedItemsMap.set(id, item);
+                });
+
+                loadedItems = loadedItems.concat(newItems);
+                if (prevMissingIds.size === missingIds.size && isEqual(prevMissingIds, missingIds)) {
+                    break;
+                }
+
+                prevMissingIds = new Set([...missingIds]);
+            }
+            iteration++;
+
+            if (iteration > 1000) {
+                throw new Error('LazyTree: More than 1000 iterations are made to load required items and their parents by ID. Check your api implementation');
+            }
+        }
+        return { itemsMap: updatedItemsMap, loadedItems };
+    }
+
+    private static async loadItems<TItem, TId, TFilter>({
+        tree,
+        options,
+        byParentId,
+        parentId,
+        parent,
+        dataSourceState,
+        remainingRowsCount,
+        loadAll,
+    }: LoadItemsOptions<TItem, TId, TFilter>) {
+        const { ids: originalIds, count: childrenCount, totalCount, assumedCount: prevAssumedCount } = tree.getItems(parentId);
+        const inputIds = byParentId.has(parentId) ? byParentId.get(parentId) ?? originalIds : originalIds;
+
+        let ids = inputIds ?? [];
+        const loadedItems: TItem[] = [];
+
+        const flatten = dataSourceState.search && options.flattenSearchResults;
+
+        // Selection cascading forces to load all nodes under particular node
+        if (loadAll) {
+            remainingRowsCount = Number.MAX_SAFE_INTEGER;
+        }
+
+        const missingCount = remainingRowsCount - ids.length;
+
+        const availableCount = childrenCount != null ? childrenCount - ids.length : missingCount;
+
+        const range: LazyDataSourceApiRequestRange = { from: ids.length };
+
+        let skipRequest = false;
+        if (!loadAll) {
+            range.count = missingCount;
+            skipRequest = options.isLoadStrict ? true : skipRequest;
+        }
+
+        if (missingCount === 0 || availableCount === 0 || skipRequest) {
+            return {
+                ids,
+                nodeInfo: { count: childrenCount, totalCount, assumedCount: prevAssumedCount },
+                loadedItems,
+            };
+        }
+
+        // Need to load additional items in the current layer
+        const requestContext: LazyDataSourceApiRequestContext<TItem, TId> = {};
+
+        if (!flatten) {
+            if (parent != null) {
+                requestContext.parentId = parentId;
+                requestContext.parent = parent;
+            } else {
+                // in flatten mode, we don't set parent and parentId even for root - as we don't want to limit results to top-level nodes only
+                requestContext.parentId = null;
+                requestContext.parent = null;
+            }
+        }
+
+        const response = await options.api(
+            {
+                sorting: dataSourceState.sorting,
+                search: dataSourceState.search,
+                filter: options.filter,
+                range,
+                page: dataSourceState.page,
+                pageSize: dataSourceState.pageSize,
+            },
+            requestContext,
+        );
+
+        const from = response.from == null ? range.from : response.from;
+
+        if (response.items?.length) {
+            ids = [...ids];
+            for (let n = 0; n < response.items.length; n++) {
+                const item = response.items[n];
+                loadedItems.push(item);
+                const id = tree.getParams().getId(item);
+                ids[n + from] = id;
+            }
+        }
+
+        let newNodesCount;
+
+        if (response.count !== null && response.count !== undefined) {
+            newNodesCount = response.count;
+        } else if (response.items?.length < missingCount) {
+            newNodesCount = from + response.items.length;
+        }
+
+        let assumedCount = undefined;
+        if (!flatten && parent && tree.getParams().getChildCount) {
+            assumedCount = tree.getParams().getChildCount(parent);
+        }
+
+        let nodeInfo = { count: childrenCount, totalCount, assumedCount: prevAssumedCount };
+        if (newNodesCount !== childrenCount || assumedCount !== prevAssumedCount) {
+            nodeInfo = { ...nodeInfo, count: newNodesCount, assumedCount };
+        }
+
+        nodeInfo = { ...nodeInfo, totalCount: response.totalCount ?? totalCount };
+        return {
+            ids,
+            nodeInfo,
+            loadedItems,
+        };
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/FilterHelper.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/FilterHelper.ts
new file mode 100644
index 0000000000..add2f5240b
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/FilterHelper.ts
@@ -0,0 +1,41 @@
+import { TreeStructure } from '../TreeStructure';
+import { ApplyFilterToTreeSnapshotOptions, FilterOptions } from './types';
+
+export class FilterHelper {
+    public static filter<TItem, TId, TFilter>({ treeStructure, getFilter, filter }: FilterOptions<TItem, TId, TFilter>): TreeStructure<TItem, TId> {
+        const isMatchingFilter = getFilter?.(filter);
+        return this.applyFilterToTreeSnapshot({ treeStructure, filter: isMatchingFilter });
+    }
+
+    private static applyFilterToTreeSnapshot<TItem, TId>({ treeStructure, filter }: ApplyFilterToTreeSnapshotOptions<TItem, TId>) {
+        if (!filter) return treeStructure;
+
+        const matchedItems: TItem[] = [];
+        const applyFilterRec = (items: TItem[]) => {
+            let isSomeMatching: number | boolean = false;
+            items.forEach((item) => {
+                const isItemMatching = filter(item);
+                const id = treeStructure.getParams().getId(item);
+                const isSomeChildMatching = applyFilterRec(treeStructure.getChildren(id));
+                const isMatching = isItemMatching || isSomeChildMatching;
+                if (isMatching) {
+                    matchedItems.push(item);
+                }
+
+                if (!isSomeMatching) {
+                    isSomeMatching = isMatching;
+                }
+            });
+
+            return isSomeMatching;
+        };
+
+        applyFilterRec(treeStructure.getRootItems());
+
+        return TreeStructure.createFromItems({
+            itemsAccessor: treeStructure.itemsAccessor,
+            params: treeStructure.getParams(),
+            items: matchedItems,
+        });
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/PatchHelper.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/PatchHelper.ts
new file mode 100644
index 0000000000..9c1bc5584a
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/PatchHelper.ts
@@ -0,0 +1,198 @@
+import { IImmutableMap, IMap } from '../../../../../../types';
+import { indexToOrder } from '../../../../../../helpers';
+import { buildComparators, composeComparators, simpleComparator } from '../../helpers';
+import { NOT_FOUND_RECORD } from '../../exposed';
+import { ItemsAccessor } from '../../ItemsAccessor';
+import { TreeStructure } from '../TreeStructure';
+import { cloneMap, newMap } from '../../helpers/map';
+import { merge } from '../../helpers/merge';
+import { PatchIntoTreeStructureOptions } from './types';
+import { ItemsMap } from '../../ItemsMap';
+
+interface ApplyPatchWithSortingOptions<TItem, TId> {
+    comparator: (a: TItem, b: TItem) => number;
+    patchAtLastSort: IMap<TId, TItem> | IImmutableMap<TId, TItem>;
+    originalItemsMap: ItemsMap<TId, TItem>;
+    patchedItemsMap: ItemsMap<TId, TItem>;
+    isDeleted: (id: TId) => boolean;
+    complexIds?: boolean;
+}
+
+interface ApplyPatchTemporaryReorderingOptions<TItem, TId> {
+    getItemTemporaryOrder: (item: TItem) => string;
+    patchedItemsMap: ItemsMap<TId, TItem>;
+    isDeleted: (id: TId) => boolean;
+    complexIds?: boolean;
+}
+
+export class PatchHelper {
+    private static applyPatchWithSorting<TItem, TId>(
+        patchIds: TId[],
+        originalIds: TId[],
+        {
+            comparator,
+            patchAtLastSort,
+            originalItemsMap,
+            patchedItemsMap,
+            isDeleted,
+            complexIds,
+        }: ApplyPatchWithSortingOptions<TItem, TId>,
+        initialIds: TId[] = [],
+    ) {
+        return merge(
+            patchIds,
+            originalIds,
+            (patchItemId, itemId) => {
+                const inPatchBeforeSort = patchAtLastSort.has(patchItemId);
+                const inOriginalTree = originalItemsMap.has(patchItemId);
+
+                let patchItemToCompare;
+                if (inPatchBeforeSort) {
+                    patchItemToCompare = patchAtLastSort.get(patchItemId);
+                } else if (inOriginalTree) {
+                    patchItemToCompare = originalItemsMap.get(patchItemId);
+                } else {
+                    patchItemToCompare = patchedItemsMap.get(patchItemId);
+                }
+
+                const item = originalItemsMap.get(itemId);
+                return comparator(patchItemToCompare, item);
+            },
+            initialIds,
+            { isDeleted, complexIds },
+        );
+    }
+
+    private static applyPatchTemporaryReordering<TItem, TId>(
+        patchIds: TId[],
+        originalIds: TId[],
+        {
+            getItemTemporaryOrder,
+            patchedItemsMap,
+            isDeleted,
+            complexIds,
+        }: ApplyPatchTemporaryReorderingOptions<TItem, TId>,
+    ) {
+        return merge(
+            patchIds,
+            originalIds,
+
+            (patchItemId, itemId, _, itemIndex) => {
+                const a = patchedItemsMap.get(patchItemId);
+                const b = patchedItemsMap.get(itemId);
+
+                const aTempOrder = getItemTemporaryOrder(a);
+                const bTempOrder = getItemTemporaryOrder(b) ?? indexToOrder(itemIndex);
+                return simpleComparator(aTempOrder, bTempOrder);
+            },
+            [],
+            { isDeleted, complexIds },
+        );
+    }
+
+    public static patch<TItem, TId>({
+        itemsMap: originalItemsMap,
+        treeStructure,
+        sortedPatch,
+        patchAtLastSort,
+        getItemTemporaryOrder,
+        isDeleted,
+        sorting,
+        sortBy,
+    }: PatchIntoTreeStructureOptions<TItem, TId>) {
+        if (!sortedPatch || !sortedPatch.size) return { treeStructure, itemsMap: originalItemsMap, newItems: [] };
+
+        const newByParentId = cloneMap(treeStructure.byParentId); // shallow clone, still need to copy arrays inside!
+        let patchedItemsMap = originalItemsMap;
+        let newItems: TItem[] = [];
+        const comparators = buildComparators({ sorting, sortBy, getId: treeStructure.getParams().getId });
+        const composedComparator = composeComparators(comparators, treeStructure.getParams().getId);
+
+        const complexIds = treeStructure.getParams().complexIds;
+        const parentsWithNewChildren = newMap<TId, boolean>({ complexIds });
+        let isUpdated = false;
+        for (const [patchParentId, sorted] of sortedPatch) {
+            patchedItemsMap = patchedItemsMap.setItems(sorted.newItems);
+            newItems = newItems.concat(sorted.newItems);
+            const itemIds = newByParentId.get(patchParentId) ?? [];
+
+            // eslint-disable-next-line no-loop-func
+            const isDeletedFn = (id: TId) => isDeleted?.(patchedItemsMap.get(id)) ?? false;
+
+            const [sortedItems, isUpdatedOnPatch] = this.applyPatchWithSorting(
+                sorted.updated,
+                itemIds,
+                {
+                    comparator: composedComparator,
+                    patchAtLastSort,
+                    originalItemsMap,
+                    patchedItemsMap,
+                    isDeleted: isDeletedFn,
+                    complexIds,
+                },
+                sorted.top,
+            );
+
+            const sortedItemsWithBottom = sortedItems.concat(sorted.bottom);
+
+            const [reorderedItems, isUpdatedOnReordering] = this.applyPatchTemporaryReordering(
+                sorted.withTempOrder,
+                sortedItemsWithBottom,
+                {
+                    getItemTemporaryOrder,
+                    patchedItemsMap,
+                    isDeleted: isDeletedFn,
+                    complexIds,
+                },
+            );
+
+            // eslint-disable-next-line no-loop-func
+            sorted.moved.forEach((id) => {
+                const item = treeStructure.getById(id);
+                if (item !== NOT_FOUND_RECORD) {
+                    const parentId = treeStructure.getParams().getParentId?.(item) ?? undefined;
+                    const prevItems = newByParentId.get(parentId);
+                    newByParentId.set(parentId, prevItems.filter((itemId) => itemId !== id));
+                }
+                const newItem = patchedItemsMap.get(id);
+                const newParentId = treeStructure.getParams().getParentId?.(newItem) ?? undefined;
+                parentsWithNewChildren.set(newParentId, true);
+            });
+
+            newByParentId.set(patchParentId, reorderedItems);
+            if (isUpdatedOnReordering || isUpdatedOnPatch || sorted.top.length || sorted.bottom.length || sorted.moved.length) {
+                isUpdated = true;
+            }
+        }
+
+        if (!isUpdated) {
+            return { treeStructure, itemsMap: originalItemsMap, newItems };
+        }
+
+        const newNodeInfoById = cloneMap(treeStructure.nodeInfoById);
+        for (const [parentId, ids] of newByParentId) {
+            if (treeStructure.nodeInfoById.has(parentId)) {
+                const prevNodeInfo = treeStructure.nodeInfoById.get(parentId);
+                if (prevNodeInfo.count !== undefined) {
+                    newNodeInfoById.set(parentId, { ...prevNodeInfo, count: ids.length });
+                } else if (parentsWithNewChildren.has(parentId) && (prevNodeInfo.count === undefined)) {
+                    const { assumedCount, ...prev } = prevNodeInfo;
+                    newNodeInfoById.set(parentId, { ...prev, count: ids.length, ...(assumedCount === undefined ? {} : { assumedCount }) });
+                }
+            } else {
+                newNodeInfoById.set(parentId, { count: ids.length });
+            }
+        }
+
+        return {
+            treeStructure: TreeStructure.create(
+                treeStructure.getParams(),
+                ItemsAccessor.toItemsAccessor(patchedItemsMap),
+                newByParentId,
+                newNodeInfoById,
+            ),
+            itemsMap: patchedItemsMap,
+            newItems,
+        };
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/SearchHelper.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/SearchHelper.ts
new file mode 100644
index 0000000000..d99e331360
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/SearchHelper.ts
@@ -0,0 +1,80 @@
+import { TreeStructure } from '../TreeStructure';
+import { getSearchFilter } from '../../../../../querying';
+import sortBy from 'lodash.sortby';
+import { ApplySearchToTreeSnapshotOptions, SearchOptions } from './types';
+
+export class SearchHelper {
+    public static search<TItem, TId, TFilter>(options: SearchOptions<TItem, TId, TFilter>): TreeStructure<TItem, TId> {
+        const search = this.buildSearchFilter(options);
+        return this.applySearchToTree({ treeStructure: options.treeStructure, search, sortSearchByRelevance: options.sortSearchByRelevance });
+    }
+
+    private static buildSearchFilter<TItem, TId, TFilter>({ search, getSearchFields }: SearchOptions<TItem, TId, TFilter>) {
+        if (!search) return null;
+
+        if (!getSearchFields) {
+            console.warn('[Tree] Search value is set, but options.getSearchField is not specified. Nothing to search on.');
+            return null;
+        }
+        const searchFilter = getSearchFilter(search);
+        return (i: TItem) => searchFilter(getSearchFields(i));
+    }
+
+    private static applySearchToTree<TItem, TId>({ treeStructure, search, sortSearchByRelevance }: ApplySearchToTreeSnapshotOptions<TItem, TId>) {
+        if (!search) return treeStructure;
+
+        const matchedItems: TItem[] = [];
+        const ranks: Map<TId, number> = new Map();
+        const applySearchRec = (items: TItem[]) => {
+            let isSomeMatching: number | boolean = false;
+            items.forEach((item) => {
+                const isItemMatching = search(item);
+                const id = treeStructure.getParams().getId(item);
+                const isSomeChildMatching = applySearchRec(treeStructure.getChildren(id));
+                const isMatching = isItemMatching || isSomeChildMatching;
+                if (isMatching !== false) {
+                    matchedItems.push(item);
+                    if (typeof isMatching !== 'boolean') {
+                        const rank = ranks.has(id) ? Math.max(ranks.get(id), isMatching) : isMatching;
+                        ranks.set(treeStructure.getParams().getId(item), rank);
+                    }
+                }
+
+                if (!isSomeMatching) {
+                    isSomeMatching = isMatching;
+                } else if (typeof isMatching === 'number') {
+                    isSomeMatching = typeof isSomeMatching === 'number'
+                        ? Math.max(isMatching, isSomeMatching)
+                        : isMatching;
+                }
+            });
+
+            return isSomeMatching;
+        };
+
+        applySearchRec(treeStructure.getRootItems());
+
+        const searchItems = sortSearchByRelevance ? this.sortByRanks(matchedItems, ranks, treeStructure.getParams().getId) : matchedItems;
+
+        return TreeStructure.createFromItems({
+            itemsAccessor: treeStructure.itemsAccessor,
+            params: treeStructure.getParams(),
+            items: searchItems,
+        });
+    }
+
+    private static sortByRanks<TItem, TId>(items: TItem[], ranks: Map<TId, number>, getId: (item: TItem) => TId) {
+        if (ranks.size === 0) {
+            return items;
+        }
+        const itemsToSort = [...items];
+
+        return sortBy(itemsToSort, (item) => {
+            const id = getId(item);
+            if (!ranks.has(id)) {
+                return 0;
+            }
+            return ranks.get(id) * -1;
+        });
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/SortHelper.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/SortHelper.ts
new file mode 100644
index 0000000000..bbd7ec53bc
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/SortHelper.ts
@@ -0,0 +1,25 @@
+import { buildSorter } from '../../helpers';
+import { TreeStructure } from '../TreeStructure';
+import { SortOptions } from './types';
+
+export class SortHelper {
+    public static sort<TItem, TId, TFilter>({ treeStructure, ...options }: SortOptions<TItem, TId, TFilter>) {
+        const sort = buildSorter(options);
+        const sortedItems: TItem[][] = [];
+        const sortRec = (items: TItem[]) => {
+            sortedItems.push(sort(items));
+            items.forEach((item) => {
+                const id = treeStructure.getParams().getId(item);
+                const children = treeStructure.getChildren(id);
+                sortRec(children);
+            });
+        };
+
+        sortRec(treeStructure.getRootItems());
+        return TreeStructure.createFromItems({
+            params: treeStructure.getParams(),
+            itemsAccessor: treeStructure.itemsAccessor,
+            items: sortedItems.flat(),
+        });
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/TreeHelper.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/TreeHelper.ts
new file mode 100644
index 0000000000..43ad918ef4
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/TreeHelper.ts
@@ -0,0 +1,21 @@
+import { ITree } from '../../ITree';
+import { NOT_FOUND_RECORD } from '../../constants';
+
+export class TreeHelper {
+    public static getParents<TItem, TId>(id: TId, tree: ITree<TItem, TId>) {
+        const parentIds: TId[] = [];
+        let parentId = id;
+        while (true) {
+            const item = tree.getById(parentId);
+            if (item === NOT_FOUND_RECORD) {
+                break;
+            }
+            parentId = tree.getParams().getParentId?.(item);
+            if (parentId === undefined) {
+                break;
+            }
+            parentIds.unshift(parentId);
+        }
+        return parentIds;
+    }
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/checked.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/checked.ts
new file mode 100644
index 0000000000..bdd2480fbd
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/checked.ts
@@ -0,0 +1,20 @@
+import { DataSourceState, IImmutableMap, IMap } from '../../../../../../types';
+
+export const getSelectedAndChecked = <TItem, TId>(
+    dataSourceState: DataSourceState<any, TId>,
+    patch: IMap<TId, TItem> | IImmutableMap<TId, TItem>,
+) => {
+    let checked: TId[] = [];
+    if (dataSourceState.checked?.length) {
+        checked = [...dataSourceState.checked];
+    }
+    if (dataSourceState.selectedId !== null && dataSourceState.selectedId !== undefined) {
+        checked = [...checked, dataSourceState.selectedId];
+    }
+
+    if (!patch || !patch.size) {
+        return checked;
+    }
+
+    return checked.filter((id) => !patch.has(id));
+};
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/index.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/index.ts
new file mode 100644
index 0000000000..292cf8504c
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/index.ts
@@ -0,0 +1,7 @@
+export * from './CheckingHelper';
+export * from './FetchingHelper';
+export * from './FilterHelper';
+export * from './SearchHelper';
+export * from './SortHelper';
+export * from './checked';
+export * from './PatchHelper';
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/helpers/types.ts b/uui-core/src/data/processing/views/tree/treeStructure/helpers/types.ts
new file mode 100644
index 0000000000..8cbc8284f2
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/helpers/types.ts
@@ -0,0 +1,148 @@
+import { CascadeSelection, DataSourceState, IMap, IImmutableMap } from '../../../../../../types';
+import { TreeStructure } from '../TreeStructure';
+import { CompositeKeysMap } from '../../helpers';
+import { LazyListViewProps } from '../../../types';
+import { ApplyFilterOptions, ApplySearchOptions, ApplySortOptions, ExtendedPatchOptions, ItemsComparator, LoadTreeOptions } from '../../treeState/types';
+import { ItemsMap } from '../../ItemsMap';
+import { ITree } from '../../ITree';
+import { NOT_FOUND_RECORD } from '../../exposed';
+
+export interface ActForCheckableOptions<TItem, TId> {
+    tree: ITree<TItem, TId>;
+    action: (id: TId) => void;
+    isCheckable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;
+    id: TId;
+}
+
+export interface CascadeSelectionOptions<TItem, TId> {
+    tree: ITree<TItem, TId>;
+    currentCheckedIds: TId[];
+    checkedId: TId;
+    isChecked: boolean;
+    isCheckable?: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;
+    isUnknown?: (id: TId) => boolean;
+    cascadeSelectionType?: CascadeSelection;
+}
+
+export interface CheckParentsWithFullCheckOptions<TItem, TId> {
+    tree: ITree<TItem, TId>;
+    checkedIdsMap: CompositeKeysMap<TId, boolean> | Map<TId, boolean>;
+    checkedId: TId;
+    isCheckable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;
+    removeExplicitChildrenSelection?: boolean;
+}
+
+export interface ClearIfTreeNotLoadedOptions<TItem, TId> {
+    tree: ITree<TItem, TId>;
+    checkedIdsMap: CompositeKeysMap<TId, boolean> | Map<TId, boolean>;
+    checkedId: TId;
+    isCheckable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;
+}
+
+export interface ClearUnknownItemsOptions<TId> {
+    checkedIdsMap: CompositeKeysMap<TId, boolean> | Map<TId, boolean>;
+    isUnknown: (id: TId) => boolean;
+}
+
+export interface SelectionOptions<TItem, TId> {
+    tree: ITree<TItem, TId>;
+    checkedIdsMap: CompositeKeysMap<TId, boolean> | Map<TId, boolean>;
+    checkedId: TId;
+    isChecked: boolean;
+    isCheckable: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;
+}
+
+export interface LoadAllTreeOptions<TItem, TId, TFilter> extends Pick<LazyListViewProps<TItem, TId, TFilter>, 'api' | 'filter'> {}
+
+export interface LoadAllOptions<TItem, TId, TFilter = any> {
+    treeStructure: TreeStructure<TItem, TId>;
+    itemsMap: ItemsMap<TId, TItem>;
+    options: LoadAllTreeOptions<TItem, TId, TFilter>;
+    dataSourceState: DataSourceState;
+}
+
+export interface LoadItemsOptions<TItem, TId, TFilter = any> {
+    tree: ITree<TItem, TId>;
+    byParentId: IMap<TId, TId[]>;
+    options: LoadTreeOptions<TItem, TId, TFilter>,
+    parentId: TId,
+    parent: TItem,
+    dataSourceState: Readonly<DataSourceState>,
+    remainingRowsCount: number,
+    loadAll: boolean,
+}
+
+export interface LoadMissingItemsAndParentsOptions<TItem, TId, TFilter = any> {
+    tree: ITree<TItem, TId>;
+    newItemsMap: IMap<TId, TItem>;
+    options: LoadTreeOptions<TItem, TId, TFilter>;
+    itemsToLoad: TId[];
+}
+
+export interface LoadOptionsMissing<TItem, TId, TFilter = any> {
+    tree: ITree<TItem, TId>;
+    options: LoadTreeOptions<TItem, TId, TFilter>;
+    dataSourceState: Readonly<DataSourceState>;
+    withNestedChildren: boolean;
+}
+
+export interface LoadOptions<TItem, TId, TFilter = any> {
+    tree: ITree<TItem, TId>;
+    options: LoadTreeOptions<TItem, TId, TFilter>;
+    dataSourceState: Readonly<DataSourceState>;
+    patch?: IMap<TId, TItem> | IImmutableMap<TId, TItem>;
+    withNestedChildren: boolean;
+}
+
+export interface SortOptions<TItem, TId, TFilter> extends ApplySortOptions<TItem, TId, TFilter> {
+    treeStructure: TreeStructure<TItem, TId>;
+}
+
+export interface ApplySearchToTreeSnapshotOptions<TItem, TId> {
+    treeStructure: TreeStructure<TItem, TId>;
+    search: undefined | ((item: TItem) => number | boolean);
+    sortSearchByRelevance?: boolean;
+}
+
+export interface SearchOptions<TItem, TId, TFilter> extends ApplySearchOptions<TItem, TId, TFilter> {
+    treeStructure: TreeStructure<TItem, TId>;
+}
+
+export interface PatchIntoTreeStructureOptions<TItem, TId> extends Omit<ExtendedPatchOptions<TItem, TId>, 'getNewItemPosition'> {
+    treeStructure: TreeStructure<TItem, TId>;
+    itemsMap: ItemsMap<TId, TItem>;
+}
+
+export interface PatchChildrenOptions<TItem, TId> {
+    treeStructure: TreeStructure<TItem, TId>;
+    itemsMap: ItemsMap<TId, TItem>;
+    children: TId[] | undefined;
+    existingItem: TItem | undefined;
+    newItem: TItem;
+    comparator: ItemsComparator<TItem>;
+}
+
+export interface PasteItemIntoChildrenListOptions<TItem, TId> {
+    id: TId;
+    item: TItem;
+    children: TId[];
+    comparator: ItemsComparator<TItem>;
+    itemsMap: ItemsMap<TId, TItem>;
+}
+
+export interface PatchOptions<TItem, TId> {
+    treeStructure: TreeStructure<TItem, TId>;
+    itemsMap: ItemsMap<TId, TItem>;
+    items: TItem[];
+    isDeleted?: () => boolean;
+    comparator?: ItemsComparator<TItem>;
+}
+
+export interface FilterOptions<TItem, TId, TFilter = any> extends ApplyFilterOptions<TItem, TId, TFilter> {
+    treeStructure: TreeStructure<TItem, TId>;
+}
+
+export interface ApplyFilterToTreeSnapshotOptions<TItem, TId> {
+    treeStructure: TreeStructure<TItem, TId>;
+    filter: undefined | ((item: TItem) => number | boolean);
+}
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/index.ts b/uui-core/src/data/processing/views/tree/treeStructure/index.ts
new file mode 100644
index 0000000000..12c10b582d
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/index.ts
@@ -0,0 +1,3 @@
+export * from './TreeStructure';
+export * from './helpers';
+export * from './types';
diff --git a/uui-core/src/data/processing/views/tree/treeStructure/types.ts b/uui-core/src/data/processing/views/tree/treeStructure/types.ts
new file mode 100644
index 0000000000..005c7e3ea3
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/treeStructure/types.ts
@@ -0,0 +1,48 @@
+import { NOT_FOUND_RECORD } from '../constants';
+
+export interface IItemsAccessor<TItem, TId> {
+    get: (id: TId) => TItem | typeof NOT_FOUND_RECORD;
+    forEach: (action: (item: TItem, id: TId) => void) => void;
+}
+
+/**
+ * ITree configuration.
+ */
+export interface ITreeParams<TItem, TId> {
+    /**
+     * Item ID getter.
+     */
+    getId(item: TItem): TId;
+    /**
+     * Item parent ID getter.
+     */
+    getParentId?(item: TItem): TId | undefined;
+    /**
+     * Item child count getter.
+     * @param item - item, which children count should be returned.
+     * @returns assumed children count. If unknown, it is better to return 1.
+     */
+    getChildCount?(item: TItem): number;
+    /**
+     * Enables support of ids of types Object, Array, etc.
+     */
+    complexIds?: boolean;
+}
+/**
+ * Info of the tree node.
+ */
+export interface ITreeNodeInfo {
+    /**
+     * Count of the records, returned from server or explicitly counted from data.
+     * If undefined, not all data is loaded from server.
+     */
+    count?: number;
+    /**
+     * Total count of the records. Usually, is returned from server on a root node fetch.
+     */
+    totalCount?: number;
+    /**
+     * Assumed count, got from the `getChildCount` result.
+     */
+    assumedCount?: number;
+}
diff --git a/uui-core/src/data/processing/views/tree/types.ts b/uui-core/src/data/processing/views/tree/types.ts
new file mode 100644
index 0000000000..827b62e8e6
--- /dev/null
+++ b/uui-core/src/data/processing/views/tree/types.ts
@@ -0,0 +1,12 @@
+import { FAILED_RECORD, LOADED_RECORD, LOADING_RECORD, NOT_FOUND_RECORD, PENDING_RECORD, PatchOrdering } from './constants';
+
+export type RecordStatus =
+| typeof PENDING_RECORD
+| typeof LOADING_RECORD
+| typeof LOADED_RECORD
+| typeof NOT_FOUND_RECORD
+| typeof FAILED_RECORD;
+
+export type PatchOrderingType =
+| typeof PatchOrdering.TOP
+| typeof PatchOrdering.BOTTOM;
diff --git a/uui-core/src/data/processing/views/types.ts b/uui-core/src/data/processing/views/types.ts
new file mode 100644
index 0000000000..61e11a2b4d
--- /dev/null
+++ b/uui-core/src/data/processing/views/types.ts
@@ -0,0 +1,16 @@
+import { BaseListViewProps, FilterConfig, SearchConfig, SortConfig } from '../../../types';
+import { ArrayDataSourceConfig, AsyncDataSourceConfig, LazyDataSourceConfig } from './tree/hooks/strategies/types';
+
+export interface BaseArrayListViewProps<TItem, TId, TFilter> extends BaseListViewProps<TItem, TId, TFilter>,
+    SortConfig<TItem>,
+    SearchConfig<TItem>,
+    FilterConfig<TItem, TFilter> {}
+
+export interface ArrayListViewProps<TItem, TId, TFilter> extends BaseArrayListViewProps<TItem, TId, TFilter>,
+    ArrayDataSourceConfig<TItem> {}
+
+export interface AsyncListViewProps<TItem, TId, TFilter> extends BaseArrayListViewProps<TItem, TId, TFilter>,
+    AsyncDataSourceConfig<TItem> {}
+
+export interface LazyListViewProps<TItem, TId, TFilter> extends BaseListViewProps<TItem, TId, TFilter>,
+    LazyDataSourceConfig<TItem, TId, TFilter> {}
diff --git a/uui-core/src/data/querying/runDataQuery.ts b/uui-core/src/data/querying/runDataQuery.ts
index 6a4af96d38..2a4fbfa3fe 100644
--- a/uui-core/src/data/querying/runDataQuery.ts
+++ b/uui-core/src/data/querying/runDataQuery.ts
@@ -33,7 +33,6 @@ export function runDataQuery<TItem extends { id: any }>(allItems: TItem[], reque
     }
 
     const filteredAndSorted = items;
-
     if (request.range) {
         const from = request.range.from || 0;
         const count = request.range.count == null ? items.length : request.range.count;
diff --git a/uui-core/src/data/validation/validate.ts b/uui-core/src/data/validation/validate.ts
index 86c696de56..a002950585 100644
--- a/uui-core/src/data/validation/validate.ts
+++ b/uui-core/src/data/validation/validate.ts
@@ -5,13 +5,31 @@ import { ValidationState } from '../lenses';
 export type ValidationMode = 'change' | 'save';
 export const blankValidationState: ValidationState = {};
 
+type Iterable<U> = U & { [Symbol.iterator](): IterableIterator<[string, unknown]> };
+type IterableWithGet<U> = Iterable<U> & { get(key: string): unknown };
+
+const isIterable = <U>(value: U): value is Iterable<U> => typeof value === 'object' && Symbol.iterator in value;
+const shouldAccessWithGet = <U>(value: U): value is IterableWithGet<U> => typeof value === 'object' && 'get' in value;
+
+const getValue = <U extends {}>(key: string, value: U) => {
+    if (value === null || typeof value !== 'object') {
+        return undefined;
+    }
+
+    if (shouldAccessWithGet(value)) {
+        return value.get(key);
+    }
+
+    return value[key as keyof U];
+};
+
 export const validate = <T>(value: T, meta: Metadata<T>, initValue: T, validateOn: ValidationMode): ValidationState => {
     const validateRec = <U>(innerValue: U, path: U[], innerMeta: Metadata<U>, innerInitValue: U): ValidationState => {
         const itemResult: ValidationState = validateValue(innerValue, path, innerMeta);
         const validateItem = (key: string, validationMeta: Metadata<any>) => {
-            const childValue = innerValue && (innerValue as any)[key];
+            const childValue = getValue(key, innerValue);
             const newPath = [childValue, ...path];
-            const initChildValue = innerInitValue && (innerInitValue as any)[key];
+            const initChildValue = getValue(key, innerInitValue);
             const isChildChanged = childValue !== initChildValue;
 
             let childResult;
@@ -40,8 +58,14 @@ export const validate = <T>(value: T, meta: Metadata<T>, initValue: T, validateO
         }
 
         if (innerMeta.all && innerValue != null) {
-            for (const key in innerValue) {
-                validateItem(key, innerMeta.all);
+            if (!Array.isArray(innerValue) && isIterable(innerValue)) {
+                for (const [key] of innerValue) {
+                    validateItem(key, innerMeta.all);
+                }
+            } else {
+                for (const key in innerValue) {
+                    validateItem(key, innerMeta.all);
+                }
             }
         }
 
diff --git a/uui-core/src/helpers/__tests__/applyColumnsConfig.test.ts b/uui-core/src/helpers/__tests__/applyColumnsConfig.test.ts
index 0c7634ba7d..fb4250812e 100644
--- a/uui-core/src/helpers/__tests__/applyColumnsConfig.test.ts
+++ b/uui-core/src/helpers/__tests__/applyColumnsConfig.test.ts
@@ -87,7 +87,7 @@ describe('applyColumnsConfig', () => {
         const config: ColumnsConfig = {
             1: { isVisible: false, fix: 'right', order: 'v', width: 100 },
             2: { isVisible: true, order: 's', fix: undefined, width: 200 },
-            3: { isVisible: true, order: 'm', fix: 'left', width: 300 },
+            3: { isVisible: true, order: 'u', fix: 'left', width: 300 },
         };
 
         const result = getColumnsConfig(columns, config);
diff --git a/uui-core/src/helpers/__tests__/getOrderBetween.test.tsx b/uui-core/src/helpers/__tests__/getOrderBetween.test.tsx
index b1c6ffd36a..a2647a405f 100644
--- a/uui-core/src/helpers/__tests__/getOrderBetween.test.tsx
+++ b/uui-core/src/helpers/__tests__/getOrderBetween.test.tsx
@@ -1,4 +1,4 @@
-import { getOrderBetween } from '../getOrderBetween';
+import { getOrderBetween, indexToOrder } from '../getOrderBetween';
 
 describe('getOrderBetween', () => {
     it('computes order between existing', () => {
@@ -45,4 +45,67 @@ describe('getOrderBetween', () => {
         expect(order > '9999').toBe(true);
         expect(order < 'z').toBe(true);
     });
+
+    it('can insert before "a"', () => {
+        const order = getOrderBetween(null, 'a');
+        expect(order < 'a').toBe(true);
+    });
+
+    const hasDigits = (s: string) => !!s.match(/\d+/);
+
+    it('does not generate digits if possible', () => {
+        const order = getOrderBetween('bb', 'bbb');
+        expect(hasDigits(order)).toBe(false);
+        expect(order > 'bb').toBe(true);
+        expect(order < 'bbb').toBe(true);
+    });
+
+    it('generates digits if needed', () => {
+        const order = getOrderBetween('a11', 'a12');
+        expect(hasDigits(order)).toBe(true);
+        expect(order > 'a11').toBe(true);
+        expect(order < 'a12').toBe(true);
+    });
+
+    it('can convert index to order', () => {
+        const o1 = indexToOrder(1);
+        const o2 = indexToOrder(2);
+        expect(o1 < o2).toBe(true);
+    });
+
+    it('can find order between orders generated with indexToOrder', () => {
+        const o1 = indexToOrder(0);
+        const o2 = indexToOrder(1);
+        const o3 = indexToOrder(51);
+        const o4 = indexToOrder(100500);
+
+        const o0 = getOrderBetween(null, o1);
+        const o12 = getOrderBetween(o1, o2);
+        const o23 = getOrderBetween(o2, o3);
+        const o34 = getOrderBetween(o3, o4);
+        const o40 = getOrderBetween(o4, null);
+
+        expect(o0 < o1).toBe(true);
+        expect(o1 < o12).toBe(true);
+        expect(o12 < o2).toBe(true);
+        expect(o2 < o23).toBe(true);
+        expect(o23 < o3).toBe(true);
+        expect(o3 < o34).toBe(true);
+        expect(o34 < o4).toBe(true);
+        expect(o4 < o40).toBe(true);
+    });
+
+    it('indexToOrder can handle huge numbers', () => {
+        const o1 = indexToOrder(1000000000);
+        const o2 = indexToOrder(10050010050);
+        const o3 = indexToOrder(123456789123);
+        const o4 = indexToOrder(9999999999999);
+        expect(o1.length < 20).toBe(true);
+        expect(o2.length < 20).toBe(true);
+        expect(o3.length < 20).toBe(true);
+        expect(o4.length < 20).toBe(true);
+        expect(o1 < o2).toBe(true);
+        expect(o2 < o3).toBe(true);
+        expect(o3 < o4).toBe(true);
+    });
 });
diff --git a/uui-core/src/helpers/getOrderBetween.ts b/uui-core/src/helpers/getOrderBetween.ts
index b1e790c346..3f222efc93 100644
--- a/uui-core/src/helpers/getOrderBetween.ts
+++ b/uui-core/src/helpers/getOrderBetween.ts
@@ -1,6 +1,39 @@
 import trimEnd from 'lodash.trimend';
 
-export const minOrderStr = '0';
+const base = 26;
+const memoized: string[] = [];
+
+/**
+ * Computes order string from integer item index in a sequence.
+ * Useful for creating initial orders of items, which can be later manipulated with getOrderBetween to insert or move items.
+ * @param input integer order of item
+ * @returns order string
+ */
+export function indexToOrder(input: number) {
+    const existing = memoized[input];
+    if (existing) {
+        return existing;
+    }
+
+    const aChar = 97;
+    const digits = [];
+
+    let lastInputValue = input;
+    while (lastInputValue > 0) {
+        digits.unshift((lastInputValue % base) + aChar);
+        lastInputValue = Math.floor(lastInputValue / base);
+    }
+    const order = String.fromCharCode(
+        // put number of digits first, to establish order between numbers of different length (the longer is bigger)
+        // '+ 1' is to start number of digits from 'b' to leave room to insert orders before numberToOrder(0), w/o using digits.
+        digits.length + aChar + 1,
+        ...digits,
+    );
+    memoized[input] = order;
+    return order;
+}
+
+export const minOrderStr = 'a';
 export const maxOrderStr = 'zzzz';
 
 /**
@@ -33,11 +66,22 @@ export const maxOrderStr = 'zzzz';
  * @returns order string between inputA and inputB
  */
 export function getOrderBetween(inputA: string | null, inputB: string | null): string {
-    // => uui utils
     const radix = 36;
-    const aValue = inputA == null ? '0' : inputA;
-    const a = trimEnd(aValue, '0');
-    const b = trimEnd(inputB || 'z', '0');
+    let a = inputA;
+    let b = inputB || 'z';
+
+    if (!a) {
+        // We were generating chars 0-z prior. Now we try yo use only a-z.
+        // This is done to avoid issues with string sort/compare algorithms (e.g. Intl.Collator().compare we use in DataSources),
+        // which compare number so '1' < '10', and we rely on plain char-by-char comparators.
+
+        // However, there's no options to generate value less than 'a' w/o digits.
+        // This can happen for already generated orders.
+        a = (b <= 'a') ? '0' : 'a';
+    }
+
+    a = trimEnd(a, '0');
+    b = trimEnd(b, '0');
 
     const throwError = () => {
         throw new Error(`getOrderBetween: can't find values between ${inputA} and ${inputB}`);
@@ -53,14 +97,18 @@ export function getOrderBetween(inputA: string | null, inputB: string | null): s
     while (true) {
         const aChar = a[n];
         const bChar = b[n];
-        let defaultAChar = 'a';
-        if (inputA == null || bChar == null || bChar < 'a') {
-            defaultAChar = '0';
-        }
-        const aDigit = parseInt(aChar || defaultAChar, radix);
+
+        let aDigit = parseInt(aChar || '0', radix);
         const bDigit = parseInt(bChar || 'z', radix);
 
+        // We were generating chars 0-z, however now we try to use a-z if possible.
+        // Unfortunately, it's not possible, if order already contains digits.
+        if (bDigit > 10) {
+            aDigit = Math.max(10, aDigit);
+        }
+
         const midDigit = Math.floor((aDigit + bDigit) / 2);
+
         result += midDigit.toString(radix);
 
         if (aDigit !== midDigit) {
diff --git a/uui-core/src/hooks/index.ts b/uui-core/src/hooks/index.ts
index cdcf2854fb..8f5fedc8da 100644
--- a/uui-core/src/hooks/index.ts
+++ b/uui-core/src/hooks/index.ts
@@ -5,5 +5,4 @@ export * from './useUuiError';
 export * from './useForceUpdate';
 export * from './useUuiServices';
 export * from './useTableState/useTableState';
-export * from './usePrevious';
 export * from './useLayer';
diff --git a/uui-core/src/hooks/usePrevious.ts b/uui-core/src/hooks/usePrevious.ts
index 8d41c09ed5..dc55662ec8 100644
--- a/uui-core/src/hooks/usePrevious.ts
+++ b/uui-core/src/hooks/usePrevious.ts
@@ -1,11 +1,28 @@
 import { useEffect, useRef } from 'react';
 import isEqual from 'lodash.isequal';
 
-export function usePrevious<T>(value: T) {
-    const previousValueRef = useRef(value);
+export interface UsePreviousConfig {
+    compare?: boolean;
+}
+
+/**
+ * Hook, which returns previous version of the value, passed to the arguments.
+ * @param value
+ * @param config - Hook configuration, which defines if previous value will be deeply compared with new value to be saved or not.
+ * @param config.compare - If compare is set to true, previous value will be deeply compared with the new value,
+ * and previous value will be updated only if value is changed (not the link to the object). Otherwise, previous value will be returned.
+ * If compare is false, previous value will be changed on every rerender.
+ * @returns previous version of the value, passed to the props.
+ */
+export function usePrevious<T>(value: T, { compare }: UsePreviousConfig = {}): T | null {
+    const previousValueRef = useRef<T>(null);
 
     useEffect(() => {
-        if (!isEqual(previousValueRef.current, value)) {
+        if (compare) {
+            if (!isEqual(previousValueRef.current, value)) {
+                previousValueRef.current = value;
+            }
+        } else {
             previousValueRef.current = value;
         }
     }, [value]);
diff --git a/uui-core/src/hooks/useTableState/__tests__/useTableState.test.tsx b/uui-core/src/hooks/useTableState/__tests__/useTableState.test.tsx
index b99d189247..1350cbb407 100644
--- a/uui-core/src/hooks/useTableState/__tests__/useTableState.test.tsx
+++ b/uui-core/src/hooks/useTableState/__tests__/useTableState.test.tsx
@@ -137,7 +137,7 @@ const initialTableStateValue = {
     filtersConfig: {
         filter1: {
             isVisible: true,
-            order: 'h',
+            order: 'm',
         },
     },
 };
@@ -212,11 +212,11 @@ describe('useTableState', () => {
             filtersConfig: {
                 filter1: {
                     isVisible: true,
-                    order: 'h',
+                    order: 'm',
                 },
                 filter2: {
                     isVisible: true,
-                    order: 'q',
+                    order: 's',
                 },
             },
             topIndex: 0,
@@ -250,15 +250,15 @@ describe('useTableState', () => {
             filtersConfig: {
                 filter1: {
                     isVisible: true,
-                    order: 'h',
+                    order: 'm',
                 },
                 filter2: {
                     isVisible: false,
-                    order: 'q',
+                    order: 's',
                 },
                 filter3: {
                     isVisible: true,
-                    order: 'u',
+                    order: 'v',
                 },
             },
             topIndex: 40,
@@ -299,7 +299,7 @@ describe('useTableState', () => {
             filtersConfig: {
                 filter1: {
                     isVisible: true,
-                    order: 'h',
+                    order: 'm',
                 },
             },
             viewState: { userName: 'name' },
@@ -331,15 +331,15 @@ describe('useTableState', () => {
             filtersConfig: {
                 filter1: {
                     isVisible: true,
-                    order: 'h',
+                    order: 'm',
                 },
                 filter2: {
                     isVisible: true,
-                    order: 'q',
+                    order: 's',
                 },
                 filter3: {
                     isVisible: true,
-                    order: 'u',
+                    order: 'v',
                 },
             },
         });
@@ -387,7 +387,7 @@ describe('useTableState', () => {
         const newValue = {
             filter1: {
                 isVisible: true,
-                order: 'h',
+                order: 'm',
             },
             filter2: {
                 isVisible: true,
@@ -467,11 +467,11 @@ describe('useTableState', () => {
                 filtersConfig: {
                     filter1: {
                         isVisible: true,
-                        order: 'h',
+                        order: 'm',
                     },
                     filter2: {
                         isVisible: true,
-                        order: 'q',
+                        order: 's',
                     },
                 },
             });
@@ -489,11 +489,11 @@ describe('useTableState', () => {
                 filtersConfig: {
                     filter1: {
                         isVisible: true,
-                        order: 'h',
+                        order: 'm',
                     },
                     filter2: {
                         isVisible: true,
-                        order: 'q',
+                        order: 's',
                     },
                 },
             });
@@ -608,11 +608,11 @@ describe('useTableState', () => {
             filtersConfig: {
                 filter1: {
                     isVisible: true,
-                    order: 'h',
+                    order: 'm',
                 },
                 filter2: {
                     isVisible: true,
-                    order: 'q',
+                    order: 's',
                 },
             },
         });
diff --git a/uui-core/src/hooks/useTableState/useTableState.ts b/uui-core/src/hooks/useTableState/useTableState.ts
index e176b99dc9..fb0ef6076f 100644
--- a/uui-core/src/hooks/useTableState/useTableState.ts
+++ b/uui-core/src/hooks/useTableState/useTableState.ts
@@ -171,8 +171,8 @@ export const useTableStateImpl = <TFilter = Record<string, any>, TViewState = an
         );
     }, []);
 
-    const setTableState = useCallback((newValue: DataTableState<TFilter, TViewState>) => {
-        params.onValueChange(() => newValue);
+    const setTableState = useCallback((newValue: React.SetStateAction<DataTableState<TFilter, TViewState>>) => {
+        params.onValueChange(typeof newValue === 'function' ? newValue : () => newValue);
     }, []);
 
     return {
diff --git a/uui-core/src/types/dataSources.ts b/uui-core/src/types/dataSources.ts
index 242a5f88b3..f8850a5b17 100644
--- a/uui-core/src/types/dataSources.ts
+++ b/uui-core/src/types/dataSources.ts
@@ -1,5 +1,48 @@
 import { ICheckable } from './props';
 import { DataRowOptions, DataRowProps } from './dataRows';
+import { IImmutableMap, IMap } from './objects';
+import { PatchOrderingType } from '../data';
+
+export interface SearchConfig<TItem> {
+    /**
+     * A pure function that gets search value for each item.
+     * @default (item) => item.name.
+     */
+    getSearchFields?(item: TItem): string[];
+
+    /**
+     * Enables sorting of search results by relevance.
+     * - The highest priority has records, which have a full match with a search keyword.
+     * - The lower one has records, which have a search keyword at the 0 position, but not the full match.
+     * - Then, records, which contain a search keyword as a separate word, but not at the beginning.
+     * - And the lowest one - any other match of the search keyword.
+     *
+     * Example:
+     * - `search`: 'some'
+     * - `record string`: 'some word', `rank` = 4
+     * - `record string`: 'someone', `rank` = 3
+     * - `record string`: 'I know some guy', `rank` = 2
+     * - `record string`: 'awesome', `rank` = 1
+     *
+     * @default true
+     */
+    sortSearchByRelevance?: boolean;
+}
+
+export interface SortConfig<TItem> {
+    /**
+     * A pure function that gets sorting value for current sorting value
+     */
+    sortBy?(item: TItem, sorting: SortingOption): any;
+}
+
+export interface FilterConfig<TItem, TFilter> {
+    /**
+     * A pure function that returns filter callback to be applied for each item.
+     * The callback should return true, if item passed the filter.
+     */
+    getFilter?(filter: TFilter): (item: TItem) => boolean;
+}
 
 export type SortDirection = 'asc' | 'desc';
 
@@ -69,67 +112,56 @@ export interface IDataSource<TItem, TId, TFilter> {
     getId(item: TItem): TId;
     getById(id: TId): TItem | void;
     setItem(item: TItem): void;
-    getView(value: DataSourceState<any, TId>, onValueChange: (val: DataSourceState<any, TId>) => any, options?: any): IDataSourceView<TItem, TId, TFilter>;
-    useView(value: DataSourceState<any, TId>, onValueChange: (val: DataSourceState<any, TId>) => any, options?: any, deps?: any[]): IDataSourceView<TItem, TId, TFilter>;
-    unsubscribeView(onValueChange: (val: DataSourceState<any, TId>) => any): void;
+    useView(
+        value: DataSourceState<any, TId>,
+        onValueChange: SetDataSourceState<TFilter, TId>,
+        options?: any,
+        deps?: any[],
+    ): IDataSourceView<TItem, TId, TFilter>;
 }
 
-/** Holds state of a components displaying lists - like tables. Holds virtual list position, filter, search, selection, etc. */
-export interface DataSourceState<TFilter = Record<string, any>, TId = any> extends VirtualListState {
+/**
+ * Patch tree configuration.
+ */
+export interface PatchOptions<TItem, TId> extends SortConfig<TItem> {
     /**
-     * Search value, used to filter data based on it.
-     * Included in the API request object when using a LazyDataSource.
-     * For Array and Async data sources, searching is performed internally by the datasource.
-     * */
-    search?: string;
-    /** Array of checked items IDs */
-    checked?: TId[];
+     * To enable deleting of the items, it is required to specify getter for deleted state.
+     */
+    isDeleted?(item: TItem): boolean;
     /**
-     * A map of item IDs to their folding state.
-     * If an item ID is present with a `true` value, it's folded; otherwise, it's not folded.
-     * */
-    folded?: Record<string, boolean>;
+     * Provides information about the relative position of the new item.
+     * @param item - new item, position should be got for.
+     * @returns relative position in the list of items.
+     * @default PatchOrdering.TOP
+     */
+    getNewItemPosition?: (item: TItem) => PatchOrderingType;
     /**
-     * Filter value used to filter data based on it.
-     * Included in the API request object when using a LazyDataSource.
-     * For Array and Async data sources, filtering is performed internally by the datasource.
-     * */
-    filter?: TFilter;
+     *
+     * Provides information about the temporary order of the new item.
+     * @param item - new item, temporary order should be got for.
+     * @returns temporary order
+     *
+     * @experimental The API of this feature can be changed in the future releases.
+     */
+    getItemTemporaryOrder?: (item: TItem) => string;
     /**
-     * Sorting value, used to sort data based on it.
-     * Included in the API request object when using a LazyDataSource.
-     * For Array and Async data sources, sorting is performed internally by the datasource.
-     * */
-    sorting?: SortingOption[];
-    /** ID of selected item. It can be only one selected item at the moment. */
-    selectedId?: TId;
-    /** Index of currently focused item */
-    focusedIndex?: number;
-    /** Current page number */
-    page?: number;
-    /** The amount of items per page */
-    pageSize?: number;
+     * Items, which should be added/updated/deleted from the tree.
+     */
+    patch?: IMap<TId, TItem> | IImmutableMap<TId, TItem>;
 
     /**
-     * Provides default folding of nodes if the opposite value is not present in the folded map.
-     * It is used to collapse/expand all nodes.
+     * If enabled, items position is fixed between sorting.
+     * @default true
      */
-    foldAll?: boolean;
+    fixItemBetweenSortings?: boolean;
 }
 
-export const CascadeSelectionTypes = {
-    IMPLICIT: 'implicit',
-    EXPLICIT: 'explicit',
-} as const;
-
-export type CascadeSelection = boolean | typeof CascadeSelectionTypes.EXPLICIT | typeof CascadeSelectionTypes.IMPLICIT;
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export interface BaseListViewProps<TItem, TId, TFilter> {
+export interface BaseDataSourceConfig<TItem, TId, TFilter = any> extends PatchOptions<TItem, TId> {
     /**
      * Should return unique ID of the TItem
      * If omitted, we assume that every TItem has and unique id in its 'id' field.
-     * @param item An item to get ID of
+     * @param item - record, which id should be returned.
+     * @returns item id.
      */
     getId?(item: TItem): TId;
 
@@ -147,6 +179,9 @@ export interface BaseListViewProps<TItem, TId, TFilter> {
      *   to highlight parents with selected children
      * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),
      *   We need to load parents with a separate call (if backend doesn't pre-fetch them)
+     *
+     * @param item - record, which paretnId should be returned.
+     * @returns item parentId.
      */
     getParentId?(item: TItem): TId | undefined;
 
@@ -166,13 +201,16 @@ export interface BaseListViewProps<TItem, TId, TFilter> {
      * See DataRowOptions for more details.
      * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.
      * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance
-     * @param item An item to get options for
+     * @param item - record, configuration should be returned for.
+     * @param index - index of a row. It is optional and should not be expected, that it is provided on every call.
      */
-    getRowOptions?(item: TItem, index: number): DataRowOptions<TItem, TId>;
+    getRowOptions?(item: TItem, index?: number): DataRowOptions<TItem, TId>;
 
     /**
      * Can be specified to unfold all or some items at start.
      * If not specified, all rows would be folded.
+     * @param item - record, folding value should be returned for.
+     * @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented.
      */
     isFoldedByDefault?(item: TItem, state: DataSourceState<TFilter, TId>): boolean;
 
@@ -189,19 +227,99 @@ export interface BaseListViewProps<TItem, TId, TFilter> {
     cascadeSelection?: CascadeSelection;
 
     /**
-     * Enables or disables "select all" checkbox. Default is true.
+     * Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.
+     * @default true
      */
     selectAll?: true | false;
 
     /**
-     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.
-     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.
-     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.
-     * It is required to add blockers/spinners to the components, built on your own.
-     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`.
+     * Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.
+     * If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`.
      */
-    backgroundReload?: boolean;
+    showSelectedOnly?: boolean;
+}
+
+/** Holds state of a components displaying lists - like tables. Holds virtual list position, filter, search, selection, etc. */
+export interface DataSourceState<TFilter = Record<string, any>, TId = any> extends VirtualListState {
+    /**
+     * Search value, used to filter data based on it.
+     * Included in the API request object when using a LazyDataSource.
+     * For Array and Async data sources, searching is performed internally by the datasource.
+     * */
+    search?: string;
+    /** Array of checked items IDs */
+    checked?: TId[];
+    /**
+     * A map of item IDs to their folding state.
+     * If an item ID is present with a `true` value, it's folded; otherwise, it's not folded.
+     * */
+    folded?: Record<string, boolean>;
+    /**
+     * Filter value used to filter data based on it.
+     * Included in the API request object when using a LazyDataSource.
+     * For Array and Async data sources, filtering is performed internally by the datasource.
+     * */
+    filter?: TFilter;
+    /**
+     * Sorting value, used to sort data based on it.
+     * Included in the API request object when using a LazyDataSource.
+     * For Array and Async data sources, sorting is performed internally by the datasource.
+     * */
+    sorting?: SortingOption[];
+    /** ID of selected item. It can be only one selected item at the moment. */
+    selectedId?: TId;
+    /** Index of currently focused item */
+    focusedIndex?: number;
+    /** Current page number */
+    page?: number;
+    /** The amount of items per page */
+    pageSize?: number;
+
+    /**
+     * Provides default folding of nodes if the opposite value is not present in the folded map.
+     * It is used to collapse/expand all nodes.
+     */
+    foldAll?: boolean;
+}
+
+/**
+ * DataSource state update handler.
+ */
+export type SetDataSourceState<TFilter = Record<string, any>, TId = any> = (
+    updateState: (prevState: DataSourceState<TFilter, TId>) => DataSourceState<TFilter, TId>
+) => void;
+
+export const CascadeSelectionTypes = {
+    IMPLICIT: 'implicit',
+    EXPLICIT: 'explicit',
+} as const;
+
+export type CascadeSelection = boolean | typeof CascadeSelectionTypes.EXPLICIT | typeof CascadeSelectionTypes.IMPLICIT;
+
+/**
+ * Type of the position an item to be placed to.
+ */
+export type PositionType = 'initial' | 'top' | 'bottom';
+
+/**
+ * Position an item should be placed to.
+ */
+export type Position<TId> = PositionType | { after: TId };
+
+export type SortedPatchByParentId<TItem, TId> = IMap<
+TId,
+{
+    top: TId[],
+    bottom: TId[],
+    updated: TId[],
+    moved: TId[],
+    withTempOrder: TId[],
+    updatedItemsMap: IMap<TId, TItem>,
+    newItems: TItem[],
 }
+>;
+
+export interface BaseListViewProps<TItem, TId, TFilter> extends BaseDataSourceConfig<TItem, TId, TFilter> {}
 
 export type IDataSourceViewConfig = {
     complexIds?: boolean;
@@ -217,22 +335,10 @@ export type IDataSourceView<TItem, TId, TFilter> = {
     getById(id: TId, index: number): DataRowProps<TItem, TId>;
     getListProps(): DataSourceListProps;
     getVisibleRows(): DataRowProps<TItem, TId>[];
-    getSelectedRows(range?: VirtualListRange): DataRowProps<TItem, TId>[];
     getSelectedRowsCount(): number;
     reload(): void;
-    /**
-     * Activates IDataSourceView.
-     * After view activation, it becomes able to listen to updates.
-     */
-    activate(): void;
-    /**
-     * Deactivates IDataSourceView.
-     * After view deactivation, it becomes impossible to listen to updates.
-     */
-    deactivate(): void;
-    loadData(): void;
     clearAllChecked(): void;
-    _forceUpdate(): void;
+
     selectAll?: ICheckable;
 };
 
diff --git a/uui-core/src/types/objects.ts b/uui-core/src/types/objects.ts
index 064c578a0d..cecfb03513 100644
--- a/uui-core/src/types/objects.ts
+++ b/uui-core/src/types/objects.ts
@@ -25,13 +25,62 @@ export type CX = ClassValue;
 
 export type Icon = React.FC<any>;
 
+/**
+ * Mutable map.
+ */
 export interface IMap<TKey, TValue> {
+    /**
+     * Must implement multiple constructors:
+     * - constructor with empty arguments or initial data (optional);
+     * - constructor, which accepts an argument of IMap<TKey, TValue> type and clones its value (mandatory).
+     */
     constructor: Function;
     [Symbol.iterator](): IterableIterator<[TKey, TValue]>;
-    get(key: TKey): TValue;
-    set(key: TKey, value: TValue): IMap<TKey, TValue>;
-    has(key: TKey): boolean;
+    get(key: TKey): TValue | undefined;
+
+    /**
+     * Should set data to the existing map. This operation is mutable.
+     * @param key - key of a map.
+     * @param value - value, to be set into a map, using the key.
+     */
+    set(key: TKey, value?: TValue): IMap<TKey, TValue>;
+
+    /**
+     * Should delete an element, located in a map by key. This operation is mutable.
+     * @param key
+     */
     delete(key: TKey): boolean;
+    has(key: TKey): boolean;
+    size: number;
+}
+
+/**
+ * Immutable map.
+ */
+export interface IImmutableMap<TKey, TValue> {
+    /**
+     * Must implement multiple constructors:
+     * - constructor with empty arguments or initial data (optional);
+     * - constructor, which accepts an argument of IMap<TKey, TValue> type and clones its value (mandatory).
+     * The example of implementation can be found in 'uui-core/src/data/processing/views/tree/ItemsMap.ts'.
+     */
+    constructor: Function;
+    [Symbol.iterator](): IterableIterator<[TKey, TValue]>;
+    get(key: TKey): TValue | undefined;
+
+    /**
+     * Should return cloned map with new value in it. This operation is immutable.
+     * @param key - key of a map.
+     * @param value - value, to be set into a map, using the key.
+     */
+    set(key: TKey, value?: TValue): IImmutableMap<TKey, TValue>;
+
+    /**
+     * Should return a cloned map, without data, located by the key. This operation is immutable.
+     * @param key
+     */
+    delete(key: TKey): IImmutableMap<TKey, TValue>;
+    has(key: TKey): boolean;
     size: number;
 }
 
diff --git a/uui-core/src/types/pickers.ts b/uui-core/src/types/pickers.ts
index 91dd6ed7f0..a0cd929ee0 100644
--- a/uui-core/src/types/pickers.ts
+++ b/uui-core/src/types/pickers.ts
@@ -110,7 +110,21 @@ export type PickerFooterProps<TItem, TId> = {
     disableClear?: boolean;
 };
 
-export type PickerBaseProps<TItem, TId> = PickerBaseOptions<TItem, TId> & PickerBindingProps<TItem, TId> & IAnalyticableOnChange<any>;
+/**
+ * Show selected rows only in Picker.
+ */
+export interface PickerShowSelectedOnly {
+    /**
+     * Enables/disables selected rows only in Picker.
+     */
+    showSelectedOnly?: boolean;
+}
+
+export type PickerBaseProps<TItem, TId> =
+PickerBaseOptions<TItem, TId>
+& PickerBindingProps<TItem, TId>
+& IAnalyticableOnChange<any>
+& PickerShowSelectedOnly;
 
 /**
  * Component can be used as Toggler control for pickers.
diff --git a/uui-core/src/types/tables.ts b/uui-core/src/types/tables.ts
index 0acbd0ac33..820b3a8b32 100644
--- a/uui-core/src/types/tables.ts
+++ b/uui-core/src/types/tables.ts
@@ -1,4 +1,4 @@
-import React, { Attributes, ForwardedRef, ReactNode } from 'react';
+import React, { Attributes, Dispatch, ForwardedRef, ReactNode, SetStateAction } from 'react';
 import {
     IEditable, ICheckable, IHasCX, IClickable, IHasRawProps, ICanBeInvalid, ICanFocus, IDropdownBodyProps,
     IDropdownToggler, IHasValidationMessage,
@@ -414,7 +414,7 @@ export interface ITableState<TFilter = Record<string, any>, TViewState = any> ex
     /** Table state value */
     tableState: DataTableState<TFilter, TViewState>;
     /** Function that updates table state value */
-    setTableState(newState: DataTableState<TFilter, TViewState>): void;
+    setTableState: Dispatch<SetStateAction<DataTableState<TFilter, TViewState>>>;
     /** Function that updates filter value */
     setFilter(filter: TFilter): void;
     /** Function that updates columns config value */
diff --git a/uui-core/src/types/validation.ts b/uui-core/src/types/validation.ts
index 3fecb5a5c7..35b3889a2a 100644
--- a/uui-core/src/types/validation.ts
+++ b/uui-core/src/types/validation.ts
@@ -1,10 +1,15 @@
+import { IImmutableMap, IMap } from './objects';
 import { ICanBeReadonly, ICanBeRequired, IDisableable } from './props';
 
 type ElementType<ArrayOrObject> = ArrayOrObject extends readonly (infer ArrayType)[]
     ? ArrayType
-    : ArrayOrObject extends Record<any, infer ValueType>
+    : ArrayOrObject extends IMap<any, infer ValueType>
         ? ValueType
-        : never;
+        : ArrayOrObject extends IImmutableMap<any, infer ValueType>
+            ? ValueType
+            : ArrayOrObject extends Record<any, infer ValueType>
+                ? ValueType
+                : never;
 
 export interface Metadata<T> extends IDisableable, ICanBeReadonly, ICanBeRequired {
     /** Metadata for the nested fields */
diff --git a/uui-docs/src/dataSources/DataSourceTableViewer.tsx b/uui-docs/src/dataSources/DataSourceTableViewer.tsx
index da0cb252a4..442bba5617 100644
--- a/uui-docs/src/dataSources/DataSourceTableViewer.tsx
+++ b/uui-docs/src/dataSources/DataSourceTableViewer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-    DataColumnProps, DataTableState, IDataSource, IEditable,
+    DataColumnProps, DataSourceState, DataTableState, IDataSource, IEditable,
 } from '@epam/uui-core';
 import { DataTable, Panel, Text } from '@epam/promo';
 import css from './DataSourceTableViewer.module.scss';
@@ -11,6 +11,7 @@ interface Props<TItem, TId> extends IEditable<DataTableState> {
     getName?: (item: TItem) => string;
     columns: DataColumnProps<TItem>[];
     dataSource: IDataSource<TItem, TId, any>;
+    onValueChange: React.Dispatch<React.SetStateAction<DataSourceState<any, TId>>>;
 }
 
 export function DataSourceTableViewer<TItem, TId>(props: Props<TItem, TId>) {
diff --git a/uui-docs/src/dataSources/DataSourceViewer.tsx b/uui-docs/src/dataSources/DataSourceViewer.tsx
index 9914d5881e..99b4bcb6c5 100644
--- a/uui-docs/src/dataSources/DataSourceViewer.tsx
+++ b/uui-docs/src/dataSources/DataSourceViewer.tsx
@@ -9,6 +9,7 @@ interface Props<TItem, TId> extends IEditable<DataSourceState> {
     selectAll?: boolean;
     getName?: (item: TItem) => string;
     dataSource: IDataSource<TItem, TId, any>;
+    onValueChange: React.Dispatch<React.SetStateAction<DataSourceState<any, TId>>>;
 }
 
 export function DataSourceViewer<TItem, TId>(props: Props<TItem, TId>) {
diff --git a/uui-docs/src/demoApi/index.tsx b/uui-docs/src/demoApi/index.tsx
index e16da9b606..1fd509785e 100644
--- a/uui-docs/src/demoApi/index.tsx
+++ b/uui-docs/src/demoApi/index.tsx
@@ -33,12 +33,14 @@ export function getDemoApi(processRequest: (request: string, requestMethod: stri
         managers: lazyApi<models.Manager, string>('managers'),
         persons: lazyApi<models.Person, number>('persons'),
         personsPaged: (rq: LazyDataSourceApiRequest<models.Person, number, DataQueryFilter<models.Person>> & { page: number; pageSize: number }) =>
-            processRequest(origin.concat('/api/persons-paged'), 'POST', rq),
+            processRequest(origin.concat('/api/persons-paged'), 'POST', rq) as Promise<LazyDataSourceApiResponse<models.Person>>,
         personGroups,
         departments: lazyApi<models.Department, number>('departments'),
         jobTitles: lazyApi<models.JobTitle, number>('jobTitles'),
         schedules: () => processRequest(origin.concat('/api/schedules'), 'POST') as Promise<models.PersonSchedule[]>,
         personDetails: personDetailsApi,
+        todos: () => processRequest(origin.concat('/api/todos'), 'POST') as Promise<models.TodoTask[]>,
+        projectTasks: lazyApi<models.ProjectTask, number>('projectTasks'),
     };
 }
 
diff --git a/uui-docs/src/demoData/index.tsx b/uui-docs/src/demoData/index.tsx
index f10440bad0..d6516b016e 100644
--- a/uui-docs/src/demoData/index.tsx
+++ b/uui-docs/src/demoData/index.tsx
@@ -8,6 +8,7 @@ import { slateInitialValue } from './slateInitialValue';
 import { slateSerializationInitialData } from './slateSerializationInitialData';
 import { slateMdSerializationInitialData } from './slateMdSerializationInitialData';
 import { workloadItems } from './workload';
+import { locations } from './locationsData';
 
 export const demoData = {
     featureClasses,
@@ -20,4 +21,5 @@ export const demoData = {
     slateSerializationInitialData,
     slateMdSerializationInitialData,
     workloadItems,
+    locations,
 };
diff --git a/uui-docs/src/demoData/locationsData.ts b/uui-docs/src/demoData/locationsData.ts
new file mode 100644
index 0000000000..3123729e34
--- /dev/null
+++ b/uui-docs/src/demoData/locationsData.ts
@@ -0,0 +1,955 @@
+import { Location } from '../models';
+
+export const locations: Omit<Location, 'children'>[] = [
+    {
+        id: 'c-AF',
+        type: 'continent',
+        name: 'Africa',
+        parentId: null,
+        __typename: 'Location',
+        childCount: 3,
+    },
+    {
+        id: 'DZ',
+        name: 'Algeria',
+        type: 'country',
+        parentId: 'c-AF',
+        __typename: 'Location',
+        childCount: 10,
+    },
+    {
+        id: '2413920',
+        name: 'Bakau',
+        asciiname: 'Bakau',
+        lat: '13.47806',
+        lon: '-16.68194',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GM',
+        altCountry: '',
+        adminCode: '01',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '43098',
+        elevation: '',
+        dem: '22',
+        tz: 'Africa/Banjul',
+        lastModified: '2012-01-18',
+        countryName: 'Gambia',
+        type: 'city',
+        parentId: 'GM',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2413876',
+        name: 'Banjul',
+        asciiname: 'Banjul',
+        lat: '13.45274',
+        lon: '-16.57803',
+        featureClass: 'P',
+        featureCode: 'PPLC',
+        country: 'GM',
+        altCountry: '',
+        adminCode: '01',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '34589',
+        elevation: '',
+        dem: '5',
+        tz: 'Africa/Banjul',
+        lastModified: '2015-11-01',
+        countryName: 'Gambia',
+        type: 'city',
+        parentId: 'GM',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: 'BJ',
+        name: 'Benin',
+        type: 'country',
+        parentId: 'c-AF',
+        __typename: 'Location',
+        childCount: 10,
+    },
+    {
+        id: '2474141',
+        name: 'Boumerdas',
+        asciiname: 'Boumerdas',
+        lat: '36.76639',
+        lon: '3.47717',
+        featureClass: 'P',
+        featureCode: 'PPLA',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '40',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '786499',
+        elevation: '',
+        dem: '5',
+        tz: 'Africa/Algiers',
+        lastModified: '2012-01-14',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2413753',
+        name: 'Brikama',
+        asciiname: 'Brikama',
+        lat: '13.27136',
+        lon: '-16.64944',
+        featureClass: 'P',
+        featureCode: 'PPLA',
+        country: 'GM',
+        altCountry: '',
+        adminCode: '05',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '77700',
+        elevation: '',
+        dem: '24',
+        tz: 'Africa/Banjul',
+        lastModified: '2011-02-02',
+        countryName: 'Gambia',
+        type: 'city',
+        parentId: 'GM',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: 'c-EU',
+        type: 'continent',
+        name: 'Europe',
+        parentId: null,
+        __typename: 'Location',
+        childCount: 1,
+    },
+    {
+        id: '2413515',
+        name: 'Farafenni',
+        asciiname: 'Farafenni',
+        lat: '13.56667',
+        lon: '-15.6',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GM',
+        altCountry: '',
+        adminCode: '07',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '29867',
+        elevation: '',
+        dem: '15',
+        tz: 'Africa/Banjul',
+        lastModified: '2012-01-18',
+        countryName: 'Gambia',
+        type: 'city',
+        parentId: 'GM',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: 'GM',
+        name: 'Gambia',
+        type: 'country',
+        parentId: 'c-AF',
+        __typename: 'Location',
+        childCount: 6,
+    },
+    {
+        id: '2412749',
+        name: 'Lamin',
+        asciiname: 'Lamin',
+        alternativeNames: [
+            '',
+        ],
+        lat: '13.35222',
+        lon: '-16.43389',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GM',
+        altCountry: '',
+        adminCode: '07',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '24797',
+        elevation: '',
+        dem: '15',
+        tz: 'Africa/Banjul',
+        lastModified: '2006-01-17',
+        countryName: 'Gambia',
+        type: 'city',
+        parentId: 'GM',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2392505',
+        name: 'Nikki',
+        asciiname: 'Nikki',
+        lat: '9.94009',
+        lon: '3.21075',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '10',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '54009',
+        elevation: '',
+        dem: '403',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2012-01-18',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2392308',
+        name: 'Ouidah',
+        asciiname: 'Ouidah',
+        lat: '6.36307',
+        lon: '2.08506',
+        featureClass: 'P',
+        featureCode: 'PPLA',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '09',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '83503',
+        elevation: '',
+        dem: '17',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2012-01-18',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2392204',
+        name: 'Parakou',
+        asciiname: 'Parakou',
+        lat: '9.33716',
+        lon: '2.63031',
+        featureClass: 'P',
+        featureCode: 'PPLA',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '10',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '163753',
+        elevation: '',
+        dem: '369',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2012-01-18',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2392108',
+        name: 'Pobé',
+        asciiname: 'Pobe',
+        lat: '6.98008',
+        lon: '2.6649',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '17',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '32983',
+        elevation: '',
+        dem: '136',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2012-10-18',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2392087',
+        name: 'Porto-Novo',
+        asciiname: 'Porto-Novo',
+        lat: '6.49646',
+        lon: '2.60359',
+        featureClass: 'P',
+        featureCode: 'PPLC',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '16',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '234168',
+        elevation: '',
+        dem: '20',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2011-03-04',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2392009',
+        name: 'Sakété',
+        asciiname: 'Sakete',
+        lat: '6.73618',
+        lon: '2.65866',
+        featureClass: 'P',
+        featureCode: 'PPLA',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '17',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '30111',
+        elevation: '',
+        dem: '80',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2012-01-18',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2391895',
+        name: 'Savalou',
+        asciiname: 'Savalou',
+        lat: '7.92807',
+        lon: '1.97558',
+        featureClass: 'P',
+        featureCode: 'PPLA',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '11',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '30187',
+        elevation: '',
+        dem: '181',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2012-01-18',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2391893',
+        name: 'Savé',
+        asciiname: 'Save',
+        lat: '8.03424',
+        lon: '2.4866',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '11',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '75970',
+        elevation: '',
+        dem: '190',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2013-05-18',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2411880',
+        name: 'Sukuta',
+        asciiname: 'Sukuta',
+        lat: '13.41033',
+        lon: '-16.70815',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GM',
+        altCountry: '',
+        adminCode: '05',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '15131',
+        elevation: '',
+        dem: '27',
+        tz: 'Africa/Banjul',
+        lastModified: '2011-02-02',
+        countryName: 'Gambia',
+        type: 'city',
+        parentId: 'GM',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2391455',
+        name: 'Tanguiéta',
+        asciiname: 'Tanguieta',
+        lat: '10.62118',
+        lon: '1.26651',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '08',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '19833',
+        elevation: '',
+        dem: '242',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2012-01-18',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2391377',
+        name: 'Tchaourou',
+        asciiname: 'Tchaourou',
+        lat: '8.88649',
+        lon: '2.59753',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'BJ',
+        altCountry: '',
+        adminCode: '10',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '20971',
+        elevation: '',
+        dem: '332',
+        tz: 'Africa/Porto-Novo',
+        lastModified: '2012-10-18',
+        countryName: 'Benin',
+        type: 'city',
+        parentId: 'BJ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2475744',
+        name: 'Tizi Ouzou',
+        asciiname: 'Tizi Ouzou',
+        lat: '36.71182',
+        lon: '4.04591',
+        featureClass: 'P',
+        featureCode: 'PPLA',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '14',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '144000',
+        elevation: '',
+        dem: '206',
+        tz: 'Africa/Algiers',
+        lastModified: '2013-08-04',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2475740',
+        name: 'Tizi Rached',
+        asciiname: 'Tizi Rached',
+        lat: '36.67176',
+        lon: '4.19176',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '14',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '17872',
+        elevation: '',
+        dem: '405',
+        tz: 'Africa/Algiers',
+        lastModified: '2012-01-19',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2475752',
+        name: 'Tizi-n-Tleta',
+        asciiname: 'Tizi-n-Tleta',
+        lat: '36.54569',
+        lon: '4.05712',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '14',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '22404',
+        elevation: '',
+        dem: '483',
+        tz: 'Africa/Algiers',
+        lastModified: '2011-04-19',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2475687',
+        name: 'Tlemcen',
+        asciiname: 'Tlemcen',
+        lat: '34.87833',
+        lon: '-1.315',
+        featureClass: 'P',
+        featureCode: 'PPLA',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '15',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '132341',
+        elevation: '',
+        dem: '811',
+        tz: 'Africa/Algiers',
+        lastModified: '2012-01-19',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2475612',
+        name: 'Tolga',
+        asciiname: 'Tolga',
+        lat: '34.72224',
+        lon: '5.37845',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '19',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '68246',
+        elevation: '',
+        dem: '161',
+        tz: 'Africa/Algiers',
+        lastModified: '2012-01-19',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2475475',
+        name: 'Touggourt',
+        asciiname: 'Touggourt',
+        lat: '33.10527',
+        lon: '6.05796',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '50',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '49044',
+        elevation: '',
+        dem: '72',
+        tz: 'Africa/Algiers',
+        lastModified: '2012-01-19',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: 'GB',
+        name: 'United Kingdom',
+        type: 'country',
+        parentId: 'c-EU',
+        __typename: 'Location',
+        childCount: 10,
+    },
+    {
+        id: '2633655',
+        name: 'Woodford Green',
+        asciiname: 'Woodford Green',
+        lat: '51.60938',
+        lon: '0.02329',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'ENG',
+        countrySubdivision: 'GLA',
+        municipality: 'K8',
+        municipalitySubdivision: '',
+        population: '22803',
+        elevation: '',
+        dem: '62',
+        tz: 'Europe/London',
+        lastModified: '2012-05-18',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2633563',
+        name: 'Worcester',
+        asciiname: 'Worcester',
+        lat: '52.18935',
+        lon: '-2.22001',
+        featureClass: 'P',
+        featureCode: 'PPLA2',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'ENG',
+        countrySubdivision: 'Q4',
+        municipality: '47UE',
+        municipalitySubdivision: '',
+        population: '100023',
+        elevation: '',
+        dem: '29',
+        tz: 'Europe/London',
+        lastModified: '2016-10-30',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2633553',
+        name: 'Workington',
+        asciiname: 'Workington',
+        lat: '54.6425',
+        lon: '-3.54413',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'ENG',
+        countrySubdivision: 'C9',
+        municipality: '16UB',
+        municipalitySubdivision: '',
+        population: '20618',
+        elevation: '',
+        dem: '20',
+        tz: 'Europe/London',
+        lastModified: '2011-03-03',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2633551',
+        name: 'Worksop',
+        asciiname: 'Worksop',
+        lat: '53.30182',
+        lon: '-1.12404',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'ENG',
+        countrySubdivision: 'J9',
+        municipality: '37UC',
+        municipalitySubdivision: '',
+        population: '40443',
+        elevation: '',
+        dem: '46',
+        tz: 'Europe/London',
+        lastModified: '2011-03-03',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2633521',
+        name: 'Worthing',
+        asciiname: 'Worthing',
+        lat: '50.81795',
+        lon: '-0.37538',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'ENG',
+        countrySubdivision: 'P6',
+        municipality: '45UH',
+        municipalitySubdivision: '',
+        population: '99110',
+        elevation: '',
+        dem: '7',
+        tz: 'Europe/London',
+        lastModified: '2014-09-14',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2633485',
+        name: 'Wrexham',
+        asciiname: 'Wrexham',
+        lat: '53.04664',
+        lon: '-2.99132',
+        featureClass: 'P',
+        featureCode: 'PPLA2',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'WLS',
+        countrySubdivision: 'Z4',
+        municipality: '00NL007',
+        municipalitySubdivision: '',
+        population: '43649',
+        elevation: '',
+        dem: '87',
+        tz: 'Europe/London',
+        lastModified: '2011-03-03',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2633406',
+        name: 'Yate',
+        asciiname: 'Yate',
+        lat: '51.54074',
+        lon: '-2.41839',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'ENG',
+        countrySubdivision: 'M6',
+        municipality: '00HD044',
+        municipalitySubdivision: '',
+        population: '21789',
+        elevation: '',
+        dem: '80',
+        tz: 'Europe/London',
+        lastModified: '2012-03-26',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2633397',
+        name: 'Yeadon',
+        asciiname: 'Yeadon',
+        lat: '53.86437',
+        lon: '-1.68743',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'ENG',
+        countrySubdivision: 'H3',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '37379',
+        elevation: '',
+        dem: '165',
+        tz: 'Europe/London',
+        lastModified: '2013-07-11',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2633373',
+        name: 'Yeovil',
+        asciiname: 'Yeovil',
+        lat: '50.94159',
+        lon: '-2.63211',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'ENG',
+        countrySubdivision: 'M3',
+        municipality: '40UD',
+        municipalitySubdivision: '',
+        population: '43733',
+        elevation: '',
+        dem: '55',
+        tz: 'Europe/London',
+        lastModified: '2011-03-03',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2633352',
+        name: 'York',
+        asciiname: 'York',
+        lat: '53.95763',
+        lon: '-1.08271',
+        featureClass: 'P',
+        featureCode: 'PPLA2',
+        country: 'GB',
+        altCountry: '',
+        adminCode: 'ENG',
+        countrySubdivision: 'Q5',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '144202',
+        elevation: '',
+        dem: '17',
+        tz: 'Europe/London',
+        lastModified: '2012-03-30',
+        countryName: 'United Kingdom',
+        type: 'city',
+        parentId: 'GB',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2474638',
+        name: 'Zemoura',
+        asciiname: 'Zemoura',
+        lat: '35.72251',
+        lon: '0.75509',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '51',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '21770',
+        elevation: '',
+        dem: '288',
+        tz: 'Africa/Algiers',
+        lastModified: '2012-01-19',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2474583',
+        name: 'Zeralda',
+        asciiname: 'Zeralda',
+        lat: '36.71169',
+        lon: '2.84244',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '55',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '17563',
+        elevation: '',
+        dem: '30',
+        tz: 'Africa/Algiers',
+        lastModified: '2012-05-06',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+    {
+        id: '2474506',
+        name: 'Zeribet el Oued',
+        asciiname: 'Zeribet el Oued',
+        lat: '34.68284',
+        lon: '6.51109',
+        featureClass: 'P',
+        featureCode: 'PPL',
+        country: 'DZ',
+        altCountry: '',
+        adminCode: '19',
+        countrySubdivision: '',
+        municipality: '',
+        municipalitySubdivision: '',
+        population: '23187',
+        elevation: '',
+        dem: '47',
+        tz: 'Africa/Algiers',
+        lastModified: '2012-01-19',
+        countryName: 'Algeria',
+        type: 'city',
+        parentId: 'DZ',
+        __typename: 'Location',
+        childCount: 0,
+    },
+];
diff --git a/uui-docs/src/models/index.ts b/uui-docs/src/models/index.ts
index d810e3d4f3..fb072df205 100644
--- a/uui-docs/src/models/index.ts
+++ b/uui-docs/src/models/index.ts
@@ -280,3 +280,31 @@ export interface PersonDetails {
     rating?: number;
     attachments?: ({ progress?: number } & FileUploadResponse)[];
 }
+
+export interface TodoTask {
+    id: number;
+    isDone?: boolean;
+    name?: string;
+    priority?: number;
+    dueDate?: string;
+    comments?: string;
+    isDeleted?: boolean;
+    isNew?: boolean;
+}
+
+export interface ProjectTask {
+    id: number;
+    parentId?: number;
+    name: string;
+    estimate?: number;
+    resources?: number[];
+    startDate?: string;
+    dueDate?: string;
+    status?: string;
+    description?: string;
+    order?: string;
+    isNew?: boolean;
+    isDeleted?: boolean;
+    childCount?: number;
+    tempOrder?: string;
+}
diff --git a/uui/components/filters/FiltersPanel.tsx b/uui/components/filters/FiltersPanel.tsx
index ce55164e37..bff0b49652 100644
--- a/uui/components/filters/FiltersPanel.tsx
+++ b/uui/components/filters/FiltersPanel.tsx
@@ -168,9 +168,11 @@ function FiltersToolbarImpl<TFilter extends object>(props: FiltersPanelProps<TFi
     const isAllFiltersAlwaysVisible = props.filters.every((i) => i.isAlwaysVisible);
 
     useEffect(() => {
-        // Reset new filter id, after first render with autofocus
-        setNewFilterId(null);
-    }, [newFilterId]);
+        if (sortedActiveFilters.length && newFilterId && sortedActiveFilters.find(({ field }) => field === newFilterId)) {
+            // Reset new filter id, after first render with autofocus
+            setNewFilterId(null);
+        }
+    }, [newFilterId, sortedActiveFilters]);
 
     return (
         <>
diff --git a/uui/components/filters/FiltersPanelItem.tsx b/uui/components/filters/FiltersPanelItem.tsx
index 7ac9eca0cf..9c065e53cc 100644
--- a/uui/components/filters/FiltersPanelItem.tsx
+++ b/uui/components/filters/FiltersPanelItem.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import dayjs from 'dayjs';
 import cx from 'classnames';
 import { Modifier } from 'react-popper';
-import { DropdownBodyProps, TableFiltersConfig, IDropdownToggler, IEditable, isMobile, useForceUpdate, FilterPredicateName, getSeparatedValue, DataRowProps, PickerFilterConfig } from '@epam/uui-core';
+import { DropdownBodyProps, TableFiltersConfig, IDropdownToggler, IEditable, isMobile, FilterPredicateName, getSeparatedValue, DataRowProps, PickerFilterConfig, useForceUpdate } from '@epam/uui-core';
 import { Dropdown } from '@epam/uui-components';
 import { i18n } from '../../i18n';
 import { FilterPanelItemToggler } from './FilterPanelItemToggler';
@@ -23,11 +23,21 @@ IEditable<any> & {
     size?: '24' | '30' | '36' | '42' | '48';
 };
 
+function useView(props: FiltersToolbarItemProps) {
+    const forceUpdate = useForceUpdate();
+
+    let useViewFn;
+    if (props.type === 'singlePicker' || props.type === 'multiPicker') {
+        useViewFn = props.dataSource.useView.bind(props.dataSource);
+    }
+    
+    return useViewFn?.({}, forceUpdate);
+}
+
 function FiltersToolbarItemImpl(props: FiltersToolbarItemProps) {
     const { maxCount = 2 } = props;
     const isPickersType = props?.type === 'multiPicker' || props?.type === 'singlePicker';
     const isMobileScreen = isMobile();
-
     const popperModifiers: Modifier<any>[] = useMemo(() => {
         const modifiers: Modifier<any>[] = [
             {
@@ -61,7 +71,6 @@ function FiltersToolbarItemImpl(props: FiltersToolbarItemProps) {
     const [isOpen, isOpenChange] = useState(props.autoFocus);
     const [predicate, setPredicate] = useState(getDefaultPredicate());
     const predicateName: string = React.useMemo(() => predicate && props.predicates.find((p) => p.predicate === predicate).name, [predicate]);
-    const forceUpdate = useForceUpdate();
 
     useEffect(() => {
         if (props.predicates && Object.keys(props.value || {})[0] && Object.keys(props.value || {})[0] !== predicate) {
@@ -170,19 +179,19 @@ function FiltersToolbarItemImpl(props: FiltersToolbarItemProps) {
         return config.getName ? config.getName(item.value) : item.value.name;
     };
 
+    const view = useView(props);
+
     const getTogglerValue = () => {
         const currentValue = getValue();
         const defaultFormat = 'MMM DD, YYYY';
 
         switch (props.type) {
             case 'multiPicker': {
-                const view = props.dataSource.getView({}, forceUpdate);
                 let isLoading = false;
-
                 const selection = currentValue
                     ? currentValue?.slice(0, maxCount).map((i: any) => {
                         const item = view.getById(i, null);
-                        isLoading = item.isLoading;
+                        isLoading = item?.isLoading;
                         return getPickerItemName(item, props);
                     })
                     : currentValue;
@@ -204,7 +213,6 @@ function FiltersToolbarItemImpl(props: FiltersToolbarItemProps) {
                 return { selection: [selection] };
             }
             case 'singlePicker': {
-                const view = props.dataSource.getView({}, forceUpdate);
                 if (currentValue === null || currentValue === undefined) {
                     return { selection: undefined };
                 }
diff --git a/uui/components/layout/__tests__/__snapshots__/Blocker.test.tsx.snap b/uui/components/layout/__tests__/__snapshots__/Blocker.test.tsx.snap
index 0c0c0e8184..9dd40b6c3e 100644
--- a/uui/components/layout/__tests__/__snapshots__/Blocker.test.tsx.snap
+++ b/uui/components/layout/__tests__/__snapshots__/Blocker.test.tsx.snap
@@ -11,7 +11,9 @@ exports[`Blocker should be rendered correctly 1`] = `
 >
   <div>
     <div
+      aria-label="Loading"
       className="uui-blocker"
+      role="alert"
     >
       <div
         className="container uui-spinner-container root uui-spinner"
diff --git a/uui/components/pickers/PickerList.tsx b/uui/components/pickers/PickerList.tsx
index c9b62daaf7..075585e52d 100644
--- a/uui/components/pickers/PickerList.tsx
+++ b/uui/components/pickers/PickerList.tsx
@@ -20,6 +20,7 @@ export function PickerList<TItem, TId>(props: PickerListProps<TItem, TId>) {
     const {
         context,
         view,
+        onlySelectedView,
         getName,
         getEntityName,
         appendLastSelected,
@@ -56,7 +57,7 @@ export function PickerList<TItem, TId>(props: PickerListProps<TItem, TId>) {
     const defaultRenderToggler = (props: IClickable) => <LinkButton caption="Show all" { ...props } />;
 
     const viewProps = view.getListProps();
-    const selectedRows = view.getSelectedRows();
+    const selectedRows = onlySelectedView.getVisibleRows();
     const rows = buildRowsList();
     const showPicker = viewProps.totalCount == null || viewProps.totalCount > getMaxDefaultItems();
     const renderToggler = props.renderModalToggler || defaultRenderToggler;
diff --git a/uui/components/pickers/PickerModal.tsx b/uui/components/pickers/PickerModal.tsx
index 35761da585..d0bbea13af 100644
--- a/uui/components/pickers/PickerModal.tsx
+++ b/uui/components/pickers/PickerModal.tsx
@@ -78,7 +78,6 @@ export function PickerModal<TItem, TId>(props: PickerModalProps<TItem, TId>) {
         const hasSelection = view.getSelectedRowsCount() > 0;
         const rowsCount = view.getListProps().rowsCount;
         const isEmptyRowsAndHasNoSelection = (rowsCount === 0 && !hasSelection);
-
         return (
             <>
                 {view.selectAll && (
diff --git a/uui/components/pickers/__tests__/DataPickerBody.test.tsx b/uui/components/pickers/__tests__/DataPickerBody.test.tsx
index 81f0bc19ab..2450a7687d 100644
--- a/uui/components/pickers/__tests__/DataPickerBody.test.tsx
+++ b/uui/components/pickers/__tests__/DataPickerBody.test.tsx
@@ -49,7 +49,14 @@ describe('DataPickerBody', () => {
                 maxHeight={ 800 }
                 searchSize="48"
                 rows={ rows.map((props) => (
-                    <DataPickerRow key={ props.id } renderItem={ (item: string) => <div>{item}</div> } id={ props.id } rowKey={ props.rowKey } index={ props.id } value="" />
+                    <DataPickerRow
+                        key={ props.id }
+                        renderItem={ (item: string) => <div>{item}</div> }
+                        id={ props.id }
+                        rowKey={ props.rowKey }
+                        index={ props.id }
+                        value={ props.value?.level }
+                    />
                 )) }
                 onKeyDown={ jest.fn }
                 rowsCount={ 7 }
diff --git a/uui/components/pickers/__tests__/PickerInput.test.tsx b/uui/components/pickers/__tests__/PickerInput.test.tsx
index 017791acda..7e537e9c77 100644
--- a/uui/components/pickers/__tests__/PickerInput.test.tsx
+++ b/uui/components/pickers/__tests__/PickerInput.test.tsx
@@ -7,7 +7,7 @@ import { Modals, PickerToggler } from '@epam/uui-components';
 import { DataPickerRow, FlexCell, PickerItem, Text, Button } from '../../';
 import { PickerInput, PickerInputProps } from '../PickerInput';
 import { IHasEditMode } from '../../types';
-import { TestItemType, mockDataSource, mockDataSourceAsync, mockSmallDataSourceAsync, mockTreeLikeDataSourceAsync } from './mocks';
+import { Item, TestItemType, TestTreeItem, mockDataSource, mockDataSourceAsync, mockSmallDataSourceAsync, mockTreeLikeDataSourceAsync } from './mocks';
 
 type PickerInputComponentProps<TItem, TId> = PickerInputProps<TItem, TId>;
 
@@ -16,7 +16,14 @@ async function setupPickerInputForTest<TItem = TestItemType, TId = number>(param
         (context): PickerInputComponentProps<TItem, TId> => {
             if (params.selectionMode === 'single') {
                 return Object.assign({
-                    onValueChange: jest.fn().mockImplementation((newValue) => context.current?.setProperty('value', newValue)),
+                    onValueChange: jest.fn().mockImplementation((newValue) => {
+                        if (typeof newValue === 'function') {
+                            const v = newValue(params.value);
+                            context.current?.setProperty('value', v);
+                            return;
+                        }
+                        context.current?.setProperty('value', newValue);
+                    }),
                     dataSource: mockDataSourceAsync,
                     disableClear: false,
                     searchPosition: 'input',
@@ -28,7 +35,14 @@ async function setupPickerInputForTest<TItem = TestItemType, TId = number>(param
             }
 
             return Object.assign({
-                onValueChange: jest.fn().mockImplementation((newValue) => context.current?.setProperty('value', newValue)),
+                onValueChange: jest.fn().mockImplementation((newValue) => {
+                    if (typeof newValue === 'function') {
+                        const v = newValue(params.value);
+                        context.current?.setProperty('value', v);
+                        return;
+                    }
+                    context.current?.setProperty('value', newValue);
+                }),
                 dataSource: mockDataSourceAsync,
                 disableClear: false,
                 searchPosition: 'input',
@@ -92,7 +106,7 @@ describe('PickerInput', () => {
     });
 
     it('should open body', async () => {
-        const { dom, result } = await setupPickerInputForTest({
+        const { dom, result } = await setupPickerInputForTest<Item, number>({
             value: undefined,
             selectionMode: 'single',
             dataSource: mockSmallDataSourceAsync,
@@ -117,13 +131,18 @@ describe('PickerInput', () => {
             expect(screen.getByRole('dialog')).toBeInTheDocument();
             const optionC2 = await screen.findByText('C2');
             fireEvent.click(optionC2);
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(12);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith(12);
+            });
+
             fireEvent.click(window.document.body);
             expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
             expect(screen.getByPlaceholderText('C2')).toBeInTheDocument();
             const clear = screen.getByRole('button');
             fireEvent.click(clear);
-            expect(screen.queryByText('C2')).not.toBeInTheDocument();
+            await waitFor(() => {
+                expect(screen.queryByText('C2')).not.toBeInTheDocument();
+            });
         });
 
         it('[valueType entity] should select & clear option', async () => {
@@ -134,16 +153,26 @@ describe('PickerInput', () => {
             });
             expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
             fireEvent.click(dom.input);
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
+            await waitFor(() => {
+                expect(screen.getByRole('dialog')).toBeInTheDocument();
+            });
+
             const optionC2 = await screen.findByText('C2');
             fireEvent.click(optionC2);
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith({ id: 12, level: 'C2', name: 'Proficiency' });
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith({ id: 12, level: 'C2', name: 'Proficiency' });
+            });
             fireEvent.click(window.document.body);
             expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-            expect(screen.getByPlaceholderText('C2')).toBeInTheDocument();
+            await waitFor(() => {
+                expect(screen.getByPlaceholderText('C2')).toBeInTheDocument();
+            });
+
             const clear = screen.getByRole('button');
             fireEvent.click(clear);
-            expect(screen.queryByText('C2')).not.toBeInTheDocument();
+            await waitFor(() => {
+                expect(screen.queryByText('C2')).not.toBeInTheDocument();
+            });
         });
 
         it('should render names of items by getName', async () => {
@@ -153,14 +182,16 @@ describe('PickerInput', () => {
                 getName: ({ name }) => name,
             });
 
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toBeUndefined();
             await waitFor(async () => expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Elementary+'));
 
             fireEvent.click(dom.input);
             expect(screen.getByRole('dialog')).toBeInTheDocument();
+
             const optionC2 = await screen.findByText('Proficiency');
             fireEvent.click(optionC2);
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(12);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith(12);
+            });
         });
 
         it('should render entity name in placeholder', async () => {
@@ -188,7 +219,7 @@ describe('PickerInput', () => {
             [[false], [true], ['implicit'], ['explicit']],
         )
         ('should pick single element with cascadeSelection = %s', async (cascadeSelection) => {
-            const { mocks, dom } = await setupPickerInputForTest({
+            const { mocks, dom } = await setupPickerInputForTest<TestTreeItem, number>({
                 value: undefined,
                 getName: ({ name }) => name,
                 selectionMode: 'single',
@@ -201,7 +232,11 @@ describe('PickerInput', () => {
 
             // Check parent
             await PickerInputTestObject.clickOptionByText('Parent 2');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(2);
+            
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith(2);
+            });
+
             expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Parent 2');
         });
 
@@ -220,7 +255,10 @@ describe('PickerInput', () => {
             await PickerInputTestObject.clickOptionByText('A1');
             fireEvent.click(dom.input);
             await PickerInputTestObject.clickOptionByText('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(3);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith(3);
+            });
+
             expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('A1+');
         });
 
@@ -236,9 +274,14 @@ describe('PickerInput', () => {
             const clearButton = within(dom.container).getByRole('button', { name: 'Clear' });
             expect(clearButton).toBeInTheDocument();
             fireEvent.click(clearButton);
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
+            await waitFor(() => {
+                expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
+            });
+
             setProps({ disableClear: true, value: 2 });
-            expect(within(dom.container).queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument();
+            await waitFor(() => {
+                expect(within(dom.container).queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument();
+            });
             expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('A1');
         });
 
@@ -257,7 +300,9 @@ describe('PickerInput', () => {
             expect(clearButton).toHaveAttribute('aria-disabled', 'true');
 
             await PickerInputTestObject.clickOptionByText('A1');
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('A1');
+            await waitFor(() => {
+                expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('A1');
+            });
 
             fireEvent.click(dom.input);
 
@@ -265,8 +310,10 @@ describe('PickerInput', () => {
             expect(clearButton2).toHaveAttribute('aria-disabled', 'false');
 
             fireEvent.click(clearButton2);
+            await waitFor(() => {
+                expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
+            });
 
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
             const clearButton3 = within(screen.getByRole('dialog')).getByRole('button', { name: 'CLEAR' });
             expect(clearButton3).toHaveAttribute('aria-disabled', 'true');
         });
@@ -283,10 +330,15 @@ describe('PickerInput', () => {
             expect(screen.getByRole('dialog')).toBeInTheDocument();
 
             await PickerInputTestObject.clickOptionCheckbox('A1');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
+            
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
+            });
 
             await PickerInputTestObject.clickOptionCheckbox('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
+            });
             expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
 
             fireEvent.click(window.document.body);
@@ -294,10 +346,14 @@ describe('PickerInput', () => {
             expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']);
 
             PickerInputTestObject.removeSelectedTagByText(dom.input, 'A1+');
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1']);
-
+            await waitFor(() => {
+                expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1']);
+            });
+            
             PickerInputTestObject.removeSelectedTagByText(dom.input, 'A1');
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
+            await waitFor(() => {
+                expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
+            });
         });
 
         it('[valueType entity] should select & clear several options', async () => {
@@ -311,13 +367,17 @@ describe('PickerInput', () => {
             expect(screen.getByRole('dialog')).toBeInTheDocument();
 
             await PickerInputTestObject.clickOptionCheckbox('A1');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([{ id: 2, level: 'A1', name: 'Elementary' }]);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([{ id: 2, level: 'A1', name: 'Elementary' }]);
+            });
 
             await PickerInputTestObject.clickOptionCheckbox('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([
-                { id: 2, level: 'A1', name: 'Elementary' },
-                { id: 3, level: 'A1+', name: 'Elementary+' },
-            ]);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([
+                    { id: 2, level: 'A1', name: 'Elementary' },
+                    { id: 3, level: 'A1+', name: 'Elementary+' },
+                ]);
+            });
             expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
 
             fireEvent.click(window.document.body);
@@ -325,11 +385,15 @@ describe('PickerInput', () => {
             expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']);
 
             PickerInputTestObject.removeSelectedTagByText(dom.input, 'A1+');
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1']);
-
+            await waitFor(() => {
+                expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1']);
+            });
             PickerInputTestObject.removeSelectedTagByText(dom.input, 'A1');
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
+            await waitFor(() => {
+                expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
+            });
         });
+
         it('should render names of items by getName', async () => {
             const { dom } = await setupPickerInputForTest<TestItemType, number>({
                 value: [3, 4],
@@ -362,7 +426,7 @@ describe('PickerInput', () => {
         });
 
         it('should pick single element with cascadeSelection = false', async () => {
-            const { mocks, dom } = await setupPickerInputForTest({
+            const { mocks, dom } = await setupPickerInputForTest<TestTreeItem, number>({
                 value: undefined,
                 getName: ({ name }) => name,
                 selectionMode: 'multi',
@@ -372,7 +436,9 @@ describe('PickerInput', () => {
             fireEvent.click(dom.input);
             expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
             await PickerInputTestObject.clickOptionCheckbox('Parent 2');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
+            });
 
             expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Parent 2']);
             expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 3']);
@@ -383,7 +449,7 @@ describe('PickerInput', () => {
             [[true], ['explicit']],
         )
         ('should pick multiple elements with cascadeSelection = %s', async (cascadeSelection) => {
-            const { mocks, dom } = await setupPickerInputForTest({
+            const { mocks, dom } = await setupPickerInputForTest<TestTreeItem, number>({
                 value: undefined,
                 getName: ({ name }) => name,
                 selectionMode: 'multi',
@@ -397,23 +463,28 @@ describe('PickerInput', () => {
             await PickerInputTestObject.clickOptionCheckbox('Parent 2');
             // Unfold parent
             await PickerInputTestObject.clickOptionUnfold('Parent 2');
-            // Test if checkboxes are checked/unchecked
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 2.1, 2.2, 2.3]);
+            await waitFor(() => {
+                // Test if checkboxes are checked/unchecked
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 2.1, 2.2, 2.3]);
+            });
+
             expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Parent 2', 'Child 2.1', 'Child 2.2', 'Child 2.3']);
             expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Parent 2', 'Child 2.1', 'Child 2.2', 'Child 2.3']);
             expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 3']);
 
             // Check child
             await PickerInputTestObject.clickOptionCheckbox('Child 2.2');
-            // Test if checkboxes are checked/unchecked
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2.1, 2.3]);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Child 2.1', 'Child 2.3']);
+            await waitFor(() => {
+                // Test if checkboxes are checked/unchecked
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2.1, 2.3]);
+            });
+            
             expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Child 2.1', 'Child 2.3']);
             expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 2', 'Child 2.2', 'Parent 3']);
         });
 
         it('should pick single element with cascadeSelection = implicit', async () => {
-            const { mocks, dom } = await setupPickerInputForTest({
+            const { mocks, dom } = await setupPickerInputForTest<TestTreeItem, number>({
                 value: undefined,
                 getName: ({ name }) => name,
                 selectionMode: 'multi',
@@ -422,21 +493,30 @@ describe('PickerInput', () => {
             });
 
             fireEvent.click(dom.input);
-            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
+            await waitFor(async () => {
+                expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
+            });
 
             // Check parent
             await PickerInputTestObject.clickOptionCheckbox('Parent 2');
             // Unfold parent
             await PickerInputTestObject.clickOptionUnfold('Parent 2');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
+            
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
+            });
+
             expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Parent 2']);
+
             expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Parent 2', 'Child 2.1', 'Child 2.2', 'Child 2.3']);
             expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 3']);
 
             // Check child
             await PickerInputTestObject.clickOptionCheckbox('Child 2.2');
-            // Test if checkboxes are checked/unchecked
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2.1, 2.3]);
+            await waitFor(() => {
+                // Test if checkboxes are checked/unchecked
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2.1, 2.3]);
+            });
             expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Child 2.1', 'Child 2.3']);
             expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Child 2.1', 'Child 2.3']);
             expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 2', 'Child 2.2', 'Parent 3']);
@@ -451,17 +531,25 @@ describe('PickerInput', () => {
             });
 
             fireEvent.click(dom.input);
-            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
+            await waitFor(async () => {
+                expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
+            });
 
             // Check parent
             await PickerInputTestObject.clickOptionByText('A1');
             await PickerInputTestObject.clickOptionByText('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
+            });
             expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']);
 
             await PickerInputTestObject.clickOptionByText('A2');
             await PickerInputTestObject.clickOptionByText('A2+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3, 4, 5]);
+          
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3, 4, 5]);
+            });
+
             expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+', '+ 2 languages selected']);
         });
 
@@ -473,11 +561,15 @@ describe('PickerInput', () => {
             });
             await waitFor(() => expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']));
             PickerInputTestObject.clearInput(result.container);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
+            await waitFor(() => {
+                expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
+            });
 
             setProps({ disableClear: true, value: [2, 3] });
+            await waitFor(() => {
+                expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']);
+            });
             expect(PickerInputTestObject.hasClearInputButton(result.container)).toBeFalsy();
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']);
         });
 
         it('should select all', async () => {
@@ -488,7 +580,9 @@ describe('PickerInput', () => {
             });
 
             fireEvent.click(dom.input);
-            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
+            await waitFor(async () => {
+                expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
+            });
 
             await PickerInputTestObject.clickSelectAllOptions();
             await waitFor(() => {
@@ -496,7 +590,9 @@ describe('PickerInput', () => {
             });
 
             await PickerInputTestObject.clickClearAllOptions();
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
+            await waitFor(() => {
+                expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
+            });
         });
 
         describe('show only selected', () => {
@@ -511,9 +607,10 @@ describe('PickerInput', () => {
                 const dialog = await screen.findByRole('dialog');
                 expect(dialog).toBeInTheDocument();
 
-                await PickerInputTestObject.waitForOptionsToBeReady();
+                await waitFor(async () => {
+                    expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A1', 'A2', 'B1', 'B2']);
+                });
 
-                expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A1', 'A2', 'B1', 'B2']);
                 expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['A1+', 'A2+', 'B1+', 'B2+', 'C1', 'C1+', 'C2']);
 
                 await PickerInputTestObject.clickShowOnlySelected();
@@ -565,10 +662,10 @@ describe('PickerInput', () => {
             expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A2', 'A1', 'B1', 'B2']);
             expect(await PickerInputTestObject.findUncheckedOptions()).toEqual([]);
 
-            const searchInput = within(dialog).getByRole('searchbox') as HTMLInputElement;
+            const searchInput = within(dialog!).getByRole('searchbox') as HTMLInputElement;
             fireEvent.change(searchInput, { target: { value: 'search' } });
 
-            const showOnlySelectedSwitch = within(dialog).queryByRole('switch', { name: 'Show only selected' }) as HTMLInputElement;
+            const showOnlySelectedSwitch = within(dialog!).queryByRole('switch', { name: 'Show only selected' }) as HTMLInputElement;
 
             await waitFor(() => expect(showOnlySelectedSwitch.checked).toEqual(false));
         });
@@ -778,11 +875,15 @@ describe('PickerInput', () => {
         expect(dom.target.getAttribute('type')).toBe('button');
 
         fireEvent.click(dom.target);
-        expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
+        await waitFor(async () => {
+            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
+        });
 
         await PickerInputTestObject.clickOptionCheckbox('A1');
         await PickerInputTestObject.clickOptionCheckbox('A1+');
-        expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
+        await waitFor(async () => {
+            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
+        });
 
         expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
         expect(screen.getByTestId('test-toggler').textContent?.trim()).toEqual('Elementary, Elementary+');
@@ -1013,19 +1114,29 @@ describe('PickerInput', () => {
 
             fireEvent.click(dom.input);
 
-            const dialog = await screen.findByRole('dialog');
             await PickerInputTestObject.waitForOptionsToBeReady();
 
-            let focusedItem = dialog.querySelector('.uui-focus');
-            expect(focusedItem.getAttribute('aria-posinset')).toBe('1');
+            await waitFor(async () => {
+                const dialog = await screen.findByRole('dialog');
+                const focusedItem = dialog.querySelector('.uui-focus');
+                expect(focusedItem!.getAttribute('aria-posinset')).toBe('1');
+            });
 
             fireEvent.keyDown(dom.input, { key: 'ArrowDown', code: 'ArrowDown', charCode: 40 });
-            focusedItem = dialog.querySelector('.uui-focus');
-            expect(focusedItem.getAttribute('aria-posinset')).toBe('2');
+    
+            await waitFor(async () => {
+                const dialog = await screen.findByRole('dialog');
+                const focusedItem = dialog.querySelector('.uui-focus');
+                expect(focusedItem!.getAttribute('aria-posinset')).toBe('2');
+            });
 
             fireEvent.keyDown(dom.input, { key: 'ArrowUp', code: 'ArrowUp', charCode: 38 });
-            focusedItem = dialog.querySelector('.uui-focus');
-            expect(focusedItem.getAttribute('aria-posinset')).toBe('1');
+            
+            await waitFor(async () => {
+                const dialog = await screen.findByRole('dialog');
+                const focusedItem = dialog.querySelector('.uui-focus');
+                expect(focusedItem!.getAttribute('aria-posinset')).toBe('1');
+            });
         });
 
         it('should focus first founded item after search', async () => {
@@ -1042,8 +1153,10 @@ describe('PickerInput', () => {
 
             await PickerInputTestObject.waitForOptionsToBeReady();
 
-            const focusedItem = dialog.querySelector('.uui-focus');
-            expect(focusedItem.getAttribute('aria-posinset')).toBe('1');
+            await waitFor(() => {
+                const focusedItem = dialog.querySelector('.uui-focus');
+                expect(focusedItem?.getAttribute('aria-posinset')).toBe('1');
+            });
         });
 
         it('should select focused item by enter', async () => {
@@ -1057,7 +1170,9 @@ describe('PickerInput', () => {
             await PickerInputTestObject.waitForOptionsToBeReady();
 
             fireEvent.keyDown(dom.input, { key: 'Enter', code: 'Enter', charCode: 13 });
-            expect(mocks.onValueChange).toHaveBeenCalledWith(2);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenCalledWith(2);
+            });
         });
 
         it('should remove last item from selection by backspace in case of searchPosition="input"', async () => {
@@ -1072,10 +1187,15 @@ describe('PickerInput', () => {
             await PickerInputTestObject.waitForOptionsToBeReady();
 
             fireEvent.keyDown(dom.input, { key: 'Backspace', code: 'Backspace', charCode: 8 });
-            expect(mocks.onValueChange).toHaveBeenCalledWith([2, 3]);
+            
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenCalledWith([2, 3]);
+            });
 
             fireEvent.keyDown(dom.input, { key: 'Backspace', code: 'Backspace', charCode: 8 });
-            expect(mocks.onValueChange).toHaveBeenCalledWith([2]);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenCalledWith([2]);
+            });
         });
 
         it.each<[undefined | null | []]>([[[]]])
diff --git a/uui/components/pickers/__tests__/PickerList.test.tsx b/uui/components/pickers/__tests__/PickerList.test.tsx
index b3102f269c..f21dc91024 100644
--- a/uui/components/pickers/__tests__/PickerList.test.tsx
+++ b/uui/components/pickers/__tests__/PickerList.test.tsx
@@ -91,7 +91,7 @@ describe('PickerList', () => {
     });
 
     it('should open body', async () => {
-        const { result } = await setupPickerListForTest({
+        const { result } = await setupPickerListForTest<TestItemType, number>({
             value: undefined,
             selectionMode: 'single',
             dataSource: mockDataSourceAsync,
@@ -104,6 +104,7 @@ describe('PickerList', () => {
         fireEvent.click(toggler);
 
         await PickerListTestObject.waitForOptionsToBeReady('modal');
+        await PickerListTestObject.waitForSpinnerToHide('modal');
 
         expect(result.baseElement).toMatchSnapshot();
     });
@@ -198,7 +199,11 @@ describe('PickerList', () => {
 
             const optionC2 = await screen.findByText('A2+');
             fireEvent.click(optionC2);
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(5);
+            
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith(5);
+            });
+
             expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
             const toggler = PickerListTestObject.getPickerToggler();
@@ -220,7 +225,11 @@ describe('PickerList', () => {
 
             const optionC2 = await screen.findByText('A2+');
             fireEvent.click(optionC2);
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith({ id: 5, level: 'A2+', name: 'Pre-Intermediate+' });
+            
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith({ id: 5, level: 'A2+', name: 'Pre-Intermediate+' });
+            });
+
             expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
             const toggler = PickerListTestObject.getPickerToggler();
@@ -243,7 +252,9 @@ describe('PickerList', () => {
 
             const optionC2 = await screen.findByText('Elementary');
             fireEvent.click(optionC2);
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(2);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith(2);
+            });
         });
 
         it('should render entity name in picker toggler text', async () => {
@@ -319,8 +330,12 @@ describe('PickerList', () => {
             });
 
             await PickerListTestObject.waitForOptionsToBeReady();
+            await waitFor(() => {
+                const options = PickerListTestObject.getOptions();
+                expect(options).toHaveLength(5);
+            });
+
             const options = PickerListTestObject.getOptions();
-            expect(options).toHaveLength(5);
             expect((within(options[0]).getByRole('radio') as HTMLInputElement).checked).toBeTruthy();
         });
 
@@ -331,15 +346,17 @@ describe('PickerList', () => {
             });
 
             await PickerListTestObject.waitForOptionsToBeReady();
-            const options = PickerListTestObject.getOptions();
-            expect(options).toHaveLength(5);
-            expect(options.map((opt) => opt.textContent?.trim())).toEqual([
-                'C2',
-                'C1+',
-                'C1',
-                'B2+',
-                'B2',
-            ]);
+            
+            await waitFor(() => {
+                const options = PickerListTestObject.getOptions();
+                expect(options.map((opt) => opt.textContent?.trim())).toEqual([
+                    'C2',
+                    'C1+',
+                    'C1',
+                    'B2+',
+                    'B2',
+                ]);
+            });
         });
 
         it('should render defaultIds', async () => {
@@ -371,10 +388,16 @@ describe('PickerList', () => {
             await PickerListTestObject.waitForOptionsToBeReady();
 
             await PickerListTestObject.clickOptionCheckbox('A1');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
+            
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
+            });
 
             await PickerListTestObject.clickOptionCheckbox('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
+            });
+
             expect(await PickerListTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
 
             const toggler = PickerListTestObject.getPickerToggler();
@@ -386,9 +409,10 @@ describe('PickerList', () => {
             expect(checkedOptions1).toEqual(['A1', 'A1+']);
 
             await PickerListTestObject.clickOptionCheckbox('A1+', { editMode: 'modal' });
-
-            const checkedOptions2 = await PickerListTestObject.findCheckedOptions({ editMode: 'modal' });
-            expect(checkedOptions2).toEqual(['A1']);
+            await waitFor(async () => {
+                const checkedOptions2 = await PickerListTestObject.findCheckedOptions({ editMode: 'modal' });
+                expect(checkedOptions2).toEqual(['A1']);
+            });
         });
 
         it('[valueType entity] should select & clear several options', async () => {
@@ -401,17 +425,22 @@ describe('PickerList', () => {
             await PickerListTestObject.waitForOptionsToBeReady();
 
             await PickerListTestObject.clickOptionCheckbox('A1');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([{
-                id: 2,
-                level: 'A1',
-                name: 'Elementary',
-            }]);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([{
+                    id: 2,
+                    level: 'A1',
+                    name: 'Elementary',
+                }]);
+            });
 
             await PickerListTestObject.clickOptionCheckbox('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([
-                { id: 2, level: 'A1', name: 'Elementary' },
-                { id: 3, level: 'A1+', name: 'Elementary+' },
-            ]);
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([
+                    { id: 2, level: 'A1', name: 'Elementary' },
+                    { id: 3, level: 'A1+', name: 'Elementary+' },
+                ]);
+            });
+
             expect(await PickerListTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
 
             const toggler = PickerListTestObject.getPickerToggler();
@@ -424,8 +453,10 @@ describe('PickerList', () => {
 
             await PickerListTestObject.clickOptionCheckbox('A1+', { editMode: 'modal' });
 
-            const checkedOptions2 = await PickerListTestObject.findCheckedOptions({ editMode: 'modal' });
-            expect(checkedOptions2).toEqual(['A1']);
+            await waitFor(async () => {
+                const checkedOptions2 = await PickerListTestObject.findCheckedOptions({ editMode: 'modal' });
+                expect(checkedOptions2).toEqual(['A1']); 
+            });
         });
 
         it('should render names of items by getName', async () => {
@@ -550,11 +581,15 @@ describe('PickerList', () => {
             await PickerListTestObject.waitForOptionsToBeReady('modal');
 
             await PickerListTestObject.clickSelectAllOptions({ editMode: 'modal' });
-            expect(await PickerListTestObject.findCheckedOptions({ editMode: 'modal' }))
-                .toEqual(['A1', 'A1+', 'A2', 'A2+', 'B1', 'B1+', 'B2', 'B2+', 'C1', 'C1+', 'C2']);
+            await waitFor(async () => {
+                expect(await PickerListTestObject.findCheckedOptions({ editMode: 'modal' }))
+                    .toEqual(['A1', 'A1+', 'A2', 'A2+', 'B1', 'B1+', 'B2', 'B2+', 'C1', 'C1+', 'C2']);
+            });
 
             await PickerListTestObject.clickClearAllOptions({ editMode: 'modal' });
-            expect(await PickerListTestObject.findCheckedOptions({ editMode: 'modal' })).toEqual([]);
+            await waitFor(async () => {
+                expect(await PickerListTestObject.findCheckedOptions({ editMode: 'modal' })).toEqual([]);
+            });
         });
 
         it('should show only selected', async () => {
@@ -565,16 +600,25 @@ describe('PickerList', () => {
 
             await PickerListTestObject.waitForOptionsToBeReady();
 
+            await waitFor(() => {
+                expect(PickerListTestObject.getPickerToggler()).toBeInTheDocument();
+            });
+
             fireEvent.click(PickerListTestObject.getPickerToggler());
 
             await PickerListTestObject.waitForOptionsToBeReady('modal');
 
-            expect(await PickerListTestObject.findCheckedOptions({ editMode: 'modal' })).toEqual(['A1', 'A2', 'B1', 'B2']);
+            await waitFor(async () => {
+                expect(await PickerListTestObject.findCheckedOptions({ editMode: 'modal' })).toEqual(['A1', 'A2', 'B1', 'B2']);
+            });
             expect(await PickerListTestObject.findUncheckedOptions({ editMode: 'modal' })).toEqual(['A1+', 'A2+', 'B1+', 'B2+', 'C1', 'C1+', 'C2']);
 
             await PickerListTestObject.clickShowOnlySelected({ editMode: 'modal' });
 
-            expect(await PickerListTestObject.findCheckedOptions({ editMode: 'modal' })).toEqual(['A2', 'A1', 'B1', 'B2']);
+            await waitFor(async () => {
+                expect(await PickerListTestObject.findCheckedOptions({ editMode: 'modal' })).toEqual(['A2', 'A1', 'B1', 'B2']);
+            });
+
             expect(await PickerListTestObject.findUncheckedOptions({ editMode: 'modal' })).toEqual([]);
         });
 
diff --git a/uui/components/pickers/__tests__/PickerModal.test.tsx b/uui/components/pickers/__tests__/PickerModal.test.tsx
index 8978e5fd39..c6df874635 100644
--- a/uui/components/pickers/__tests__/PickerModal.test.tsx
+++ b/uui/components/pickers/__tests__/PickerModal.test.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback, useContext, useState } from 'react';
-import { PickerModalTestObject, fireEvent, renderSnapshotWithContextAsync, screen, setupComponentForTest } from '@epam/uui-test-utils';
+import { PickerModalTestObject, act, fireEvent, renderSnapshotWithContextAsync, screen, setupComponentForTest, waitFor } from '@epam/uui-test-utils';
 import { PickerModal, PickerModalProps } from '../PickerModal';
-import { mockDataSource, mockDataSourceAsync, mockSmallDataSource, mockSmallDataSourceAsync, mockTreeLikeDataSourceAsync, TestItemType } from './mocks';
+import { Item, mockDataSource, mockDataSourceAsync, mockSmallDataSource, mockSmallDataSourceAsync, mockTreeLikeDataSourceAsync, TestItemType, TestTreeItem } from './mocks';
 import { Button, Modals } from '@epam/uui-components';
 import { CascadeSelection, UuiContext } from '@epam/uui-core';
-import { act } from 'react-dom/test-utils';
 
 const onValueChangeMock = jest.fn();
 
@@ -48,8 +47,10 @@ async function setupPickerModalForTest<TItem = TestItemType, TId = number>(param
                         );
                     })
                     .then((newSelection) => {
-                        onValueChange(newSelection as any);
-                        onValueChangeMock(newSelection);
+                        act(() => {
+                            onValueChange(newSelection as any);
+                            onValueChangeMock(newSelection);
+                        });
                     })
                     .catch(() => {});
             }, [context.uuiModals, initialValue]);
@@ -116,7 +117,7 @@ describe('PickerModal', () => {
     });
 
     it('should open body', async () => {
-        const { dom, result } = await setupPickerModalForTest({
+        const { dom, result } = await setupPickerModalForTest<Item, number>({
             selectionMode: 'single',
             dataSource: mockSmallDataSourceAsync,
             getName: ({ name }) => name,
@@ -155,9 +156,7 @@ describe('PickerModal', () => {
             const optionC2 = await screen.findByText('C2');
             fireEvent.click(optionC2);
 
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
-            });
+            await PickerModalTestObject.clickSelectItems();
 
             expect(PickerModalTestObject.queryDialog()).not.toBeInTheDocument();
 
@@ -202,9 +201,7 @@ describe('PickerModal', () => {
             const checkedOption = await PickerModalTestObject.findSelectedOption();
             expect(checkedOption).toEqual('A1');
 
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
-            });
+            await PickerModalTestObject.clickSelectItems();
 
             expect(PickerModalTestObject.queryDialog()).not.toBeInTheDocument();
 
@@ -221,7 +218,7 @@ describe('PickerModal', () => {
             [[false], [true], ['implicit'], ['explicit']],
         )
         ('should pick single element with cascadeSelection = %s', async (cascadeSelection) => {
-            const { dom } = await setupPickerModalForTest({
+            const { dom } = await setupPickerModalForTest<TestTreeItem, number>({
                 getName: ({ name }) => name,
                 selectionMode: 'single',
                 cascadeSelection,
@@ -233,12 +230,10 @@ describe('PickerModal', () => {
             await PickerModalTestObject.waitForOptionsToBeReady();
             // Check parent
             await PickerModalTestObject.clickOptionByText('Parent 2');
-
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
+            await PickerModalTestObject.clickSelectItems();
+            await waitFor(() => {
+                expect(onValueChangeMock).toHaveBeenLastCalledWith(2);
             });
-
-            expect(onValueChangeMock).toHaveBeenLastCalledWith(2);
         });
     });
 
@@ -255,20 +250,21 @@ describe('PickerModal', () => {
             await PickerModalTestObject.waitForOptionsToBeReady();
 
             await PickerModalTestObject.clickOptionCheckbox('A1');
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
+            await PickerModalTestObject.clickSelectItems();
+
+            await waitFor(() => {
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([2]);
             });
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([2]);
 
             fireEvent.click(dom.toggler);
+            
             await PickerModalTestObject.clickOptionCheckbox('A1+');
+            await PickerModalTestObject.clickSelectItems();
 
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
+            await waitFor(() => {
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([2, 3]);
             });
 
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([2, 3]);
-
             fireEvent.click(dom.toggler);
             expect(await PickerModalTestObject.findDialog()).toBeInTheDocument();
 
@@ -277,7 +273,8 @@ describe('PickerModal', () => {
             expect(await PickerModalTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
 
             await PickerModalTestObject.clickOptionCheckbox('A1+');
-            expect(await PickerModalTestObject.findCheckedOptions()).toEqual(['A1']);
+    
+            expect(await PickerModalTestObject.findCheckedOptions()).toEqual(['A1']); 
         });
 
         it('[valueType entity] should select & clear several options', async () => {
@@ -294,14 +291,14 @@ describe('PickerModal', () => {
             await PickerModalTestObject.clickOptionCheckbox('A1+');
             expect(await PickerModalTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
 
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
-            });
+            await PickerModalTestObject.clickSelectItems();
 
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([
-                { id: 2, level: 'A1', name: 'Elementary' },
-                { id: 3, level: 'A1+', name: 'Elementary+' },
-            ]);
+            await waitFor(() => {
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([
+                    { id: 2, level: 'A1', name: 'Elementary' },
+                    { id: 3, level: 'A1+', name: 'Elementary+' },
+                ]);
+            });
 
             fireEvent.click(dom.toggler);
             expect(await PickerModalTestObject.findDialog()).toBeInTheDocument();
@@ -312,17 +309,17 @@ describe('PickerModal', () => {
             await PickerModalTestObject.clickOptionCheckbox('A1');
             expect(await PickerModalTestObject.findCheckedOptions()).toEqual(['A1+']);
 
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
-            });
+            await PickerModalTestObject.clickSelectItems();
 
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([
-                { id: 3, level: 'A1+', name: 'Elementary+' },
-            ]);
+            await waitFor(() => {
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([
+                    { id: 3, level: 'A1+', name: 'Elementary+' },
+                ]);
+            });
         });
 
         it('should pick single element with cascadeSelection = false', async () => {
-            const { dom } = await setupPickerModalForTest({
+            const { dom } = await setupPickerModalForTest<TestTreeItem, number>({
                 selectionMode: 'multi',
                 cascadeSelection: false,
                 dataSource: mockTreeLikeDataSourceAsync,
@@ -334,13 +331,15 @@ describe('PickerModal', () => {
             await PickerModalTestObject.waitForOptionsToBeReady();
 
             expect(await PickerModalTestObject.hasOptions()).toBeTruthy();
+
             await PickerModalTestObject.clickOptionCheckbox('Parent 2');
 
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
+            await PickerModalTestObject.clickSelectItems();
+
+            await waitFor(() => {
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([2]);
             });
 
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([2]);
             fireEvent.click(dom.toggler);
 
             await PickerModalTestObject.waitForOptionsToBeReady();
@@ -352,7 +351,7 @@ describe('PickerModal', () => {
             [[true], ['explicit']],
         )
         ('should pick multiple elements with cascadeSelection = %s', async (cascadeSelection) => {
-            const { dom } = await setupPickerModalForTest({
+            const { dom } = await setupPickerModalForTest<TestTreeItem, number>({
                 getName: ({ name }) => name,
                 selectionMode: 'multi',
                 cascadeSelection,
@@ -369,13 +368,13 @@ describe('PickerModal', () => {
             // Unfold parent
             await PickerModalTestObject.clickOptionUnfold('Parent 2');
 
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
-            });
-
-            // Test if checkboxes are checked/unchecked
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([2, 2.1, 2.2, 2.3]);
+            await PickerModalTestObject.clickSelectItems();
 
+            await waitFor(() => {
+                // Test if checkboxes are checked/unchecked
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([2, 2.1, 2.2, 2.3]);
+            });
+            
             fireEvent.click(dom.toggler);
             expect(await PickerModalTestObject.findDialog()).toBeInTheDocument();
 
@@ -387,12 +386,13 @@ describe('PickerModal', () => {
 
             // // Check child
             await PickerModalTestObject.clickOptionCheckbox('Child 2.2');
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
+            await PickerModalTestObject.clickSelectItems();
+
+            await waitFor(() => {
+                // Test if checkboxes are checked/unchecked
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([2.1, 2.3]);
             });
 
-            // // Test if checkboxes are checked/unchecked
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([2.1, 2.3]);
             fireEvent.click(dom.toggler);
             expect(await PickerModalTestObject.findDialog()).toBeInTheDocument();
 
@@ -403,7 +403,7 @@ describe('PickerModal', () => {
         });
 
         it('should pick single element with cascadeSelection = implicit', async () => {
-            const { dom } = await setupPickerModalForTest({
+            const { dom } = await setupPickerModalForTest<TestTreeItem, number>({
                 getName: ({ name }) => name,
                 selectionMode: 'multi',
                 cascadeSelection: 'implicit',
@@ -419,10 +419,10 @@ describe('PickerModal', () => {
             await PickerModalTestObject.clickOptionCheckbox('Parent 2');
             // Unfold parent
             await PickerModalTestObject.clickOptionUnfold('Parent 2');
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
+            await PickerModalTestObject.clickSelectItems();
+            await waitFor(() => {
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([2]);
             });
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([2]);
 
             fireEvent.click(dom.toggler);
             expect(await PickerModalTestObject.findDialog()).toBeInTheDocument();
@@ -434,11 +434,12 @@ describe('PickerModal', () => {
 
             // Check child
             await PickerModalTestObject.clickOptionCheckbox('Child 2.2');
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
+            await PickerModalTestObject.clickSelectItems();
+
+            await waitFor(() => {
+                // Test if checkboxes are checked/unchecked
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([2.1, 2.3]);
             });
-            // Test if checkboxes are checked/unchecked
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([2.1, 2.3]);
 
             fireEvent.click(dom.toggler);
             expect(await PickerModalTestObject.findDialog()).toBeInTheDocument();
@@ -460,10 +461,11 @@ describe('PickerModal', () => {
 
             await PickerModalTestObject.waitForOptionsToBeReady();
             await PickerModalTestObject.clickSelectAllOptions();
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
+            await PickerModalTestObject.clickSelectItems();
+
+            await waitFor(() => {
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
             });
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
 
             fireEvent.click(dom.toggler);
             expect(await PickerModalTestObject.findDialog()).toBeInTheDocument();
@@ -474,9 +476,7 @@ describe('PickerModal', () => {
             );
 
             await PickerModalTestObject.clickClearAllOptions();
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
-            });
+            await PickerModalTestObject.clickSelectItems();
 
             fireEvent.click(dom.toggler);
             expect(await PickerModalTestObject.findDialog()).toBeInTheDocument();
@@ -501,20 +501,26 @@ describe('PickerModal', () => {
 
             await PickerModalTestObject.clickShowOnlySelected();
 
-            expect(await PickerModalTestObject.findCheckedOptions()).toEqual(['A2', 'A1', 'B1', 'B2']);
+            await waitFor(async () => {
+                expect(await PickerModalTestObject.findCheckedOptions()).toEqual(['A2', 'A1', 'B1', 'B2']);
+            });
+
             expect(await PickerModalTestObject.findUncheckedOptions()).toEqual([]);
-            await act(async () => {
-                await PickerModalTestObject.clickSelectItems();
+            await PickerModalTestObject.clickSelectItems();
+            
+            await waitFor(() => {
+                expect(onValueChangeMock).toHaveBeenLastCalledWith([4, 2, 6, 8]);
             });
-            expect(onValueChangeMock).toHaveBeenLastCalledWith([4, 2, 6, 8]);
 
             fireEvent.click(dom.toggler);
             expect(await PickerModalTestObject.findDialog()).toBeInTheDocument();
 
             await PickerModalTestObject.waitForOptionsToBeReady();
             await PickerModalTestObject.clickShowOnlySelected();
+            await waitFor(async () => {
+                expect(await PickerModalTestObject.findCheckedOptions()).toEqual(['A2', 'A1', 'B1', 'B2']);
+            });
 
-            expect(await PickerModalTestObject.findCheckedOptions()).toEqual(['A2', 'A1', 'B1', 'B2']);
             expect(await PickerModalTestObject.findUncheckedOptions()).toEqual([]);
         });
     });
diff --git a/uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap
index 06496e9984..64677bf72c 100644
--- a/uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap
+++ b/uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap
@@ -102,7 +102,459 @@ Array [
                 "marginTop": 0,
               }
             }
-          />
+          >
+            <div
+              aria-posinset={3}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      A1
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={4}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      A1+
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={5}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      A2
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={6}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      A2+
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={7}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      B1
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={8}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      B1+
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={9}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      B2
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={10}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      B2+
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={11}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      C1
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={12}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      C1+
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-posinset={13}
+              className="uui-flex-row pickerRow container align-items-center"
+              role="option"
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                role="cell"
+                style={
+                  Object {
+                    "alignSelf": undefined,
+                    "flexBasis": "0",
+                    "flexGrow": 1,
+                    "flexShrink": undefined,
+                    "minWidth": 0,
+                    "textAlign": undefined,
+                  }
+                }
+              >
+                <div
+                  className="contentWrapper"
+                >
+                  <div
+                    className="renderItem"
+                  >
+                    <div>
+                      C2
+                    </div>
+                    <div
+                      className="flexSpacer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap
index 68b7b110b0..91192d5f7a 100644
--- a/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap
+++ b/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap
@@ -158,7 +158,31 @@ exports[`PickerInput should open body 1`] = `
           <div
             class="container uui-blocker-container root"
           >
-            <div />
+            <div>
+              <div
+                aria-label="Loading"
+                class="uui-blocker uui-blocker-exit uui-blocker-exit-active"
+                role="alert"
+              >
+                <div
+                  class="container uui-spinner-container root uui-spinner"
+                >
+                  <div
+                    class="uui-spinner-animation"
+                  >
+                    <div
+                      class="uui-spinner-dot uui-spinner-dot-1"
+                    />
+                    <div
+                      class="uui-spinner-dot uui-spinner-dot-2"
+                    />
+                    <div
+                      class="uui-spinner-dot uui-spinner-dot-3"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <div
             class="uui-track-horizontal"
diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
index 24d23f23f5..d24e0332ca 100644
--- a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
+++ b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
@@ -2011,7 +2011,31 @@ exports[`PickerModal should open body 1`] = `
             <div
               class="container uui-blocker-container root"
             >
-              <div />
+              <div>
+                <div
+                  aria-label="Loading"
+                  class="uui-blocker uui-blocker-exit uui-blocker-exit-active"
+                  role="alert"
+                >
+                  <div
+                    class="container uui-spinner-container root uui-spinner"
+                  >
+                    <div
+                      class="uui-spinner-animation"
+                    >
+                      <div
+                        class="uui-spinner-dot uui-spinner-dot-1"
+                      />
+                      <div
+                        class="uui-spinner-dot uui-spinner-dot-2"
+                      />
+                      <div
+                        class="uui-spinner-dot uui-spinner-dot-3"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
             <div
               class="uui-track-horizontal"
diff --git a/uui/components/pickers/__tests__/mocks.ts b/uui/components/pickers/__tests__/mocks.ts
index f4da6007ef..cb9c8d9914 100644
--- a/uui/components/pickers/__tests__/mocks.ts
+++ b/uui/components/pickers/__tests__/mocks.ts
@@ -64,7 +64,7 @@ export const mockSmallDataSource = new ArrayDataSource({
     items: smallDataSet,
 });
 
-export const mockSmallDataSourceAsync = new AsyncDataSource({
+export const mockSmallDataSourceAsync = new AsyncDataSource<Item, number>({
     api: async () => {
         await delay(50);
         return smallDataSet;
diff --git a/uui/components/tables/DataTable.tsx b/uui/components/tables/DataTable.tsx
index b02e297544..b409850c03 100644
--- a/uui/components/tables/DataTable.tsx
+++ b/uui/components/tables/DataTable.tsx
@@ -19,35 +19,47 @@ import { i18n } from '../../i18n';
 
 export interface DataTableProps<TItem, TId, TFilter = any> extends IEditable<DataTableState>, DataSourceListProps, DataTableColumnsConfigOptions, Pick<VirtualListProps, 'onScroll'> {
     /** Callback to get rows that will be rendered in table */
-    getRows(): DataRowProps<TItem, TId>[];
+    getRows?(): DataRowProps<TItem, TId>[];
+    
+    /** Rows that should be rendered in table */
+    rows?: DataRowProps<TItem, TId>[];
+
     /** Array of all possible columns for the table */
     columns: DataColumnProps<TItem, TId>[];
+
     /** Render callback for the table row.
      * If omitted, default DataTableRow implementation will be rendered.
      * */
     renderRow?(props: DataTableRowProps<TItem, TId>): React.ReactNode;
+
     /** Render callback for the 'No results' block. Will be rendered when table doesn't have rows for displaying, e.g. after search applying.
      * If omitted, default implementation will be rendered.
      * */
     renderNoResultsBlock?(): React.ReactNode;
+
     /** Pass true to enable the column configuration button in the last column header. On this button click will show the columns configuration modal.
      * Note that you need to have at least one column fixed to the right for proper display
      * */
     showColumnsConfig?: boolean;
+
     /** Array of filters to be added to the column header.
      * For each filter, you need to specify the `columnKey` of the column where it will be attached.
      * */
     filters?: TableFiltersConfig<any>[];
+
     /** Called when cell content is copied to other cells via the DataTable cell copying mechanism.
      * This callback is typically used to update the state according to the changes.
      * To enable cell copying, provide the canCopy prop for the column.
      * */
     onCopy?: (copyFrom: DataTableSelectedCellData<TItem, TId, TFilter>, selectedCells: DataTableSelectedCellData<TItem, TId, TFilter>[]) => void;
+
     /** Render callback for column configuration modal.
      * If omitted, default `ColumnsConfigurationModal` implementation will be rendered.
      */
     renderColumnsConfigurationModal?: (props: ColumnsConfigurationModalProps<TItem, TId, TFilter>) => React.ReactNode;
+
     dataTableFocusManager?: DataTableFocusManager<TId>;
+
     /**
      * Enables collapse/expand all functionality.
      * */
@@ -65,7 +77,7 @@ export function DataTable<TItem, TId>(props: React.PropsWithChildren<DataTablePr
     }, []);
 
     const renderRow = (row: DataRowProps<TItem, TId>) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
-    const rows = props.getRows();
+    const rows = props.getRows?.() ?? props.rows ?? [];
 
     const renderNoResultsBlock = React.useCallback(() => {
         return (
diff --git a/yarn.lock b/yarn.lock
index d7da65ead5..bcb6b56452 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3394,6 +3394,18 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@tanstack/query-core@5.18.1":
+  version "5.18.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.18.1.tgz#b653ee354b7f4712d53565ccc5c6d8fb83ec866c"
+  integrity sha512-fYhrG7bHgSNbnkIJF2R4VUXb4lF7EBiQjKkDc5wOlB7usdQOIN4LxxHpDxyE3qjqIst1WBGvDtL48T0sHJGKCw==
+
+"@tanstack/react-query@^5.17.19":
+  version "5.18.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.18.1.tgz#fd4e7b87260e82c5277355ad64f0e431a9302e02"
+  integrity sha512-PdI07BbsahZ+04PxSuDQsQvBWe008eWFk/YYWzt8fvzt2sALUM0TpAJa/DFpqa7+SSo7j1EQR6Jx6znXNHyaXw==
+  dependencies:
+    "@tanstack/query-core" "5.18.1"
+
 "@testing-library/dom@^9.0.0":
   version "9.3.4"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"