diff --git a/app/src/common/sidebar/Sidebar.tsx b/app/src/common/sidebar/Sidebar.tsx
index 3f81533058..79a706cc4b 100644
--- a/app/src/common/sidebar/Sidebar.tsx
+++ b/app/src/common/sidebar/Sidebar.tsx
@@ -1,43 +1,43 @@
 import * as React from 'react';
 import * as css from './Sidebar.scss';
 import { ScrollBars, SearchInput } from '@epam/promo';
-import { Tree, TreeListItem, TreeNodeProps } from '@epam/uui-components';
+import { Tree, TreeListItem } from '@epam/uui-components';
 import { SidebarButton } from './SidebarButton';
-import { Link, useUuiContext } from "@epam/uui";
+import { DataRowProps, DataSourceState, Link, useUuiContext } from "@epam/uui";
 import { analyticsEvents } from "../../analyticsEvents";
 
 export interface SidebarProps<TItem extends TreeListItem = TreeListItem> {
     value: string;
-    onValueChange: (newVal: TreeNodeProps<TItem>) => void;
-    getItemLink?: (item: TreeNodeProps<TItem>) => Link;
+    onValueChange: (newVal: DataRowProps<TItem, string>) => void;
+    getItemLink?: (item: DataRowProps<TItem, string>) => Link;
     items: TItem[];
     renderSearch?: () => React.ReactNode;
 }
 
 export function Sidebar<TItem extends TreeListItem>(props: SidebarProps<TItem>) {
     const { uuiAnalytics } = useUuiContext();
-    const [searchValue, setSearchValue] = React.useState<string>('');
-    const [unfoldedIds, setUnfoldedIds] = React.useState<string[]>([]);
+    const [value, setValue] = React.useState<DataSourceState>({ search: '', folded: {} });
 
     React.useEffect(() => {
-        const { parentId } = props.items.find(i => i.id === props.value);
-        if (!unfoldedIds.includes(parentId) && parentId !== undefined) {
-            setUnfoldedIds([...unfoldedIds, parentId]);
+        const { parentId } = props.items.find(i => i.id == props.value);
+        if (parentId != null) {
+            const parentKey = JSON.stringify(parentId);
+            setValue((value) => ({...value, folded: { ...value.folded, [ parentKey ]: false } }));
         }
     }, [props.value]);
 
-    const handleClick = React.useCallback((item: TreeNodeProps) => {
-        item.isDropdown && item.onClick();
-        const type = item.isDropdown ? 'folder' : 'document';
-        uuiAnalytics.sendEvent(analyticsEvents.document.clickDocument(type, item.data.name, item.parentId));
+    const handleClick = React.useCallback((row: DataRowProps<TItem, string>) => {
+        row.isFoldable && row.onFold(row);
+        const type = row.isFoldable ? 'folder' : 'document';
+        uuiAnalytics.sendEvent(analyticsEvents.document.clickDocument(type, row.value.name, row.parentId));
     }, []);
 
     return (
         <aside className={ css.root }>
             <SearchInput
                 cx={ css.search }
-                value={ searchValue }
-                onValueChange={ setSearchValue }
+                value={ value.search }
+                onValueChange={ (search) => setValue(v => ({ ...v, search }))}
                 autoFocus
                 placeholder='Search'
                 getValueChangeAnalyticsEvent={ value => analyticsEvents.document.search(value) }
@@ -46,18 +46,18 @@ export function Sidebar<TItem extends TreeListItem>(props: SidebarProps<TItem>)
                 <ScrollBars>
                     <Tree<TItem>
                         items={ props.items }
-                        value={ unfoldedIds }
-                        search={ searchValue }
-                        onValueChange={ setUnfoldedIds }
-                        renderRow={ item => (
+                        value={ value }
+                        onValueChange={ setValue }
+                        renderRow={ row => (
                             <SidebarButton
-                                link={ props.getItemLink(item) }
-                                indent={ item.depth * 12 }
-                                isOpen={ item.isOpen }
-                                isDropdown={ item.isDropdown }
-                                isActive={ item.id === props.value }
-                                caption={ item.data.name }
-                                onClick={ () => handleClick(item) }
+                                key={ row.key }
+                                link={ props.getItemLink(row) }
+                                indent={ (row.depth - 1) * 12 }
+                                isOpen={ !row.isFolded }
+                                isDropdown={ row.isFoldable }
+                                isActive={ row.id === props.value }
+                                caption={ row.value.name }
+                                onClick={ () => handleClick(row) }
                             />
                         ) }
                     />
diff --git a/app/src/demo/tables/filteredTable/FilteredTable.scss b/app/src/demo/tables/filteredTable/FilteredTable.scss
index dba19a0dc8..c947f1d783 100644
--- a/app/src/demo/tables/filteredTable/FilteredTable.scss
+++ b/app/src/demo/tables/filteredTable/FilteredTable.scss
@@ -6,6 +6,10 @@
     display: flex;
     position: relative;
 }
+.presets-title {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
 
 .container {
     display: flex;
@@ -15,6 +19,7 @@
     flex-basis: auto;
     min-width: 0;
     flex-grow: 1;
+    font-family: $font-sans;
 
     .manager-cell {
         font-family: $font-sans;
@@ -69,3 +74,29 @@
         align-self: flex-start;
     }
 }
+
+.presets-panel {
+    padding: 0 24px;
+    display: flex;
+    overflow-x: auto;
+    flex-shrink: 0;
+    background-color: $white;
+    border-bottom: 1px solid $gray40;
+
+
+    & > *:not(:first-child) {
+        margin-left: 0;
+    }
+
+    & > * {
+        flex-shrink: 0;
+    }
+
+    & > *:not(:last-child) {
+        margin-right: 0;
+    }
+
+    button {
+        align-self: center;
+    }
+}
diff --git a/app/src/demo/tables/filteredTable/FilteredTable.tsx b/app/src/demo/tables/filteredTable/FilteredTable.tsx
index 3b8262ff97..6b5982b357 100644
--- a/app/src/demo/tables/filteredTable/FilteredTable.tsx
+++ b/app/src/demo/tables/filteredTable/FilteredTable.tsx
@@ -1,66 +1,102 @@
-import React, { useMemo } from 'react';
-import { Person } from '@epam/uui-docs';
-import { useLazyDataSource, useUuiContext, UuiContexts, useTableState } from "@epam/uui-core";
-import { DataTable, FiltersToolbar, FlexRow } from '@epam/promo';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import css from './FilteredTable.scss';
-import type { TApi } from '../../../data';
+import { DataTable, FiltersToolbar, FlexCell, FlexRow, PresetPanel, Text } from '@epam/promo';
 import { getFilters } from './filters';
+import { useLazyDataSource, useUuiContext, UuiContexts, useTableState, LazyDataSourceApiRequest, ITablePreset } from "@epam/uui-core";
+import { FilteredTableFooter } from "./FilteredTableFooter";
+import { Person } from '@epam/uui-docs';
 import { personColumns } from './columns';
-import { FlexCell } from "@epam/uui-components";
 import { SearchInput } from "@epam/uui";
+import { TApi } from "../../../data";
 
 export const FilteredTable: React.FC = () => {
     const svc = useUuiContext<TApi, UuiContexts>();
     const filters = useMemo(getFilters, []);
-    const tableStateApi = useTableState({ columns: personColumns });
-    const tableState = tableStateApi.tableState;
+    const [totalCount, setTotalCount] = useState(0);
+    const [initialPresets, setInitialPresets] = useState<ITablePreset[]>([]);
 
-    const dataSource = useLazyDataSource<Person, number, Person>({
-        api: request => {
-            return svc.api.demo.persons(request);
-        },
+    useEffect(() => {
+        svc.api.presets.getPresets()
+            .then(setInitialPresets)
+            .catch(console.error);
     }, []);
 
+    const tableStateApi = useTableState({
+        columns: personColumns,
+        initialPresets: initialPresets,
+        onPresetCreate: svc.api.presets.createPreset,
+        onPresetUpdate: svc.api.presets.updatePreset,
+        onPresetDelete: svc.api.presets.deletePreset,
+    });
+
+    const api = useCallback(async (rq: LazyDataSourceApiRequest<{}>) => {
+        const result = await svc.api.demo.personsPaged({
+            ...rq,
+            filter: rq.filter || {},
+            page: rq.page - 1,
+            pageSize: tableStateApi.tableState.pageSize || rq.pageSize,
+        });
+        setTotalCount(() => result.totalCount);
+        result.count = result.items.length;
+        result.totalCount = result.items.length;
+        result.from = 0;
+        return result;
+    }, [tableStateApi.tableState.page, tableStateApi.tableState.pageSize]);
 
-    const view = dataSource.useView(tableState, tableStateApi.setTableState, {
+    const dataSource = useLazyDataSource<Person, number, Person>({
+        api: api,
+    }, []);
+
+    const view = dataSource.useView(tableStateApi.tableState, tableStateApi.setTableState, {
         rowOptions: {
             checkbox: { isVisible: true },
             isSelectable: true,
         },
     });
 
+    const searchHandler = (val: string | undefined) => tableStateApi.setTableState({ ...tableStateApi.tableState, search: val });
+
+    const { setTableState, setFilter, setColumnsConfig, setFiltersConfig, ...presetsApi } = tableStateApi;
+
     return (
         <div className={ css.container }>
+            <div className={ css.presetsPanel }>
+                <Text fontSize="24" cx={ css.presetsTitle }>Profiles Dashboard</Text>
+                <PresetPanel { ...presetsApi } />
+            </div>
             <FlexRow cx={ css.filterPanelWrapper } background="gray5" borderBottom={ true }>
                 <FlexRow cx={ css.filterPanel }>
                     <FiltersToolbar
                         filters={ filters }
-                        tableState={ tableState }
+                        tableState={ tableStateApi.tableState }
                         setTableState={ tableStateApi.setTableState }
                     />
                 </FlexRow>
                 <FlexCell cx={ css.search } width={ 295 }>
                     <SearchInput
-                        value={ tableState.search }
-                        onValueChange={ (val) => tableStateApi.setTableState({ ...tableState, search: val }) }
+                        value={ tableStateApi.tableState.search }
+                        onValueChange={ searchHandler }
                         placeholder="Search"
                         debounceDelay={ 1000 }
                     />
                 </FlexCell>
             </FlexRow>
-
             <DataTable
-                headerTextCase="upper"
+                headerTextCase={ "upper" as "upper" | "normal" }
                 getRows={ view.getVisibleRows }
                 columns={ personColumns }
-                filters={ filters }
-                value={ tableState }
+                value={ tableStateApi.tableState }
                 onValueChange={ tableStateApi.setTableState }
                 showColumnsConfig={ true }
-                allowColumnsResizing
-                allowColumnsReordering
+                allowColumnsResizing={ true }
+                allowColumnsReordering={ true }
                 { ...view.getListProps() }
             />
+            <FilteredTableFooter
+                tableState={ tableStateApi.tableState }
+                setTableState={ tableStateApi.setTableState }
+                totalCount={ totalCount }
+            />
         </div>
     );
 };
\ No newline at end of file
diff --git a/app/src/demo/tables/filteredTable/FilteredTableFooter.scss b/app/src/demo/tables/filteredTable/FilteredTableFooter.scss
new file mode 100644
index 0000000000..427192c78d
--- /dev/null
+++ b/app/src/demo/tables/filteredTable/FilteredTableFooter.scss
@@ -0,0 +1,27 @@
+@use '~@epam/promo/assets/styles/colors' as *;
+@use '~@epam/promo/assets/styles/fonts' as *;
+
+.paginator-wrapper {
+    justify-content: flex-end;
+    box-shadow: inset 0 1px 0 $gray40;
+
+    .items-per-page {
+        margin-right: 36px;
+
+        :global(.uui-input){
+            max-width: 20px;
+        }
+    }
+
+    .go-to-page {
+        :global(.uui-input){
+            max-width: 18px;
+        }
+    }
+
+    .go-to-page-button {
+        margin-right: 36px;
+        margin-left: 3px;
+        width: 24px;
+    }
+}
\ No newline at end of file
diff --git a/app/src/demo/tables/filteredTable/FilteredTableFooter.tsx b/app/src/demo/tables/filteredTable/FilteredTableFooter.tsx
new file mode 100644
index 0000000000..4c81ccc921
--- /dev/null
+++ b/app/src/demo/tables/filteredTable/FilteredTableFooter.tsx
@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import css from "./FilteredTableFooter.scss";
+import { FlexRow, LabeledInput, PageButton, Paginator, PickerInput, TextInput } from "@epam/promo";
+import { DataTableState, useArrayDataSource } from "@epam/uui-core";
+import { ReactComponent as ArrowRightIcon_24 } from "@epam/assets/icons/common/navigation-chevron-right-18.svg";
+
+interface IFilteredTableFooterProps {
+    tableState: DataTableState;
+    setTableState: (newState: DataTableState) => void;
+    totalCount: number;
+}
+
+export const FilteredTableFooter = (props: IFilteredTableFooterProps) => {
+    const [goToPage, setGoToPage] = useState('1');
+    const totalPages = () => props.tableState.pageSize ? Math.ceil(props.totalCount / props.tableState.pageSize) : 0;
+    const goToPageHandler = () => props.setTableState({ ...props.tableState, page: +goToPage, indexToScroll: 0 });
+    const paginatorHandler = (newPage: number) => props.setTableState({ ...props.tableState, page: newPage, indexToScroll: 0 });
+
+    const itemsPerPageDataSource = useArrayDataSource({
+        items: [{ id: 40, page: "40" }, { id: 80, page: "80" }, { id: 120, page: "120" }, { id: 160, page: "160" }],
+    }, []);
+
+    useEffect(() => {
+        setItemsPerPage(40);
+    }, []);
+
+    const setGoToPageHandler = (newValue: string) => {
+        if (typeof +newValue === 'number' && !isNaN(+newValue) && +newValue <= totalPages() && +newValue > 0) {
+            setGoToPage(() => newValue);
+        }
+    };
+
+    const setItemsPerPage = (itemsPerPage: number) => {
+        props.setTableState({ ...props.tableState, page: 1, pageSize: itemsPerPage });
+        setGoToPage('1');
+    };
+
+    return (
+        <FlexRow cx={ css.paginatorWrapper } padding="24" vPadding="12" background="gray5">
+            <div className={ css.itemsPerPage }>
+                <LabeledInput size="24" label="Items per page" labelPosition="left">
+                    <PickerInput
+                        size="24"
+                        placeholder="Select items per page"
+                        dataSource={ itemsPerPageDataSource }
+                        value={ props.tableState.pageSize }
+                        onValueChange={ setItemsPerPage }
+                        getName={ item => item.page }
+                        selectionMode="single"
+                        valueType={ 'id' }
+                        sorting={ { field: 'page', direction: 'asc' } }
+                        disableClear
+                        searchPosition="none"
+                    />
+                </LabeledInput>
+            </div>
+            <div>
+                <LabeledInput size="24" label="Go to page" labelPosition="left">
+                    <TextInput
+                        cx={ css.goToPage }
+                        size="24"
+                        value={ goToPage }
+                        onValueChange={ setGoToPageHandler }
+                    />
+                </LabeledInput>
+            </div>
+            <PageButton
+                cx={ css.goToPageButton }
+                size="24"
+                icon={ ArrowRightIcon_24 }
+                onClick={ goToPageHandler }
+                fill="white"
+                color="gray50"
+            />
+            <Paginator
+                value={ props.tableState.page }
+                onValueChange={ paginatorHandler }
+                totalPages={ totalPages() }
+                size="24"
+            />
+        </FlexRow>
+    );
+};
diff --git a/app/src/demo/tables/masterDetailedTable/MasterDetailedTable.tsx b/app/src/demo/tables/masterDetailedTable/MasterDetailedTable.tsx
index ee37d0e45b..b559783bf8 100644
--- a/app/src/demo/tables/masterDetailedTable/MasterDetailedTable.tsx
+++ b/app/src/demo/tables/masterDetailedTable/MasterDetailedTable.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Person } from '@epam/uui-docs';
-import { cx, useLazyDataSource, useUuiContext, UuiContexts, ITablePreset, useTableState } from "@epam/uui-core";
+import { cx, useLazyDataSource, useUuiContext, UuiContexts, ITablePreset, useTableState, DataRowProps } from "@epam/uui-core";
 import { Presets, FlexRow } from '@epam/uui';
 import { DataTable } from '@epam/promo';
 import css from './DemoTable.scss';
@@ -39,16 +39,18 @@ export const MasterDetailedTable: React.FC = () => {
         api: request => svc.api.demo.persons(request),
     }, []);
 
+    const clickHandler = useCallback((rowProps: DataRowProps<Person, number>) => {
+        rowProps.onSelect(rowProps);
+        setIsInfoPanelOpened(true);
+    }, []);
+
 
     const view = dataSource.useView(tableStateApi.tableState, tableStateApi.setTableState, {
         rowOptions: {
             checkbox: { isVisible: true },
             isSelectable: true,
-            onClick(rowProps) {
-                rowProps.onSelect(rowProps);
-                setIsInfoPanelOpened(true);
+            onClick: clickHandler,
             },
-        },
     });
 
     return (
diff --git a/app/src/docs/examples/pickerInput/GetRowOptions.example.tsx b/app/src/docs/examples/pickerInput/GetRowOptions.example.tsx
index 1c428fbb14..36adbd9829 100644
--- a/app/src/docs/examples/pickerInput/GetRowOptions.example.tsx
+++ b/app/src/docs/examples/pickerInput/GetRowOptions.example.tsx
@@ -5,8 +5,8 @@ import { FlexCell, FlexRow, PickerInput } from "@epam/promo";
 
 export default function GetRowOptionsExample() {
     const svc = useUuiContext();
-    const [productID, setProductID] = useState<number>(null);
-    const [productsIDs, setProductsIDs] = useState<number[]>(null);
+    const [productID, setProductID] = useState<number>(3);
+    const [productsIDs, setProductsIDs] = useState<number[]>([3]);
 
     const productsDataSource = useAsyncDataSource<Product, Product['ProductID'], unknown>({
         api: () => svc.api.demo.products({}).then((r: any) => r.items),
diff --git a/app/src/docs/other/ReleaseNotes.doc.tsx b/app/src/docs/other/ReleaseNotes.doc.tsx
index 983d2aec6b..3242dcb794 100644
--- a/app/src/docs/other/ReleaseNotes.doc.tsx
+++ b/app/src/docs/other/ReleaseNotes.doc.tsx
@@ -33,8 +33,8 @@ export class ReleaseNotesDoc extends React.Component {
                 markdown: data.markdown.split('# ').filter((el: any) => el !== '').map((el: any) => '#'.concat(el)),
                 isLoading: false,
                 release: {
-                    number: releaseVersion.trim().slice(2),
-                    date: releaseDate.trim(),
+                    number: releaseVersion?.trim().slice(2),
+                    date: releaseDate?.trim(),
                 },
             });
         });
diff --git a/app/src/documents/DocumentsPage.tsx b/app/src/documents/DocumentsPage.tsx
index 4c848bf0b8..21ed152bf0 100644
--- a/app/src/documents/DocumentsPage.tsx
+++ b/app/src/documents/DocumentsPage.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { TreeNodeProps } from '@epam/uui-components';
 import { FlexRow } from '@epam/promo';
 import { AppHeader, Page, Sidebar } from '../common';
 import { svc } from '../services';
@@ -7,6 +6,8 @@ import { UUI4, UUI3 } from '../common';
 import { items, DocItem } from './structure';
 import { getQuery } from '../helpers';
 import { codesandboxService } from '../data/codesandbox/service';
+import { TreeListItem } from 'uui-components';
+import { DataRowProps } from 'uui-core';
 
 type DocsQuery = {
     id: string,
@@ -25,11 +26,11 @@ export const DocumentsPage = () => {
         redirectTo({ id: items[0].id, mode: 'doc', skin: UUI4 })
     }
 
-    const onChange = (val: TreeNodeProps) => {
-        if (val.parentId === 'components') {
-            redirectTo({ id: val.id, mode: getQuery('mode') || 'doc', skin: getQuery<DocsQuery['skin']>('skin') || UUI4, category: val.parentId });
+    const onChange = (row: DataRowProps<TreeListItem, string>) => {
+        if (row.parentId === 'components') {
+            redirectTo({ id: row.id, mode: getQuery('mode') || 'doc', skin: getQuery<DocsQuery['skin']>('skin') || UUI4, category: row.parentId });
         } else {
-            redirectTo({ id: val.id, category: val.parentId });
+            redirectTo({ id: row.id, category: row.parentId });
         }
     };
 
@@ -47,13 +48,13 @@ export const DocumentsPage = () => {
                     value={ getQuery('id') }
                     onValueChange={ onChange }
                     items={ items }
-                    getItemLink={ (item) => !item.isDropdown && {
+                    getItemLink={ (row) => !row.isFoldable && {
                         pathname: 'documents',
                         query: {
-                            id: item.id,
-                            mode: item.parentId && svc.uuiRouter.getCurrentLink().query.mode || 'doc',
-                            skin: item.parentId && svc.uuiRouter.getCurrentLink().query.skin || UUI4,
-                            category: item.parentId && item.parentId,
+                            id: row.id,
+                            mode: row.parentId && svc.uuiRouter.getCurrentLink().query.mode || 'doc',
+                            skin: row.parentId && svc.uuiRouter.getCurrentLink().query.skin || UUI4,
+                            category: row.parentId && row.parentId,
                         },
                     } }
                 />
diff --git a/app/src/sandbox/SandboxPage.tsx b/app/src/sandbox/SandboxPage.tsx
index 99fe197110..191bcc5b80 100644
--- a/app/src/sandbox/SandboxPage.tsx
+++ b/app/src/sandbox/SandboxPage.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, createElement } from 'react';
-import { TreeNodeProps } from '@epam/uui-components';
 import { FlexRow } from '@epam/promo';
 import { AppHeader, Page, Sidebar } from '../common';
 import { svc } from '../services';
@@ -12,6 +11,8 @@ import { DraftRTEDemo } from './draft-rte/DraftRTEDemo';
 import { ScrollSpyDemo } from './scroll-spy/ScrollSpyDemo';
 import { Responsive } from './responsive/Responsive';
 import { ThemeDemo } from './theme/ThemeDemo';
+import { TreeListItem } from 'uui-components';
+import { DataRowProps } from 'uui-core';
 
 export const SandboxPage = () => {
     const items = useMemo(() => [
@@ -29,7 +30,7 @@ export const SandboxPage = () => {
         svc.uuiRouter.redirect({ pathname: '/sandbox', query: { id: items[0].id } });
     }
 
-    const onChange = (val: TreeNodeProps) => {
+    const onChange = (val: DataRowProps<TreeListItem, string>) => {
         svc.uuiRouter.redirect({ pathname: '/sandbox', query: { id: val.id } });
     };
 
@@ -39,7 +40,7 @@ export const SandboxPage = () => {
                 <Sidebar
                     value={ getQuery('id') }
                     onValueChange={ onChange }
-                    getItemLink={ (item) => !item.isDropdown && {
+                    getItemLink={ (item) => !item.isFoldable && {
                         pathname: 'sandbox',
                         query: { id: item.id },
                     } }
diff --git a/app/src/sandbox/db/DbDemo.tsx b/app/src/sandbox/db/DbDemo.tsx
index d40d2095fa..f6dba4739c 100644
--- a/app/src/sandbox/db/DbDemo.tsx
+++ b/app/src/sandbox/db/DbDemo.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataSourceState, useLens, IEditable, LazyDataSource, LazyDataSourceApi, DataQueryFilter } from '@epam/uui';
+import { DataSourceState, LazyDataSource, LazyDataSourceApi, DataQueryFilter, Lens } from '@epam/uui';
 import { DbContext } from '@epam/uui-db';
 import { Person } from '@epam/uui-docs';
 import { FlexRow, FlexCell, SearchInput, FlexSpacer, Button, SuccessNotification, ErrorNotification, Text } from '@epam/loveship';
@@ -53,7 +53,8 @@ export const DbDemoImpl = () => {
         visibleCount: 30,
         sorting: [{ field: 'name' }],
     }));
-    const editable: IEditable<DataSourceState> = { value, onValueChange };
+
+    const lens = Lens.onEditable<DataSourceState>({ value, onValueChange });
 
     dbRef.jobTitlesLoader.load({});
     dbRef.departmentsLoader.load({});
@@ -67,10 +68,11 @@ export const DbDemoImpl = () => {
         getRowOptions: p => ({ checkbox: { isVisible: true } }),
         isFoldedByDefault: () => false,
     });
+
     return <div className={ css.container }>
         <FlexRow spacing='12' padding='24' vPadding='12' borderBottom={ true } >
             <FlexCell width={ 200 }>
-                <SearchInput { ...useLens(editable, b => b.prop('search')) } size='30' />
+                <SearchInput { ...lens.prop('search').toProps() } size='30' />
             </FlexCell>
             <FlexSpacer />
             <FlexCell width='auto'>
@@ -83,7 +85,7 @@ export const DbDemoImpl = () => {
                 <Button caption="Reload" onClick={ () => dataSource.clearCache() } size='30'/>
             </FlexCell>
         </FlexRow>
-        <PersonsTable { ...useLens(editable, b => b) } view={ personsDataView }/>
+        <PersonsTable { ...lens.toProps() } view={ personsDataView }/>
     </div>;
 };
 
diff --git a/app/src/sandbox/db/PersonsTable.tsx b/app/src/sandbox/db/PersonsTable.tsx
index 6994db6320..e5dd852ee1 100644
--- a/app/src/sandbox/db/PersonsTable.tsx
+++ b/app/src/sandbox/db/PersonsTable.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DataTable, DataTableRow } from '@epam/loveship';
 import { useDemoDbRef, PersonTableRecord, DemoDb } from './state';
-import { DataSourceState, IEditable, DataQueryFilter, IDataSourceView, useLens, DataRowProps } from '@epam/uui';
+import { DataSourceState, IEditable, DataQueryFilter, IDataSourceView, DataRowProps, Lens } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
 import { getColumns } from './columns';
 import { useDbView } from '@epam/uui-db';
@@ -28,7 +28,7 @@ const PersonRow = function (props: DataRowProps<Person, number>) {
 
 export const PersonsTable = (props: PersonsTableProps) => {
     const dbRef = useDemoDbRef();
-    const tableLens = useLens(props, b => b.onChange((o , n) => ({ ...n, topIndex: 0 })));
+    const tableLens = Lens.onEditable(props).onChange((o , n) => ({ ...n, topIndex: 0 }));
 
     const columnsSet = React.useMemo(() => getColumns(dbRef), []);
 
@@ -45,7 +45,7 @@ export const PersonsTable = (props: PersonsTableProps) => {
         columns={ columnsSet.personColumns }
         renderRow={ renderRow }
         selectAll={ { value: false, isDisabled: true, onValueChange: null } }
-        { ...tableLens }
+        { ...tableLens.toProps() }
         { ... props.view.getListProps() }
     />;
 };
\ No newline at end of file
diff --git a/app/src/sandbox/tablePaged/DemoTablePaged.tsx b/app/src/sandbox/tablePaged/DemoTablePaged.tsx
index 88407964ea..e45fdf0435 100644
--- a/app/src/sandbox/tablePaged/DemoTablePaged.tsx
+++ b/app/src/sandbox/tablePaged/DemoTablePaged.tsx
@@ -1,11 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import css from "./DemoTablePaged.scss";
-import { DataTable, FlexRow, Paginator,  FlexSpacer } from "@epam/promo";
+import { DataTable, FlexRow, Paginator,  FlexSpacer, Button } from "@epam/promo";
 import { DataRowOptions, DataTableState, LazyDataSourceApi, useLazyDataSource, useTableState } from "@epam/uui-core";
 import { Person } from "@epam/uui-docs";
 import { svc } from "../../services";
-import { getFilters } from "./data";
+import { getFilters } from "./filters";
 import { personColumns } from "./columns";
+import { FlexCell } from "uui-components";
 
 export const DemoTablePaged: React.FC = () => {
     const filters = useMemo(getFilters, []);
@@ -13,14 +14,14 @@ export const DemoTablePaged: React.FC = () => {
     const {tableState, setTableState} = useTableState({
         columns: personColumns,
     });
-    
+
     useEffect(() => {
         setTableState({...tableState, page: 1, pageSize: 100});
     }, []);
-    
+
     const [totalCount, setTotalCount] = useState(0);
     const [appliedFilter, setAppliedFilter] = useState<DataTableState>({});
-    
+
     const api: LazyDataSourceApi<Person, number, Person> = useCallback(async request => {
         const result = await svc.api.demo.personsPaged({
             filter: request.filter,
@@ -33,21 +34,21 @@ export const DemoTablePaged: React.FC = () => {
         result.from = 0;
         return result;
     }, []);
-    
+
     const applyFilter = useCallback(() => {
         setAppliedFilter(tableState.filter);
         setTableState({ ...tableState, indexToScroll: 0 });
     }, [tableState]);
-    
+
     // applying filter after parsing initial filter data from url
     useEffect(() => {
         applyFilter();
     }, []);
-    
+
     const dataSource = useLazyDataSource({
         api,
     }, [api]);
-    
+
     const rowOptions: DataRowOptions<Person, number> = {
         checkbox: { isVisible: true },
         isSelectable: true,
@@ -60,12 +61,12 @@ export const DemoTablePaged: React.FC = () => {
         ...tableState,
         filter: appliedFilter,
     }), [tableState, appliedFilter]);
+
     const personsDataView = dataSource.useView(viewTableState, setTableState, {
         rowOptions,
         isFoldedByDefault: () => true,
-        cascadeSelection: true,
     });
-    
+
     return (
         <div className={ css.container }>
             <DataTable
@@ -81,6 +82,9 @@ export const DemoTablePaged: React.FC = () => {
             />
 
             <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 }
@@ -90,10 +94,6 @@ export const DemoTablePaged: React.FC = () => {
                 />
                 <FlexSpacer/>
             </FlexRow>
-
-            {/*<FlexRow vPadding="12" background="white">*/}
-            {/*    <Button caption="Apply filter" onClick={ applyFilter } cx={ css.apply }/>*/}
-            {/*</FlexRow>*/}
         </div>
     );
 };
\ No newline at end of file
diff --git a/app/src/sandbox/tablePaged/data/api.ts b/app/src/sandbox/tablePaged/data/api.ts
deleted file mode 100644
index ef580958f5..0000000000
--- a/app/src/sandbox/tablePaged/data/api.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { LazyDataSourceApi } from "@epam/uui";
-import { svc } from "../../../services";
-import { PersonTableFilter, PersonTableRecord, PersonTableRecordId } from "../types";
-
-export const api: LazyDataSourceApi<PersonTableRecord, PersonTableRecordId, PersonTableFilter> = (request, ctx) => {
-    const { ids: clientIds, ...rq } = request;
-    const groupBy = rq.filter?.groupBy;
-    const ids = clientIds?.map(clientId => clientId && typeof clientId[1] === 'number' && clientId[1]);
-
-    if (groupBy && !ctx?.parent) {
-        return svc.api.demo.personGroups({
-            ...rq,
-            filter: { groupBy },
-            search: null,
-            itemsRequest: { filter: rq.filter, search: rq.search },
-            ids,
-        } as any);
-    } else {
-        const parentFilter = ctx?.parent?.id && groupBy ? { [groupBy + 'Id']: ctx.parent.id } : {};
-        const { groupBy: omitGroupBy, ...filter } = rq.filter;
-        return svc.api.demo.persons({ ...rq, filter: { ...filter, ...parentFilter }, ids });
-    }
-};
\ No newline at end of file
diff --git a/app/src/sandbox/tablePaged/data/constants.ts b/app/src/sandbox/tablePaged/data/constants.ts
deleted file mode 100644
index 08abca6174..0000000000
--- a/app/src/sandbox/tablePaged/data/constants.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ITablePreset } from '@epam/uui';
-
-const defaultPreset: ITablePreset<any> = {
-    name: 'Default',
-    id: null,
-    filter: undefined,
-    columnsConfig: undefined,
-    isReadonly: true,
-} as const;
-
-export const constants = {
-    defaultPreset,
-};
\ No newline at end of file
diff --git a/app/src/sandbox/tablePaged/data/index.ts b/app/src/sandbox/tablePaged/data/index.ts
deleted file mode 100644
index ac05e89f28..0000000000
--- a/app/src/sandbox/tablePaged/data/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./api";
-export * from "./filters";
-export * from "./constants";
\ No newline at end of file
diff --git a/app/src/sandbox/tablePaged/data/filters.ts b/app/src/sandbox/tablePaged/filters.ts
similarity index 98%
rename from app/src/sandbox/tablePaged/data/filters.ts
rename to app/src/sandbox/tablePaged/filters.ts
index 57e53b4c46..19239af30c 100644
--- a/app/src/sandbox/tablePaged/data/filters.ts
+++ b/app/src/sandbox/tablePaged/filters.ts
@@ -1,5 +1,5 @@
 import { TableFiltersConfig, LazyDataSource } from "@epam/uui-core";
-import { svc } from "../../../services";
+import { svc } from "../../services";
 
 export const getFilters = <TFilter extends Record<string, any>>(): TableFiltersConfig<TFilter>[] => {
     return [
diff --git a/app/src/sandbox/tablePaged/types.ts b/app/src/sandbox/tablePaged/types.ts
index 513f77e1c9..b1302d4ba4 100644
--- a/app/src/sandbox/tablePaged/types.ts
+++ b/app/src/sandbox/tablePaged/types.ts
@@ -1,11 +1,9 @@
 import { DataTableState, ITablePreset } from "@epam/uui";
-import { Person, PersonGroup, Location } from "@epam/uui-docs";
+import { Person } from "@epam/uui-docs";
 
-type PersonTableRecord = Person | PersonGroup | Location;
+type PersonTableRecord = Person;
 
-type PersonTableRecordId = [PersonTableRecord["__typename"], string | number];
-
-type PersonTableFilter = { [key: string]: any, groupBy?: string };
+type PersonTableFilter = Record<string, any>;
 
 interface PersonsTableState extends DataTableState {
     isFolded?: boolean;
@@ -14,4 +12,4 @@ interface PersonsTableState extends DataTableState {
 
 type ILocalStoragePresets = (Omit<ITablePreset, "isActive">)[];
 
-export { PersonTableRecord, PersonTableRecordId, PersonTableFilter, PersonsTableState, ILocalStoragePresets };
\ No newline at end of file
+export { PersonTableRecord, PersonTableFilter, PersonsTableState, ILocalStoragePresets };
\ No newline at end of file
diff --git a/app/src/sandbox/tables/PersonsTableDemo.tsx b/app/src/sandbox/tables/PersonsTableDemo.tsx
index 3ad6f4e251..3f8070aaaf 100644
--- a/app/src/sandbox/tables/PersonsTableDemo.tsx
+++ b/app/src/sandbox/tables/PersonsTableDemo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FlexRow, FlexCell, SearchInput, FlexSpacer, Text, PickerInput, Button } from '@epam/loveship';
 import { PersonsTable } from './PersonsTable';
 import { Person, PersonGroup } from '@epam/uui-docs';
-import { DataSourceState, useLens, IEditable, useArrayDataSource, useLazyDataSource, LazyDataSourceApiRequest, DataQueryFilter, LazyDataSourceApiResponse } from '@epam/uui';
+import { DataSourceState, IEditable, useArrayDataSource, useLazyDataSource, LazyDataSourceApiRequest, DataQueryFilter, LazyDataSourceApiResponse, Lens } from '@epam/uui';
 import { PersonTableFilter, PersonTableRecord, PersonTableRecordId } from './types';
 import { svc } from '../../services';
 import * as css from './PersonsTableDemo.scss';
@@ -52,7 +52,7 @@ export const PersonsTableDemo = () => {
         isFolded: true,
     }));
 
-    const editable: IEditable<DataSourceState> = { value, onValueChange };
+    const lens = Lens.onEditable<DataSourceState>({ value, onValueChange });
 
     const dataSource = useLazyDataSource<PersonTableRecord, PersonTableRecordId, PersonTableFilter>({
         api(request, ctx) {
@@ -129,14 +129,14 @@ export const PersonsTableDemo = () => {
         <div className={ css.container }>
             <FlexRow spacing='12' padding='24' vPadding='12' borderBottom={ true } >
                 <FlexCell width={ 200 }>
-                    <SearchInput { ...useLens(editable, b => b.prop('search')) } size='30' />
+                    <SearchInput { ...lens.prop('search').toProps() } size='30' />
                 </FlexCell>
                 <FlexCell width='auto'>
                     <Text size='30'>Group By:</Text>
                 </FlexCell>
                 <FlexCell width={ 130 }>
                     <PickerInput
-                        { ...useLens(editable, b => b.prop('filter').prop('groupBy')) }
+                        { ...lens.prop('filter').prop('groupBy').toProps() }
                         dataSource={ groupingDataSource }
                         selectionMode='single'
                         valueType='id'
diff --git a/changelog.md b/changelog.md
index 3d56b88d6f..9295c69d73 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,16 @@
+# 4.8.3 - 01.09.2022
+
+**What’s Fixed**
+* [PickerInput]: disabled elements in multi-picker no longer can be deleted with cross at tag in the input. Before this fix, cross icon was visible, and clicking it caused crash
+* [LazyDataSource]: Select All now selects only currently visible items. Prior the fix, all items which was loaded before (e.g. with other/no filters) was selected.
+* [useVirtual]: Improved visible range computation:
+
+  Virtual lists now adjust visible area in fixed-sized 'blocks'. E.g. topIndex, visibleCount, and from/count in LazyDataSource requests will be always divisible by Block Size. This helps to avoid cases when only several rows are requested on small scrolls. This also can help with pageNo/pageSize-oriented API. Block size defaults to 20, and configurable with `blockSize` prop.
+
+  We also render more rows above and below visible area to avoid blank areas and loading rows when scrolling at normal speed. This is also configurable with `overdrawRows` setting (defaults to 20, meaning at least 20 rows above/below the visible area are rendered)
+
+  This change also fixes the problem when lazy-loading stops, while the end of the list is not reached.
+
 # 4.8.2 - 22.08.2022
 
 **What's New**
@@ -14,7 +27,7 @@
 * Updated icon pack
 * [PickerItem]: add possibility to pass icon
 * [FiltersPanel]: add possibility to provide your own `renderRow` callback
-* [DatePicker]: add `placement` props 
+* [DatePicker]: add `placement` props
 * [DataTable]: add default 'not results found' state
 * [PickerModal]: add default 'not results found' state
 * [FilterToolbar]: small improvements and bugfixes
@@ -22,7 +35,7 @@
 
 **What’s Fixed**
 * [PickerInput]: rework styles for selected value in toggler
-* [DataTable]: fix table rerender when columns prop changed 
+* [DataTable]: fix table rerender when columns prop changed
 * [NumericInput]: don't allow '+' and 'e' symbols
 * [LinkButton]: fix focus state
 * [RangeDatePicker]: fix error when preset is `null`
@@ -50,7 +63,7 @@
 * [Badge]: fixed semitransparent hover colors
 * [Tooltip]: change tooltip logic, when the new children is passed. Fixed loop, when a lot of listeners was attached
 * [RangeDatePicker]: fix preset styles
-* [MainMenuButton]: reworked styles for dropdown items 
+* [MainMenuButton]: reworked styles for dropdown items
 
 # 4.7.1 - 06.06.2022
 
@@ -58,10 +71,10 @@
 * [Buttons and Anchors]: support SPA links opening in new window when Ctrl/Command key pressed
 
 **What’s Fixed**
-* [DropSpot]: fix dnd behavior when user drag&drop file out of drag area 
+* [DropSpot]: fix dnd behavior when user drag&drop file out of drag area
 * [PickerInput]: fix the second line tag margin in multi mode
 * [NumericInput]: hide arrows when input disabled or readonly
-* [DataTable]: added missing sizes styles for header 
+* [DataTable]: added missing sizes styles for header
 * [ErrorHandler]: return getDefaultErrorPageProps and recoveryWordings export from loveship
 * [useForm]: handle rejected promise after save
 * [Burger]: fix scroll on body when burger closes
diff --git a/epam-assets/scss/font-faces.scss b/epam-assets/scss/font-faces.scss
index f5313d22db..9ba363441a 100644
--- a/epam-assets/scss/font-faces.scss
+++ b/epam-assets/scss/font-faces.scss
@@ -102,4 +102,5 @@
         url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff') format('woff'),
         url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.otf') format('opentype'),
         url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.svg#filename') format('svg');
+    font-display: block;
 }
diff --git a/epam-promo/components/filters/FiltersToolbar.tsx b/epam-promo/components/filters/FiltersToolbar.tsx
index 9bb408fb47..a53669e9f8 100644
--- a/epam-promo/components/filters/FiltersToolbar.tsx
+++ b/epam-promo/components/filters/FiltersToolbar.tsx
@@ -60,8 +60,10 @@ const FiltersToolbarImpl = <TFilter extends object>(props: FiltersToolbarProps<T
 
     const onFiltersChange = (filters: TableFiltersConfig<TFilter>[]) => {
         const newConfig: FiltersConfig = {};
+        const newFilter: any = {};
+
         const sortedOrders = tableState.filtersConfig && sortBy(tableState.filtersConfig, f => f?.order);
-        let order: string | null = sortedOrders ? sortedOrders[sortedOrders.length - 1].order : null;
+        let order: string | null = sortedOrders?.length ? sortedOrders[sortedOrders.length - 1].order : null;
         filters.forEach(filter => {
             if (tableState.filtersConfig && tableState?.filtersConfig[filter?.columnKey]) {
                 newConfig[filter.columnKey] = tableState?.filtersConfig[filter?.columnKey];
@@ -70,11 +72,17 @@ const FiltersToolbarImpl = <TFilter extends object>(props: FiltersToolbarProps<T
                 order = newOrder;
                 newConfig[filter.columnKey] = { isVisible: true, order: newOrder };
             }
+
+            // Remove unselected filters from filter object
+            if (tableState.filter) {
+                newFilter[filter.field] = tableState.filter[filter.field];
+            }
         });
 
         setTableState({
             ...tableState,
             filtersConfig: newConfig,
+            filter: newFilter,
         });
     };
 
diff --git a/epam-promo/components/filters/FiltersToolbarItem.tsx b/epam-promo/components/filters/FiltersToolbarItem.tsx
index 57e4a616de..2b325b0119 100644
--- a/epam-promo/components/filters/FiltersToolbarItem.tsx
+++ b/epam-promo/components/filters/FiltersToolbarItem.tsx
@@ -86,7 +86,7 @@ const FiltersToolbarItemImpl = (props: FiltersToolbarItemProps) => {
                 const selection = currentValue ? currentValue?.slice(0, 2).map((i: any) => {
                     const item = view.getById(i, null);
                     isLoading = item.isLoading;
-                    return item.isLoading ? <TextPlaceholder color="gray40"/> : (props.getName ? props.getName(item) : item.value.name);
+                    return item.isLoading ? <TextPlaceholder key={ item.rowKey } color="gray40"/> : (props.getName ? props.getName(item) : item.value.name);
                 }) : ['All'];
 
                 const selectionText = isLoading ? selection : selection.join(', ');
@@ -94,7 +94,7 @@ const FiltersToolbarItemImpl = (props: FiltersToolbarItemProps) => {
             }
             case "singlePicker": {
                 const view = props.dataSource.getView({}, forceUpdate);
-                const item = currentValue && view.getById(currentValue, null);
+                const item = (currentValue !== null && currentValue !== undefined) && view.getById(currentValue, null);
                 if (!item) {
                     return { selection: 'All' };
                 }
diff --git a/epam-promo/components/filters/PresetPanel/Preset.tsx b/epam-promo/components/filters/PresetPanel/Preset.tsx
new file mode 100644
index 0000000000..6ef65feafc
--- /dev/null
+++ b/epam-promo/components/filters/PresetPanel/Preset.tsx
@@ -0,0 +1,61 @@
+import React, { useCallback, useState } from "react";
+import { DataTableState, IPresetsApi, ITablePreset } from "@epam/uui-core";
+import { TabButton } from "../../buttons";
+import { PresetActionsDropdown } from "./PresetActionsDropdown";
+import { PresetInput } from "./PresetInput";
+import { FlexCell } from "../../layout";
+
+interface IPresetProps extends Omit<IPresetsApi, 'presets'> {
+    preset: ITablePreset;
+    addPreset: () => void;
+    tableState: DataTableState;
+}
+
+export const Preset = (props: IPresetProps) => {
+    const [isRenamePreset, setIsRenamePreset] = useState<Boolean>(false);
+    const choosePresetHandler = useCallback(() => props.choosePreset(props.preset), [props]);
+
+    const cancelRenamePreset = useCallback(() => {
+        setIsRenamePreset(() => false);
+    }, []);
+
+    const setPresetForRename = useCallback(() => {
+        if (!isRenamePreset) {
+            setIsRenamePreset(() => true);
+        }
+    }, []);
+
+    const handlePresetRename = useCallback((name: string) => {
+        const newPreset: ITablePreset = {
+            ...props.preset,
+            name: name,
+        };
+        return props.updatePreset(newPreset);
+    }, []);
+
+
+    return (
+        <FlexCell key={ props.preset.id } alignSelf='center' width='auto'>
+            {
+                isRenamePreset
+                    ? <PresetInput
+                        onCancel={ cancelRenamePreset }
+                        onSuccess={ handlePresetRename }
+                        preset={ props.preset }
+                    />
+                    :
+                    <TabButton
+                        caption={ props.preset.name }
+                        onClick={ choosePresetHandler }
+                        size="60"
+                        withNotify={ props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset) }
+                        icon={ props.activePresetId === props.preset.id &&
+                            (() => <PresetActionsDropdown renamePreset={ setPresetForRename } { ...props } />)
+                    }
+                        iconPosition="right"
+                        isLinkActive={ props.activePresetId === props.preset.id }
+                    />
+            }
+        </FlexCell>
+    );
+};
diff --git a/epam-promo/components/filters/PresetPanel/PresetActionsDropdown.scss b/epam-promo/components/filters/PresetPanel/PresetActionsDropdown.scss
new file mode 100644
index 0000000000..1aa729c0cd
--- /dev/null
+++ b/epam-promo/components/filters/PresetPanel/PresetActionsDropdown.scss
@@ -0,0 +1,18 @@
+@use '../../../../node_modules/@epam/promo/assets/styles/colors' as *;
+@use '../../../../node_modules/@epam/promo/assets/styles/fonts' as *;
+
+.preset-dropdown-panel {
+    min-width: 150px;
+}
+
+.delete-row {
+    svg {
+        fill: $red-darkest;
+    }
+
+    .delete-button {
+        color: $red-darkest;
+    }
+}
+
+
diff --git a/epam-promo/components/filters/PresetPanel/PresetActionsDropdown.tsx b/epam-promo/components/filters/PresetPanel/PresetActionsDropdown.tsx
new file mode 100644
index 0000000000..afbaf607c0
--- /dev/null
+++ b/epam-promo/components/filters/PresetPanel/PresetActionsDropdown.tsx
@@ -0,0 +1,116 @@
+import React, { useCallback } from "react";
+import { IconContainer } from '@epam/uui-components';
+import css from "./PresetActionsDropdown.scss";
+import { IPresetsApi, IDropdownToggler, ITablePreset, useUuiContext, DataTableState } from "@epam/uui-core";
+import { Dropdown, DropdownMenuButton, SuccessNotification } from "../../overlays";
+import { Text } from "../../typography";
+import { ReactComponent as menuIcon } from "@epam/assets/icons/common/navigation-more_vert-18.svg";
+import { FlexRow, Panel } from "../../layout";
+import { ReactComponent as SaveInCurrentIcon } from "@epam/assets/icons/common/action-update-18.svg";
+import { ReactComponent as SaveAsNewIcon } from "@epam/assets/icons/common/save-outline-18.svg";
+import { ReactComponent as DiscardChangesIcon } from "@epam/assets/icons/common/content-edit_undo-18.svg";
+import { ReactComponent as CopyIcon } from "@epam/assets/icons/common/action-copy_content-18.svg";
+import { ReactComponent as RenameIcon } from "@epam/assets/icons/common/content-edit-18.svg";
+import { ReactComponent as CopyLinkIcon } from "@epam/assets/icons/common/content-link-18.svg";
+import { ReactComponent as DeleteIcon } from "@epam/assets/icons/common/action-deleteforever-18.svg";
+
+interface ITubButtonDropdownProps extends Omit<IPresetsApi, 'presets'> {
+    preset: ITablePreset;
+    addPreset: () => void;
+    tableState: DataTableState;
+    renamePreset: () => void;
+}
+
+export const PresetActionsDropdown = (props: ITubButtonDropdownProps) => {
+    const { uuiNotifications } = useUuiContext();
+
+    const copyUrlToClipboard = useCallback(async () => {
+        await navigator.clipboard.writeText(location.href);
+        successNotificationHandler('Link copied!');
+    }, []);
+
+    const saveInCurrent = useCallback(async (preset: ITablePreset) => {
+        const newPreset = {
+            ...preset,
+            filter: props.tableState.filter,
+            columnsConfig: props.tableState.columnsConfig,
+        };
+        await props.updatePreset(newPreset);
+        successNotificationHandler('Changes saved!');
+    }, [props.tableState.filter, props.tableState.columnsConfig]);
+
+    const successNotificationHandler = useCallback((text: string) => {
+        uuiNotifications.show((props) => (
+            <SuccessNotification { ...props } >
+                <Text size="36" font="sans" fontSize="14">{ text }</Text>
+            </SuccessNotification>
+        ), { position: 'top-right', duration: 3 }).catch(() => null);
+    }, []);
+
+    const saveInCurrentHandler = useCallback(() => {
+        saveInCurrent(props.preset);
+    }, [props.preset]);
+
+    const discardAllChangesHandler = useCallback(() => {
+        props.choosePreset(props.preset);
+    }, [props.preset]);
+
+    const duplicateHandler = useCallback(() => {
+        props.duplicatePreset(props.preset);
+    }, [props.preset]);
+
+    const deleteHandler = useCallback(async () => {
+        await props.deletePreset(props.preset);
+        if (props.activePresetId && props.activePresetId === props.preset.id) {
+            props.resetToDefault();
+        }
+    }, [props.activePresetId, props.deletePreset, props.resetToDefault, props.preset]);
+
+    const renderBody = () => {
+        return (
+            <Panel background="white" shadow={ true } cx={ css.presetDropdownPanel }>
+                { (props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset)) &&
+                    <>
+                        <FlexRow key={ `${ props.preset.id }-save-in-current` }>
+                            <DropdownMenuButton icon={ SaveInCurrentIcon } caption="Save in current" onClick={ saveInCurrentHandler }/>
+                        </FlexRow>
+                        <FlexRow key={ `${ props.preset.id }-save-as-new` }>
+                            <DropdownMenuButton icon={ SaveAsNewIcon } caption="Save as new" onClick={ props.addPreset }/>
+                        </FlexRow>
+                        <FlexRow key={ `${ props.preset.id }-discard` } borderBottom="gray40">
+                            <DropdownMenuButton icon={ DiscardChangesIcon } caption="Discard all changes" onClick={ discardAllChangesHandler  }/>
+                        </FlexRow>
+                    </>
+                }
+                <FlexRow key={ `${ props.preset.id }-duplicate` }>
+                    <DropdownMenuButton icon={ CopyIcon } caption="Duplicate" onClick={ duplicateHandler }/>
+                </FlexRow>
+                <FlexRow key={ `${ props.preset.id }-rename` }>
+                    <DropdownMenuButton icon={ RenameIcon } caption="Rename" onClick={ props.renamePreset }/>
+                </FlexRow>
+                <FlexRow borderBottom="gray40" key={ `${ props.preset.id }-copyLink` }>
+                    <DropdownMenuButton icon={ CopyLinkIcon } caption="Copy Link" onClick={ copyUrlToClipboard }/>
+                </FlexRow>
+                <FlexRow key={ `${ props.preset.id }-delete` } cx={ css.deleteRow }>
+                    <DropdownMenuButton icon={ DeleteIcon } caption="Delete" cx={ css.deleteButton } onClick={ deleteHandler }/>
+                </FlexRow>
+            </Panel>
+        );
+    };
+
+    const renderTarget = useCallback((props: IDropdownToggler) => {
+        return (
+            <IconContainer { ...props } icon={ menuIcon } />
+        );
+    }, []);
+
+    return (
+        <>
+            <Dropdown
+                renderBody={ renderBody }
+                renderTarget={ renderTarget }
+                placement="bottom"
+            />
+        </>
+    );
+};
diff --git a/epam-promo/components/filters/PresetPanel/PresetInput.scss b/epam-promo/components/filters/PresetPanel/PresetInput.scss
new file mode 100644
index 0000000000..a5aa29de47
--- /dev/null
+++ b/epam-promo/components/filters/PresetPanel/PresetInput.scss
@@ -0,0 +1,46 @@
+@use '../../../../node_modules/@epam/promo/assets/styles/colors' as *;
+@use '../../../../node_modules/@epam/promo/assets/styles/fonts' as *;
+
+.preset-input-cell {
+    margin-top: auto;
+    margin-bottom: auto;
+
+    .preset-input {
+        margin-left: 6px;
+        padding-left: 3px;
+        padding-right: 3px;
+
+        :global(.uui-icon-accept),
+        :global(.uui-icon-cancel) {
+            width: 30px;
+            height: 30px;
+            align-self: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+        }
+
+        :global(.uui-icon-accept) {
+
+            &:global(.-clickable) {
+                fill: $white;
+                background-color: $green;
+
+                &:hover {
+                    fill: $white;
+                    background-color: darken($green, 2%);
+                }
+            }
+        }
+
+        :global(.uui-icon-cancel) {
+            background-color: $gray20;
+            margin-left: 1px;
+
+            &:hover {
+                background-color: darken($gray20, 2%);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/epam-promo/components/filters/PresetPanel/PresetInput.tsx b/epam-promo/components/filters/PresetPanel/PresetInput.tsx
new file mode 100644
index 0000000000..d678dbf13c
--- /dev/null
+++ b/epam-promo/components/filters/PresetPanel/PresetInput.tsx
@@ -0,0 +1,49 @@
+import React, { useCallback, useState } from "react";
+import css from "./PresetInput.scss";
+import { TextInput } from "../../inputs";
+import { FlexCell } from "../../layout";
+import { ITablePreset } from "@epam/uui-core";
+
+interface IPresetInputProps {
+    onCancel: () => void;
+    onSuccess?: (name: string) => Promise<any>;
+    preset?: ITablePreset;
+}
+
+export const PresetInput = (props: IPresetInputProps) => {
+    const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
+
+    const cancelActionHandler = useCallback(() => {
+        setPresetCaption('');
+        props.onCancel();
+    }, [props.onCancel]);
+
+    const acceptActionHandler = useCallback(async () => {
+        if (presetCaption) {
+            await props.onSuccess(presetCaption);
+        }
+        props.onCancel();
+
+    }, [presetCaption]);
+
+    const newPresetOnBlurHandler = useCallback(() => {
+        if (presetCaption.length) {
+            return;
+        }
+        props.onCancel();
+    }, [presetCaption.length, props.onCancel]);
+
+    return (
+        <FlexCell cx={ css.presetInputCell } minWidth={ 180 }>
+            <TextInput
+                cx={ css.presetInput }
+                onValueChange={ setPresetCaption }
+                value={ presetCaption }
+                onCancel={ cancelActionHandler }
+                onAccept={ acceptActionHandler }
+                onBlur={ newPresetOnBlurHandler }
+                autoFocus
+            />
+        </FlexCell>
+    );
+};
diff --git a/epam-promo/components/filters/PresetPanel/PresetPanel.tsx b/epam-promo/components/filters/PresetPanel/PresetPanel.tsx
new file mode 100644
index 0000000000..4686540b17
--- /dev/null
+++ b/epam-promo/components/filters/PresetPanel/PresetPanel.tsx
@@ -0,0 +1,52 @@
+import React, { useCallback, useState } from "react";
+import css from "./PresetPanel.scss";
+import { FlexRow, TabButton } from "../../index";
+import { DataTableState, IPresetsApi } from "@epam/uui-core";
+import { Preset } from "./Preset";
+import { PresetInput } from "./PresetInput";
+import { ReactComponent as PlusIcon } from "@epam/assets/icons/common/action-add-12.svg";
+
+export interface IPresetsBlockProps extends IPresetsApi {
+    tableState: DataTableState;
+}
+
+export const PresetPanel = (props: IPresetsBlockProps) => {
+    const [isAddingPreset, setIsAddingPreset] = useState(false);
+
+    const setAddingPreset = useCallback(() => {
+        setIsAddingPreset(true);
+    }, []);
+
+    const cancelAddingPreset = useCallback(() => {
+        setIsAddingPreset(false);
+    }, []);
+
+    const {presets, ...presetApi} = props;
+
+    return (
+        <FlexRow spacing='12'>
+            <TabButton
+                caption='Default Preset'
+                onClick={ props.resetToDefault }
+                size="60"
+                isLinkActive={ !props.activePresetId }
+            />
+            { props.presets.map(preset => <Preset key={ preset.id } preset={ preset } addPreset={ setAddingPreset } { ...presetApi }/>) }
+            <FlexRow>
+                { !isAddingPreset
+                    ?
+                    <TabButton
+                        caption={ 'Add Preset' }
+                        onClick={ setAddingPreset }
+                        size="36"
+                        icon={ PlusIcon }
+                        iconPosition="left"
+                    />
+                    : <PresetInput
+                        onCancel={ cancelAddingPreset }
+                        onSuccess={ props.createNewPreset }
+                    /> }
+            </FlexRow>
+        </FlexRow>
+    );
+};
diff --git a/epam-promo/components/filters/PresetPanel/index.ts b/epam-promo/components/filters/PresetPanel/index.ts
new file mode 100644
index 0000000000..ebe0c1ef5a
--- /dev/null
+++ b/epam-promo/components/filters/PresetPanel/index.ts
@@ -0,0 +1 @@
+export * from './PresetPanel';
\ No newline at end of file
diff --git a/epam-promo/components/filters/index.ts b/epam-promo/components/filters/index.ts
index 749130f5e1..3baca319c1 100644
--- a/epam-promo/components/filters/index.ts
+++ b/epam-promo/components/filters/index.ts
@@ -1,2 +1,3 @@
 export * from "./FiltersToolbar";
-export * from "./FilterItemBody";
\ No newline at end of file
+export * from "./FilterItemBody";
+export * from "./PresetPanel";
\ No newline at end of file
diff --git a/epam-promo/components/inputs/docs/numericInput.doc.ts b/epam-promo/components/inputs/docs/numericInput.doc.ts
index fb2efcfd16..fd17992371 100644
--- a/epam-promo/components/inputs/docs/numericInput.doc.ts
+++ b/epam-promo/components/inputs/docs/numericInput.doc.ts
@@ -8,8 +8,8 @@ const NumericInputDoc = new DocBuilder<NumericInputProps & NumericInputMods>({ n
     .implements([iEditable, iHasPlaceholder, sizeDoc, isDisabledDoc, isReadonlyDoc, iFormatter])
     .prop('value', { examples: [{ value: 0, isDefault: true }, 111] })
     .prop('step', { examples: [5, 10, 100] })
-    .prop('min', { examples: [-10, 0, 10], isRequired: true })
-    .prop('max', { examples: [20, 50, 500], isRequired: true })
+    .prop('min', { examples: [-10, 0, 10], defaultValue: 0 })
+    .prop('max', { examples: [20, 50, 500] })
     .prop('mode', { examples: ["form", "cell"] })
     .prop('align', { examples: ["left", "right"] })
     .prop('disableArrows', { examples: [true, false] })
diff --git a/epam-promo/components/pickers/PickerToggler.tsx b/epam-promo/components/pickers/PickerToggler.tsx
index 0d3bd3f743..a7bf27e522 100644
--- a/epam-promo/components/pickers/PickerToggler.tsx
+++ b/epam-promo/components/pickers/PickerToggler.tsx
@@ -52,7 +52,6 @@ function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerP
 
     const renderItem = (row: DataRowProps<TItem, TId>) => (
         <Tag
-            isDisabled={ props.isDisabled || props.isReadonly }
             key={ row.rowKey }
             caption={ getCaption(row) }
             tabIndex={ -1 }
@@ -61,6 +60,7 @@ function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerP
                 row.onCheck?.(row);
                 e.stopPropagation();
             } }
+            isDisabled={ props.isDisabled || props.isReadonly || row?.checkbox?.isDisabled }
         />
     );
 
diff --git a/loveship/assets/styles/scss/font-faces.scss b/loveship/assets/styles/scss/font-faces.scss
index 34ea43b72e..e42b8721f4 100644
--- a/loveship/assets/styles/scss/font-faces.scss
+++ b/loveship/assets/styles/scss/font-faces.scss
@@ -95,4 +95,5 @@
         url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff') format('woff'),
         url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.otf') format('opentype'),
         url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.svg#filename') format('svg');
+    font-display: block;
 }
diff --git a/loveship/components/datePickers/DatePicker.tsx b/loveship/components/datePickers/DatePicker.tsx
index a44b5973e4..074570f60b 100644
--- a/loveship/components/datePickers/DatePicker.tsx
+++ b/loveship/components/datePickers/DatePicker.tsx
@@ -8,7 +8,7 @@ import { TextSettings } from '../../helpers/textLayout';
 import { systemIcons } from '../icons/icons';
 
 export interface DatePickerProps extends BaseDatePickerProps, SizeMod, TextSettings, EditMode {
-    format: string;
+    format?: string;
     filter?(day: Dayjs): boolean;
     renderTarget?(props: any): React.ReactNode;
     renderFooter?(): React.ReactNode;
diff --git a/loveship/components/inputs/docs/numericInput.doc.ts b/loveship/components/inputs/docs/numericInput.doc.ts
index f0c08b328e..85453fb562 100644
--- a/loveship/components/inputs/docs/numericInput.doc.ts
+++ b/loveship/components/inputs/docs/numericInput.doc.ts
@@ -8,8 +8,8 @@ const NumericInputDoc = new DocBuilder<NumericInputProps & NumericInputMods>({ n
     .implements([iEditable, iHasPlaceholder, sizeDoc, textSettingsDoc, isDisabledDoc, isReadonlyDoc, modeDoc, iFormatter])
     .prop('value', { examples: [{ value: 0, isDefault: true }, 11] })
     .prop('step', { examples: [2, 5, 10] })
-    .prop('min', { examples: [0, 10], isRequired: true })
-    .prop('max', { examples: [20, 50], isRequired: true })
+    .prop('min', { examples: [0, 10], defaultValue: 0 })
+    .prop('max', { examples: [20, 50] })
     .prop('mode', { examples: ["form", "cell"] })
     .prop('align', { examples: ["left", "right"] })
     .prop('disableArrows', { examples: [true, false] })
diff --git a/loveship/components/pickers/PickerToggler.tsx b/loveship/components/pickers/PickerToggler.tsx
index cf5566fcbc..5c2de474a3 100644
--- a/loveship/components/pickers/PickerToggler.tsx
+++ b/loveship/components/pickers/PickerToggler.tsx
@@ -51,7 +51,6 @@ function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerP
 
         return (
             <Tag
-                isDisabled={ props.isDisabled || props.isReadonly }
                 key={ row.rowKey }
                 caption={ getCaption(row) }
                 color="night300"
@@ -61,6 +60,7 @@ function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerP
                     row.onCheck?.(row);
                     e.stopPropagation();
                 } }
+                isDisabled={ props.isDisabled || props.isReadonly || row?.checkbox?.isDisabled }
             />
         );
     };
diff --git a/server/yarn.lock b/server/yarn.lock
index 28481eb037..c61800b768 100644
--- a/server/yarn.lock
+++ b/server/yarn.lock
@@ -160,6 +160,11 @@ cors@^2.8.5:
     object-assign "^4"
     vary "^1"
 
+dayjs@1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 debug@2.6.9, debug@~2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
diff --git a/uui-components/src/inputs/Checkbox.tsx b/uui-components/src/inputs/Checkbox.tsx
index cef8d35318..138254b6fc 100644
--- a/uui-components/src/inputs/Checkbox.tsx
+++ b/uui-components/src/inputs/Checkbox.tsx
@@ -26,6 +26,11 @@ export class Checkbox extends React.Component<CheckboxProps> {
     }
 
     render() {
+        let label = this.props.label;
+        if (this.props.renderLabel) {
+            label = this.props.renderLabel();
+        }
+
         return (
             <label
                 className={ cx(
@@ -62,11 +67,7 @@ export class Checkbox extends React.Component<CheckboxProps> {
                     { this.props.value && !this.props.indeterminate && <IconContainer icon={ this.props.icon } /> }
                     { this.props.indeterminate && <IconContainer icon={ this.props.indeterminateIcon } /> }
                 </div>
-                { (this.props.renderLabel || this.props.label) && (
-                    <div className={ uuiElement.inputLabel }>
-                        { this.props.renderLabel ? this.props.renderLabel() : this.props.label }
-                    </div>
-                ) }
+                { label && <div className={ uuiElement.inputLabel }>{ label }</div> }
             </label>
         );
     }
diff --git a/uui-components/src/inputs/NumericInput.tsx b/uui-components/src/inputs/NumericInput.tsx
index b29f91030f..03656b566e 100644
--- a/uui-components/src/inputs/NumericInput.tsx
+++ b/uui-components/src/inputs/NumericInput.tsx
@@ -11,8 +11,8 @@ export interface ICanBeFormatted<T> {
 }
 
 export interface NumericInputProps extends ICanFocus<HTMLInputElement>, IHasCX, IClickable, IDisableable, ICanBeFormatted<number>, IEditable<number | null>, IHasPlaceholder, ICanBeReadonly, IAnalyticableOnChange<number>, IHasRawProps<HTMLDivElement>, IHasForwardedRef<HTMLDivElement> {
-    max: number;
-    min: number;
+    max?: number;
+    min?: number;
     upIcon?: Icon;
     downIcon?: Icon;
     step?: number;
@@ -34,6 +34,8 @@ export const uuiNumericInput = {
     withoutArrows: "uui-numeric-input-without-arrows",
 } as const;
 
+const defaultMinValue = 0;
+
 export class NumericInput extends React.Component<NumericInputProps, NumericInputState> {
     static contextType = UuiContext;
     context: UuiContexts;
@@ -54,8 +56,8 @@ export class NumericInput extends React.Component<NumericInputProps, NumericInpu
 
         if (value > max) {
             return max;
-        } else if (value < min) {
-            return min;
+        } else if (value < (min || defaultMinValue)) {
+            return min || defaultMinValue;
         } else {
             return value;
         }
@@ -158,7 +160,7 @@ export class NumericInput extends React.Component<NumericInputProps, NumericInpu
                     inputMode="numeric"
                     placeholder={ this.props.placeholder || "0" }
                     onChange={ this.handleChange }
-                    min={ this.props.min || 0 }
+                    min={ this.props.min || defaultMinValue }
                     max={ this.props.max }
                     step={ this.props.step || 1 }
                     id={ this.props.id }
diff --git a/uui-components/src/layout/Tree.tsx b/uui-components/src/layout/Tree.tsx
index b5086529fa..bf7c95fc45 100644
--- a/uui-components/src/layout/Tree.tsx
+++ b/uui-components/src/layout/Tree.tsx
@@ -3,21 +3,11 @@ import {
     IHasCX,
     IHasChildren,
     IEditable,
-    TreeNode,
-    getSearchFilter,
-    IAnalyticableOnChange,
-    useUuiContext,
     useArrayDataSource,
+    DataSourceState,
+    DataRowProps,
 } from "@epam/uui-core";
 
-export interface TreeNodeProps<TItem extends TreeListItem = TreeListItem> extends TreeNode<TItem, string> {
-    data: TItem;
-    depth: number;
-    isDropdown?: boolean;
-    isOpen?: boolean;
-    onClick(): void;
-}
-
 export interface TreeListItem {
     id: string;
     data?: TreeListItem;
@@ -25,89 +15,34 @@ export interface TreeListItem {
     name?: string;
 }
 
-export interface TreeProps<TItem extends TreeListItem> extends IHasCX, IHasChildren, IEditable<string[]>, IAnalyticableOnChange<string[]> {
+export interface TreeProps<TItem extends TreeListItem> extends IHasCX, IHasChildren, IEditable<DataSourceState> {
     items: TreeListItem[];
-    renderRow(row: TreeNodeProps<TItem>): void;
+    renderRow(row: DataRowProps<TItem, string>): void;
     search?: string;
 }
 
 export function Tree<TItem extends TreeListItem>(props: TreeProps<TItem>) {
-    const context = useUuiContext();
-
     const dataSource = useArrayDataSource<TItem, string, unknown>({
         items: props.items as TItem[],
+        getId: i => i.id,
     }, [props.items]);
 
-    const [list, setList] = React.useState<TreeNodeProps<TItem>[]>([]);
-
-    const toggleValue = React.useCallback((item: TreeNode<TItem, string>) => {
-        const isUnfolded = props.value.includes(item.id);
-        if (isUnfolded) {
-            return props.value.filter((i) => i !== item.id);
-        }
-        return [...props.value, item.id];
-    }, [props]);
-
-    const toggleFolding = React.useCallback((item: TreeNode<TItem, string>) => {
-        const valueAfterToggle = toggleValue(item);
-        props.onValueChange(valueAfterToggle);
-
-        if (props.getValueChangeAnalyticsEvent) {
-            const event = props.getValueChangeAnalyticsEvent(valueAfterToggle, props.value);
-            context.uuiAnalytics.sendEvent(event);
-        }
-    }, [context.uuiAnalytics, props, toggleValue]);
-
-    const getNodes = React.useCallback((item: TreeNode<TItem, string>, depth: number) => {
-        const items: TreeNodeProps<TItem>[] = [];
-        const children: TreeNodeProps<TItem>[] = [];
-        const isUnfolded = props.value.includes(item.id);
-        const applySearch = props.search && getSearchFilter(props.search);
-        const isPassedSearch = applySearch ? applySearch([item.item.name]) : true;
-
-        if (item.children?.length) {
-            item.children.forEach((i) => children.push(...getNodes(i, depth + 1)));
-        }
-
-        if (!props.value.includes(item.id)) {
-            if (applySearch && children.length > 0) {
-                props.onValueChange([...props.value, item.id]);
-            }
-        }
-
-        if (isPassedSearch || children.length > 0) {
-            items.push({
-                ...item,
-                data: item.item,
-                depth,
-                isDropdown: item.children && !!item.children.length,
-                isOpen: isUnfolded,
-                onClick: () => toggleFolding(item),
-            });
-        }
-
-        if (item.children?.length && isUnfolded) {
-            items.push(...children);
-        }
-
-        return items;
-    }, [props, toggleFolding]);
-
-    const getListRecursive = React.useCallback(() => dataSource.rootNodes.flatMap((node) => getNodes(node, 0)), [dataSource.rootNodes, getNodes]);
+    const view = dataSource.useView(
+        { ...props.value, topIndex: 0, visibleCount: Number.MAX_SAFE_INTEGER },
+        props.onValueChange,
+        {
+            getParentId: i => i.parentId,
+            getSearchFields: i => [i.name],
+        },
+    );
 
-    React.useEffect(() => {
-        setList(getListRecursive());
-    }, [getListRecursive, props.search, props.value]);
+    const rows = view.getVisibleRows();
 
-    if (list.length === 0) return null;
+    if (rows.length === 0) return null;
 
     return (
         <>
-            { list.map(i => <React.Fragment key={ i.id }>
-                <>
-                    { props.renderRow(i) }
-                </>
-            </React.Fragment>) }
+            { rows.map(i => props.renderRow(i)) }
         </>
     );
 }
diff --git a/uui-components/src/layout/VirtualList.tsx b/uui-components/src/layout/VirtualList.tsx
index 0a7171fdb2..d1bf8781c1 100644
--- a/uui-components/src/layout/VirtualList.tsx
+++ b/uui-components/src/layout/VirtualList.tsx
@@ -50,6 +50,11 @@ export const VirtualList = React.forwardRef<ScrollbarsApi, VirtualListProps>((pr
         )
     );
 
+    const scrollBarsRef = React.useCallback(scrollbars => {
+        if (!scrollbars?.container?.firstChild) return;
+        scrollContainerRef.current = scrollbars.container.firstChild as HTMLDivElement;
+    }, []);
+
     return (
         <ScrollBars
             cx={ cx(css.scrollContainer, props.cx) }
@@ -66,10 +71,7 @@ export const VirtualList = React.forwardRef<ScrollbarsApi, VirtualListProps>((pr
                     { ...props.rawProps }
                 />
             ) }
-            ref={ scrollbars => {
-                if (!scrollbars?.container?.firstChild) return;
-                scrollContainerRef.current = scrollbars.container.firstChild as HTMLDivElement;
-            } }
+            ref={ scrollBarsRef }
         >
             { renderRows() }
         </ScrollBars>
diff --git a/uui-core/data/lenses/builders.ts b/uui-core/data/lenses/builders.ts
index 19f8823c08..6275729f0a 100644
--- a/uui-core/data/lenses/builders.ts
+++ b/uui-core/data/lenses/builders.ts
@@ -2,7 +2,7 @@ import { LensBuilder } from './LensBuilder';
 import { IEditable, ICanBeInvalid, Metadata } from '../../types';
 import { ILens } from './types';
 
-// Can't setup type inference here, as putting this here makes a cyclic type reference
+/** @deprecated This helper to be removed in future versions, as it's intended for Class-components, and very rarely used */
 export function onEditableComponent<T>(component: any): ILens<T> {
     return new LensBuilder<T, T>({
         get(big: any) { return component.props.value; },
@@ -26,6 +26,7 @@ export function onEditable<T>(editable: IEditable<T>): ILens<T> {
     });
 }
 
+/** @deprecated This helper to be removed in future versions, as it's intended for Class-components, and very rarely used */
 export function onState<T>(component: any): ILens<T> {
     return new LensBuilder<T, T>({
         get(big: any) { return component.state; },
diff --git a/uui-core/data/lenses/hooks.ts b/uui-core/data/lenses/hooks.ts
deleted file mode 100644
index e41007e3d0..0000000000
--- a/uui-core/data/lenses/hooks.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { IEditable } from '../../types';
-import { LensBuilder } from './LensBuilder';
-
-/**
- * Experimental lens hook implementation.
- * API can be changed in future.
- */
-export function useLens<TBig, TSmall>(
-    editable: IEditable<TBig>,
-    get: (b: LensBuilder<TBig, TBig>) => LensBuilder<TBig, TSmall>,
-): IEditable<TSmall> {
-    const editableRef = React.useRef<IEditable<TBig>>();
-    editableRef.current = editable;
-
-    const builder = React.useMemo(() => {
-        const rootBuilder = new LensBuilder<TBig, TBig>({
-            get(big: any) { return editableRef.current.value; },
-            set(big: any, small: any) { editableRef.current.onValueChange(small); return small; },
-            getValidationState(big: any) { return editableRef.current; },
-        });
-        return get(rootBuilder);
-    }, [editable.onValueChange]);
-
-    return builder.toProps();
-}
\ No newline at end of file
diff --git a/uui-core/data/lenses/index.ts b/uui-core/data/lenses/index.ts
index f29debd880..c984eb3018 100644
--- a/uui-core/data/lenses/index.ts
+++ b/uui-core/data/lenses/index.ts
@@ -1,4 +1,3 @@
 export * from './types';
 import * as L from './builders';
 export const Lens = L;
-export * from './hooks';
\ No newline at end of file
diff --git a/uui-core/data/processing/types.ts b/uui-core/data/processing/types.ts
index e4fb1b60a6..5ed3221ecd 100644
--- a/uui-core/data/processing/types.ts
+++ b/uui-core/data/processing/types.ts
@@ -38,6 +38,7 @@ export interface LazyDataSourceApiRequest<TItem, TId = any, TFilter = {}> extend
     page?: number;
     pageSize?: number;
     ids?: TId[];
+    totalCount?: number;
 }
 
 export interface LazyDataSourceApiResponse<TItem> {
diff --git a/uui-core/data/processing/views/BaseListView.tsx b/uui-core/data/processing/views/BaseListView.tsx
index 295f218277..02ac125298 100644
--- a/uui-core/data/processing/views/BaseListView.tsx
+++ b/uui-core/data/processing/views/BaseListView.tsx
@@ -180,9 +180,11 @@ export abstract class BaseListView<TItem, TId, TFilter> implements IDataSourceVi
         const isSelectable = rowOptions && rowOptions.isSelectable;
 
         const path = parents.map(p => ({ id: p.id, isLastChild: p.isLastChild, value: p.value }));
+        const parentId = path.length > 0 ? path[path.length - 1].id : undefined;
 
         const rowProps = {
             id,
+            parentId,
             rowKey: key,
             index,
             value: item,
diff --git a/uui-core/data/processing/views/LazyListView.ts b/uui-core/data/processing/views/LazyListView.ts
index 092be2ea56..92ceb2ebac 100644
--- a/uui-core/data/processing/views/LazyListView.ts
+++ b/uui-core/data/processing/views/LazyListView.ts
@@ -62,7 +62,7 @@ export interface LazyListViewProps<TItem, TId, TFilter> extends BaseListViewProp
      *
      * If enabled, and search is active:
      * - API will be called with parentId and parent undefined
-     * - getChildCount is ignore, all nodes are assumed to have no children
+     * - getChildCount is ignored, all nodes are assumed to have no children
      *
      * See more here: https://github.com/epam/UUI/issues/8
      */
@@ -142,7 +142,7 @@ export class LazyListView<TItem, TId, TFilter = any> extends BaseListView<TItem,
         this.isUpdatePending = false;
 
         let completeReset = false;
-        
+
         if (prevValue == null
             || prevProps == null
             || this.tree == null
@@ -300,8 +300,9 @@ export class LazyListView<TItem, TId, TFilter = any> extends BaseListView<TItem,
 
         const iterateNode = (
             node: LazyTreeList<TItem, TId>,
-            appendRows: boolean,
-            parents: DataRowProps<TItem, TId>[],
+            appendRows: boolean, // Will be false, if we are iterating folded nodes.
+                                 // We still need to iterate them to get their stats. E.g if there are any item of if any item inside is checked.
+            parents: DataRowProps<TItem, TId>[], // Parents from top to lower level
             estimatedCount: number = null,
         ) => {
             let addedCount = 0;
@@ -387,15 +388,16 @@ export class LazyListView<TItem, TId, TFilter = any> extends BaseListView<TItem,
             if (appendRows) {
                 let missingCount: number;
 
-                if (node.count != null) { // exact count known
+                // Estimate how many more nodes there are at current level, to put 'loading' placeholders.
+
+                if (node.count != null) { // Exact count known
                     missingCount = node.count - addedCount;
-                } else if (estimatedCount == null && rows.length < lastIndex) { // top-level rows, add loading rows up to lastIndex
-                    missingCount = lastIndex - rows.length;
-                } else if (estimatedCount > addedCount) {
-                    // believe getChildCount
+                } else if (estimatedCount == null && rows.length < lastIndex) { // estimatedCount = null for top-level rows only.
+                    missingCount = lastIndex - rows.length; // let's put placeholders down to the bottom of visible list
+                } else if (estimatedCount > addedCount) { // According to getChildCount (put into estimatedCount), there are more rows on this level
                     missingCount = estimatedCount - addedCount;
                 } else {
-                    // we have a bad estimate - it even less that actual items we have
+                    // 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
                     missingCount = 1;
@@ -405,6 +407,7 @@ export class LazyListView<TItem, TId, TFilter = any> extends BaseListView<TItem,
                     stats.hasMoreRows = true;
                 }
 
+                // Append loading rows, stop at lastIndex (last row visible)
                 while (index < lastIndex && missingCount > 0) {
                     const row = this.getLoadingRow('_loading_' + index, index, parents);
                     rows.push(row);
@@ -470,7 +473,9 @@ export class LazyListView<TItem, TId, TFilter = any> extends BaseListView<TItem,
             let tree = result.tree;
 
             const appendChildIds = (key: string) => {
-                const children = tree.byParentKey[key];
+                const children = key != null
+                    ? tree.byParentKey[key]
+                    : tree.items.map(i => i.item);
 
                 if (children?.length > 0) {
                     children.forEach(item => {
@@ -483,11 +488,7 @@ export class LazyListView<TItem, TId, TFilter = any> extends BaseListView<TItem,
                 }
             };
 
-            const addAllIds = () => {
-                Object.keys(tree.byKey).forEach(key => childKeys.push(key));
-            };
-
-            isRoot ? addAllIds() : appendChildIds(key);
+            appendChildIds(key);
 
             if (isChecked) {
                 !isRoot && checkedKeysSet.add(key);
@@ -608,8 +609,16 @@ export class LazyListView<TItem, TId, TFilter = any> extends BaseListView<TItem,
             exactRowsCount = this.rows.length;
             totalCount = this.tree.recursiveCount;
         }  else {
-            // We definitely have more rows to show below the last visible row. Let's tell that we have at least one more than is visible.
-            rowsCount = Math.max(this.rows.length, lastVisibleIndex + 1);
+            // 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);
         }
 
         return {
diff --git a/uui-core/data/processing/views/__tests__/LazyListView.tree.test.ts b/uui-core/data/processing/views/__tests__/LazyListView.tree.test.ts
index 38de832bd7..bd95a72f0d 100644
--- a/uui-core/data/processing/views/__tests__/LazyListView.tree.test.ts
+++ b/uui-core/data/processing/views/__tests__/LazyListView.tree.test.ts
@@ -110,7 +110,7 @@ describe('LazyListView', () => {
             { 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 recieve exact rows count here
+        ], 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();
 
@@ -134,7 +134,7 @@ describe('LazyListView', () => {
             { isLoading: true, depth: 2, indent: 3 },
             { isLoading: true, depth: 2, indent: 3 },
             { id: 200, depth: 0, indent: 1 },
-        ], 7);
+        ]);
 
         await delay();
 
@@ -145,7 +145,7 @@ describe('LazyListView', () => {
             { id: 121, depth: 2, indent: 3, isFoldable: false },
             { id: 122, depth: 2, indent: 3, isFoldable: false },
             { id: 200, depth: 0, indent: 1 },
-        ], 7);
+        ]);
 
         // Scroll down to bottom
         value.topIndex = 5;
diff --git a/uui-core/hooks/useTableState/useTableState.ts b/uui-core/hooks/useTableState/useTableState.ts
index 76c9f12de7..2dd23f63d1 100644
--- a/uui-core/hooks/useTableState/useTableState.ts
+++ b/uui-core/hooks/useTableState/useTableState.ts
@@ -130,6 +130,7 @@ export const useTableState = <TFilter = Record<string, any>>(params: IParams<TFi
 
         setPresets(prevValue => [...prevValue, newPreset]);
         choosePreset(newPreset);
+        return newPreset.id;
     }, [tableStateValue.filter, tableStateValue.columnsConfig, choosePreset]);
 
     const resetToDefault = useCallback(() => {
@@ -156,19 +157,14 @@ export const useTableState = <TFilter = Record<string, any>>(params: IParams<TFi
     }, []);
 
     const updatePreset = useCallback(async (preset: ITablePreset<TFilter>) => {
-        const newPreset = {
-            ...preset,
-            filter: tableStateValue.filter,
-            columnsConfig: tableStateValue.columnsConfig,
-        };
-        await params?.onPresetUpdate(newPreset);
+        await params?.onPresetUpdate(preset);
 
         setPresets(prevValue => {
             const newPresets = [...prevValue];
-            newPresets.splice(presets.findIndex(p => p.id === preset.id), 1, newPreset);
+            newPresets.splice(prevValue.findIndex(p => p.id === preset.id), 1, preset);
             return newPresets;
         });
-    }, [tableStateValue.filter, tableStateValue.columnsConfig]);
+    }, []);
 
     return {
         tableState: tableStateValue,
diff --git a/uui-core/hooks/useVirtualList.ts b/uui-core/hooks/useVirtualList.ts
index a7f3e79b13..69ee75699c 100644
--- a/uui-core/hooks/useVirtualList.ts
+++ b/uui-core/hooks/useVirtualList.ts
@@ -19,7 +19,23 @@ interface UseVirtualListApi<List, ScrollContainer> {
 
 interface UseVirtualListProps extends IEditable<VirtualListState> {
     rowsCount: number;
-    blockAlign?: number;
+
+    /**
+     * Virtual list will align topIndex and visibleCount to the block size.
+     * E.g. with block size = 10, even if we have rows 2 to 12 visible, the range will be aligned to 0-20
+     * This is done to not re-render rows on each scroll.
+     * When scrolling, re-render will happen only when we scroll over the next blockSize rows.
+     * Default is 20.
+     */
+    blockSize?: number;
+
+    /**
+     * Number of rows to draw before the top and after the bottom of the list.
+     * This is required to hide blank areas while scrolling.
+     * Default is 20.
+     */
+    overdrawRows?: number;
+
     onScroll?(value: Partial<UuiScrollPositionValues>): void;
 }
 
@@ -28,7 +44,8 @@ export function useVirtualList<List extends HTMLElement = any, ScrollContainer e
     value,
     rowsCount,
     onScroll,
-    blockAlign = 20,
+    blockSize = 20,
+    overdrawRows = 20,
 }: UseVirtualListProps): UseVirtualListApi<List, ScrollContainer> {
     const [estimatedHeight, setEstimatedHeight] = React.useState<number>(0);
     const [listOffset, setListOffset] = React.useState<number>();
@@ -54,29 +71,34 @@ export function useVirtualList<List extends HTMLElement = any, ScrollContainer e
         if (!scrollContainer.current || !value) return;
         const { scrollTop, clientHeight } = scrollContainer.current;
         onScroll?.(scrollContainer.current);
-        const scrollBottom = scrollTop + clientHeight - listOffset;
 
         let topIndex = 0;
-        while (topIndex < rowsCount && rowOffsets.current[Math.min(topIndex + blockAlign, rowsCount)] < scrollTop) {
-            topIndex += blockAlign;
-        }
-        let firstVisible = topIndex;
-        while ((scrollTop + listOffset) > rowOffsets.current[firstVisible]) {
-            firstVisible += 1;
+        while (topIndex < rowsCount && rowOffsets.current[topIndex] < scrollTop) {
+            topIndex += 1;
         }
+
+        topIndex = topIndex - overdrawRows; // draw more rows at the top to remove visible blank areas while scrolling up
+        topIndex = Math.floor(topIndex / blockSize) * blockSize; // Align to blockSize
+        topIndex = Math.max(0, topIndex);
+
         let bottomIndex = topIndex;
+        let scrollBottom = scrollTop + clientHeight;
         while (bottomIndex < rowsCount && rowOffsets.current[bottomIndex] < scrollBottom) {
             bottomIndex++;
         }
-        if (value.indexToScroll != null && firstVisible !== topIndex) {
-            onValueChange({ ...value, indexToScroll: null });
-        }
 
-        if (topIndex !== value.topIndex || (bottomIndex - topIndex) > value.visibleCount) {
-            const visibleCount = bottomIndex - topIndex + blockAlign * 2;
+        bottomIndex = bottomIndex + overdrawRows; // draw more rows at the bottom to remove visible blank areas while scrolling down
+        bottomIndex = Math.floor(bottomIndex / blockSize) * blockSize; // Align to block size
+        bottomIndex = Math.min(bottomIndex, rowsCount); // clamp to rowsCount
+
+        // We never reduce visible count intentionally - it can be set so a larger value intentionally.
+        // Also, reducing it can cause bouncing between two near values, causing unnecessary re-renders.
+        const visibleCount = Math.max(value.visibleCount ?? blockSize, bottomIndex - topIndex);
+
+        if (topIndex !== value.topIndex || visibleCount > value.visibleCount || value.indexToScroll != null) {
             onValueChange({ ...value, topIndex, visibleCount, indexToScroll: null });
         }
-    }, [onValueChange, blockAlign, rowOffsets.current, rowsCount, value, onScroll, scrollContainer.current]);
+    }, [onValueChange, blockSize, rowOffsets.current, rowsCount, value, onScroll, scrollContainer.current]);
 
     const updateRowHeights = React.useCallback(() => {
         if (!scrollContainer.current || !listContainer.current || listOffset == null || !value) return;
diff --git a/uui-core/types/components/datePicker/BaseDatePicker.ts b/uui-core/types/components/datePicker/BaseDatePicker.ts
index b55b29e748..eac90291ee 100644
--- a/uui-core/types/components/datePicker/BaseDatePicker.ts
+++ b/uui-core/types/components/datePicker/BaseDatePicker.ts
@@ -4,7 +4,7 @@ import { Placement } from "@popperjs/core";
 import { IAnalyticableOnChange, ICanBeReadonly, ICanFocus, IDisableable, IDropdownToggler, IEditable, IHasCX, IHasPlaceholder } from "../../props";
 
 export interface BaseDatePickerProps extends IEditable<string | null>, ICanFocus<HTMLInputElement>, IHasCX, IDisableable, IHasPlaceholder, ICanBeReadonly, IAnalyticableOnChange<string> {
-    format: string;
+    format?: string;
     filter?(day: Dayjs): boolean;
     renderTarget?(props: IDropdownToggler): ReactNode;
     iconPosition?: 'left' | 'right';
diff --git a/uui-core/types/props.ts b/uui-core/types/props.ts
index ad00ec8454..6340e11d23 100644
--- a/uui-core/types/props.ts
+++ b/uui-core/types/props.ts
@@ -147,8 +147,8 @@ export interface IModal<TResult> {
 }
 
 export interface INotification {
-    onClose(): void;
-    onSuccess(): void;
+    onClose?(): void;
+    onSuccess?(): void;
     clearTimer?(): void;
     refreshTimer?(): void;
     id: number;
diff --git a/uui-core/types/tables.ts b/uui-core/types/tables.ts
index 575cdd30af..e0fa7e64d7 100644
--- a/uui-core/types/tables.ts
+++ b/uui-core/types/tables.ts
@@ -134,6 +134,9 @@ export type DataRowProps<TItem, TId> = props.FlexRowProps & DataRowOptions<TItem
     /** The data item (TItem) row displays. Will be undefined if isLoading = true. */
     value?: TItem;
 
+    /** ID of the parent TItem */
+    parentId?: TId;
+
     /** Hierarchical path from the root node to the item (excluding the item itself) */
     path?: DataRowPathItem<TId, TItem>[];
 
@@ -215,7 +218,7 @@ export type IColumnConfig =  {
 };
 
 export type FiltersConfig = {
-    [key: string]: IFilterConfig;  
+    [key: string]: IFilterConfig;
 };
 
 export type IFilterConfig = {
@@ -273,12 +276,13 @@ export interface IPresetsApi {
     activePresetId: number | null;
     isDefaultPresetActive: boolean;
     choosePreset(preset: ITablePreset): void;
-    createNewPreset(name: string): void;
+    createNewPreset(name: string): Promise<number>;
     resetToDefault(): void;
     hasPresetChanged(preset: ITablePreset): boolean;
     duplicatePreset(preset: ITablePreset): void;
-    deletePreset(preset: ITablePreset): void;
-    updatePreset(preset: ITablePreset): void;
+    deletePreset(preset: ITablePreset): Promise<void>;
+    updatePreset(preset: ITablePreset): Promise<void>;
+    presets: ITablePreset[];
 }
 
 export interface ITableState<TFilter = Record<string, any>> extends IPresetsApi {
@@ -287,5 +291,4 @@ export interface ITableState<TFilter = Record<string, any>> extends IPresetsApi
     setFilter(filter: TFilter): void;
     setColumnsConfig(columnsConfig: ColumnsConfig): void;
     setFiltersConfig(filtersConfig: FiltersConfig): void;
-    presets: ITablePreset<TFilter>[];
 }
\ No newline at end of file
diff --git a/uui-timeline/TimelineController.ts b/uui-timeline/TimelineController.ts
index 64d8c2cc4c..5fd0e2d556 100644
--- a/uui-timeline/TimelineController.ts
+++ b/uui-timeline/TimelineController.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Viewport } from './types';
 import { msPerDay, scaleSteps } from './helpers';
-import { TimelineTransform } from './TimelineTransform';
+import { TimelineTransform } from './';
 import sortedIndex from 'lodash.sortedindex';
 import { isClientSide } from "@epam/uui-core";
 
diff --git a/uui/components/pickers/PickerToggler.tsx b/uui/components/pickers/PickerToggler.tsx
index d1a048354b..3600e5e692 100644
--- a/uui/components/pickers/PickerToggler.tsx
+++ b/uui/components/pickers/PickerToggler.tsx
@@ -62,6 +62,7 @@ function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerP
                 row.onCheck && row.onCheck(row);
                 e.stopPropagation();
             } }
+            isDisabled={ props.isDisabled || props.isReadonly || row?.checkbox?.isDisabled }
         />
     );
 
diff --git a/yarn.lock b/yarn.lock
index 614a4d1960..30c4099369 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5969,10 +5969,10 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-dayjs@^1.10.6, dayjs@^1.10.7:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
-  integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
+dayjs@1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
 
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"