From de21b8602da810231f536fc58e4a1649fc2ca6f2 Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Fri, 22 Mar 2024 14:08:16 +0200
Subject: [PATCH 01/25] [PickerTogglerTag]: made to use in PickerToggler
 renderItem by default or independently.

---
 uui-components/src/i18n.tsx                   |  2 +-
 uui-components/src/pickers/PickerToggler.tsx  | 44 ++++++++------
 .../src/pickers/hooks/usePickerInput.ts       |  8 +++
 uui/components/pickers/PickerToggler.tsx      | 60 +++++--------------
 uui/components/pickers/PickerTogglerTag.tsx   | 45 ++++++++++++++
 5 files changed, 93 insertions(+), 66 deletions(-)
 create mode 100644 uui/components/pickers/PickerTogglerTag.tsx

diff --git a/uui-components/src/i18n.tsx b/uui-components/src/i18n.tsx
index b394d9d542..9368d41917 100644
--- a/uui-components/src/i18n.tsx
+++ b/uui-components/src/i18n.tsx
@@ -10,7 +10,7 @@ export const i18n = {
         showAll: 'SHOW ALL',
     },
     pickerToggler: {
-        createItemValue: (length: number, entityName: string) => `${length} ${entityName} selected`,
+        createCollapsedName: (length: number, entityName: string) => `+ ${length} ${entityName} selected`,
     },
     pickerInput: {
         defaultPlaceholder: (entity: string) => `Please select ${entity}`,
diff --git a/uui-components/src/pickers/PickerToggler.tsx b/uui-components/src/pickers/PickerToggler.tsx
index 66e0bc1d83..e057ef045a 100644
--- a/uui-components/src/pickers/PickerToggler.tsx
+++ b/uui-components/src/pickers/PickerToggler.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { IPickerToggler, IHasIcon, IHasCX, ICanBeReadonly, Icon, uuiMod, uuiElement, uuiMarkers, DataRowProps, cx, IHasRawProps, ICanFocus, isEventTargetInsideClickable } from '@epam/uui-core';
+import { IPickerToggler, IHasIcon, IHasCX, ICanBeReadonly, Icon, uuiMod, uuiElement, uuiMarkers, cx, IHasRawProps, ICanFocus, isEventTargetInsideClickable, DataRowProps } from '@epam/uui-core';
 import { IconContainer } from '../layout';
 import css from './PickerToggler.module.scss';
 import { i18n } from '../i18n';
-import { useCallback } from 'react';
 import { getMaxItems } from './helpers';
 
 export interface PickerTogglerProps<TItem = any, TId = any>
@@ -27,6 +26,7 @@ export interface PickerTogglerProps<TItem = any, TId = any>
     * HTML ID attribute for the toggler input
     */
     id?: string;
+    collapsedNames?: string[];
 }
 
 function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId>, ref: React.ForwardedRef<HTMLElement>) {
@@ -37,7 +37,7 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
 
     React.useImperativeHandle(ref, () => toggleContainer.current, [toggleContainer.current]);
 
-    const handleClick = useCallback(
+    const handleClick = React.useCallback(
         (event: Event) => {
             if (props.isInteractedOutside(event) && inFocus) {
                 blur();
@@ -104,26 +104,32 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
 
     const renderItems = () => {
         const maxItems = getMaxItems(props.maxItems);
-        if (props.selectedRowsCount > maxItems) {
-            return props.renderItem?.({
-                value: i18n.pickerToggler.createItemValue(props.selectedRowsCount, props.entityName || ''),
-                onCheck: () => {
-                    props.onClear?.();
+
+        const multiItems = props.selection?.map((row) => {
+            const newMultiItems = { ...row,
+                caption: props.getName(row.value),
+                isCollapsed: false,
+                isDisabled: row.isDisabled,
+                onClear: () => {
+                    row.onCheck?.(row);
                     // When we delete item it disappears from the DOM and focus is passed to the Body. So in this case we have to return focus on the toggleContainer by hand.
                     toggleContainer.current?.focus();
-                },
+                } };
+            return props.renderItem?.(newMultiItems);
+        });
+
+        if (props.selectedRowsCount > maxItems) {
+            const collapsedItem = props.renderItem?.({
+                caption: i18n.pickerToggler.createCollapsedName(props.selectedRowsCount - maxItems, props.entityName || ''),
+                isCollapsed: true,
+                onClear: null,
+                isDisabled: false,
+                id: 'collapsed',
             } as any);
-        } else {
-            return props.selection?.map((row) => {
-                const newRow = { ...row,
-                    onCheck: () => {
-                        row.onCheck?.(row);
-                        // When we delete item it disappears from the DOM and focus is passed to the Body. So in this case we have to return focus on the toggleContainer by hand.
-                        toggleContainer.current?.focus();
-                    } };
-                return props.renderItem?.(newRow);
-            });
+            multiItems.push(collapsedItem);
         }
+
+        return multiItems;
     };
 
     const renderInput = () => {
diff --git a/uui-components/src/pickers/hooks/usePickerInput.ts b/uui-components/src/pickers/hooks/usePickerInput.ts
index 3c8baaa204..5f6f96925f 100644
--- a/uui-components/src/pickers/hooks/usePickerInput.ts
+++ b/uui-components/src/pickers/hooks/usePickerInput.ts
@@ -268,11 +268,18 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
         return dataSourceState.search;
     };
 
+    const getCollapsedNames = (allSelectedRow: DataRowProps<TItem, TId>[], selectedRows: DataRowProps<TItem, TId>[]) => {
+        return [...allSelectedRow.filter((a) => !selectedRows.some((b) => a.id === b.id))]
+            .map((row: { value: { name?: string } }) => row?.value?.name);
+    };
+
     const getTogglerProps = (): PickerTogglerProps<TItem, TId> => {
         const selectedRowsCount = view.getSelectedRowsCount();
         const allowedMaxItems = getMaxItems(props.maxItems);
         const itemsToTake = selectedRowsCount > allowedMaxItems ? allowedMaxItems : selectedRowsCount;
         const selectedRows = getSelectedRows(itemsToTake);
+        const allSelectedRow = getSelectedRows();
+        const collapsedNames = getCollapsedNames(allSelectedRow, selectedRows);
         const {
             isDisabled,
             autoFocus,
@@ -312,6 +319,7 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
             onBlur: props.onBlur,
             selection: selectedRows,
             selectedRowsCount,
+            collapsedNames,
             placeholder: getPlaceholder(),
             getName: (i: any) => getName(i),
             entityName: getEntityName(selectedRowsCount),
diff --git a/uui/components/pickers/PickerToggler.tsx b/uui/components/pickers/PickerToggler.tsx
index cffcb45096..9eec68d221 100644
--- a/uui/components/pickers/PickerToggler.tsx
+++ b/uui/components/pickers/PickerToggler.tsx
@@ -1,21 +1,19 @@
 import * as React from 'react';
-import { DataRowProps } from '@epam/uui-core';
-import { PickerToggler as UuiPickerToggler, PickerTogglerProps } from '@epam/uui-components';
-import { TextPlaceholder } from '../typography';
-import { systemIcons } from '../../icons/icons';
-import { Tag } from '../widgets';
 import * as types from '../types';
-import { getMaxItems } from './helpers';
+import { PickerToggler as UuiPickerToggler, PickerTogglerProps } from '@epam/uui-components';
+import { DataRowProps } from '@epam/uui-core';
+import { PickerTogglerTag, PickerTogglerTagProps } from './PickerTogglerTag';
 import css from './PickerToggler.module.scss';
+import { systemIcons } from '../../icons/icons';
 
 const defaultSize = '36';
 const defaultMode = types.EditMode.FORM;
 
 export interface PickerTogglerMods extends types.IHasEditMode {
     /**
-    * Defines component size
-    * @default 36
-    */
+     * Defines component size
+     * @default 36
+     */
     size?: '24' | '30' | '36' | '42' | '48';
 }
 
@@ -28,43 +26,13 @@ function applyPickerTogglerMods(mods: PickerTogglerMods) {
 }
 
 function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>) {
-    const getPickerTogglerButtonSize = (propSize: types.ControlSize) => {
-        switch (propSize) {
-            case '48':
-                return '42';
-            case '42':
-                return '36';
-            case '36':
-                return '30';
-            case '30':
-                return '24';
-            case '24':
-                return '18';
-        }
-    };
-
-    const getCaption = (row: DataRowProps<TItem, TId>) => {
-        const maxItems = getMaxItems(props.maxItems);
-
-        if (row.isLoading) {
-            return <TextPlaceholder />;
-        } else if (!props.getName || props.selectedRowsCount > maxItems) {
-            return row.value;
-        } else {
-            return props.getName(row.value);
-        }
-    };
-
-    const renderItem = (row: DataRowProps<TItem, TId>) => (
-        <Tag
-            key={ row.rowKey }
-            caption={ getCaption(row) }
-            tabIndex={ -1 }
-            size={ props.size ? getPickerTogglerButtonSize(props.size) : '30' }
-            onClear={ () => {
-                row.onCheck?.(row);
-            } }
-            isDisabled={ props.isDisabled || props.isReadonly || row?.checkbox?.isDisabled }
+    const renderItem = (itemProps: DataRowProps<TItem, TId> & PickerTogglerTagProps) => (
+        <PickerTogglerTag
+            { ...itemProps }
+            key={ itemProps.id as string }
+            size={ props.size }
+            collapsedNames={ props.collapsedNames?.join(', ') }
+            isDisabled={ props.isDisabled || props.isReadonly || itemProps.isDisabled }
         />
     );
 
diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
new file mode 100644
index 0000000000..aa98884a3e
--- /dev/null
+++ b/uui/components/pickers/PickerTogglerTag.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import * as types from '../types';
+import { Tag, TagProps } from '../widgets';
+import { Tooltip } from '../overlays';
+
+export interface PickerTogglerTagProps extends TagProps {
+    size?: types.ControlSize;
+    collapsedNames?: string;
+    isCollapsed?: boolean;
+}
+
+const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size'] => {
+    switch (propSize) {
+        case '48':
+            return '42';
+        case '42':
+            return '36';
+        case '36':
+            return '30';
+        case '30':
+            return '24';
+        case '24':
+            return '18';
+        default:
+            return '30';
+    }
+};
+
+export function PickerTogglerTag(props: PickerTogglerTagProps) {
+    const tagProps = {
+        ...props,
+        tabIndex: -1,
+        size: getPickerTogglerButtonSize(props.size),
+    };
+
+    if (props.isCollapsed && props.collapsedNames?.length) {
+        return (
+            <Tooltip content={ props.collapsedNames } openDelay={ 400 }>
+                <Tag { ...tagProps } />
+            </Tooltip>
+        );
+    }
+
+    return <Tag { ...tagProps } />;
+}

From 0f206028390c4a3307a6eb10217cc1b3d987d3d4 Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Sat, 23 Mar 2024 08:50:12 +0200
Subject: [PATCH 02/25] [PickerTogglerTag]: PickerTogglerProps in progress

---
 app/src/sandbox/SandboxPage.tsx               |  2 +
 .../pickerTogglerTag/PickerTogglerTagDemo.tsx | 58 +++++++++++++++++++
 uui-components/src/pickers/PickerToggler.tsx  |  5 +-
 .../src/pickers/hooks/usePickerInput.ts       |  8 ---
 uui/components/pickers/PickerInput.tsx        |  4 +-
 uui/components/pickers/PickerToggler.tsx      |  7 +--
 uui/components/pickers/PickerTogglerTag.tsx   | 25 ++++----
 7 files changed, 83 insertions(+), 26 deletions(-)
 create mode 100644 app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx

diff --git a/app/src/sandbox/SandboxPage.tsx b/app/src/sandbox/SandboxPage.tsx
index 458dd8877d..b9f530f2cb 100644
--- a/app/src/sandbox/SandboxPage.tsx
+++ b/app/src/sandbox/SandboxPage.tsx
@@ -23,6 +23,7 @@ import { ProjectTasksDemo } from './tasks/ProjectTasksDemo';
 import { RichTextEditorDemo } from './RTE/rteDemo';
 import { TableColumnConfigModalTest } from './tableColConfigModal/TableColumnConfigModalTest';
 import { PalettePage } from './tokens/palette/palettePage';
+import { PickerTogglerTagDemo } from './pickerTogglerTag/PickerTogglerTagDemo';
 
 export function SandboxPage() {
     const items = useMemo(
@@ -46,6 +47,7 @@ export function SandboxPage() {
             { id: 'tagInput', name: 'Tag Input', component: TagInputDemo },
             { id: 'tokens', name: 'Tokens' },
             { parentId: 'tokens', id: 'tokensPalette', name: 'Palette', component: PalettePage },
+            { id: 'pickerTogglerTag', name: 'PickerTogglerTag', component: PickerTogglerTagDemo },
         ],
         [],
     );
diff --git a/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx b/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
new file mode 100644
index 0000000000..aad39154ff
--- /dev/null
+++ b/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
+import { FlexCell, FlexRow, LabeledInput, NumericInput, PickerInput } from '@epam/uui';
+import { Location } from '@epam/uui-docs';
+
+const cascadeSelectionModes: Array<{ id: 'explicit' | 'implicit'; caption: string }> = [
+    {
+        id: 'explicit',
+        caption: 'Explicit cascade selection',
+    }, {
+        id: 'implicit',
+        caption: 'Implicit cascade selection',
+    },
+];
+
+export function PickerTogglerTagDemo() {
+    const svc = useUuiContext();
+    const [maxItems, setMaxItems] = useState(null);
+    const [value, onValueChange] = useState<string[]>();
+    const [cascadeSelection] = useState(cascadeSelectionModes[0].id);
+
+    const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
+        {
+            api: (request, ctx) => {
+                const { search } = request;
+                // and since parentId is meaningful value, it is required to exclude it from the filter.
+                const filter = search ? {} : { parentId: ctx?.parentId };
+                return svc.api.demo.locations({ ...request, search, filter });
+            },
+            getId: (i) => i.id,
+            getParentId: (i) => i.parentId,
+            getChildCount: (l) => l.childCount,
+        },
+        [],
+    );
+
+    return (
+        <FlexCell width={ 370 }>
+            <FlexRow margin="12">
+                <LabeledInput label="Set maxItem">
+                    <NumericInput value={ maxItems } onValueChange={ setMaxItems } />
+                </LabeledInput>
+            </FlexRow>
+            <FlexRow margin="12">
+                <PickerInput
+                    dataSource={ dataSource }
+                    value={ value }
+                    onValueChange={ onValueChange }
+                    entityName="location"
+                    selectionMode="multi"
+                    valueType="id"
+                    cascadeSelection={ cascadeSelection }
+                    maxItems={ maxItems }
+                />
+            </FlexRow>
+        </FlexCell>
+    );
+}
diff --git a/uui-components/src/pickers/PickerToggler.tsx b/uui-components/src/pickers/PickerToggler.tsx
index e057ef045a..80618149f4 100644
--- a/uui-components/src/pickers/PickerToggler.tsx
+++ b/uui-components/src/pickers/PickerToggler.tsx
@@ -26,7 +26,6 @@ export interface PickerTogglerProps<TItem = any, TId = any>
     * HTML ID attribute for the toggler input
     */
     id?: string;
-    collapsedNames?: string[];
 }
 
 function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId>, ref: React.ForwardedRef<HTMLElement>) {
@@ -106,7 +105,9 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
         const maxItems = getMaxItems(props.maxItems);
 
         const multiItems = props.selection?.map((row) => {
-            const newMultiItems = { ...row,
+            const newMultiItems = {
+                ...row,
+                rowProps: row,
                 caption: props.getName(row.value),
                 isCollapsed: false,
                 isDisabled: row.isDisabled,
diff --git a/uui-components/src/pickers/hooks/usePickerInput.ts b/uui-components/src/pickers/hooks/usePickerInput.ts
index 5f6f96925f..3c8baaa204 100644
--- a/uui-components/src/pickers/hooks/usePickerInput.ts
+++ b/uui-components/src/pickers/hooks/usePickerInput.ts
@@ -268,18 +268,11 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
         return dataSourceState.search;
     };
 
-    const getCollapsedNames = (allSelectedRow: DataRowProps<TItem, TId>[], selectedRows: DataRowProps<TItem, TId>[]) => {
-        return [...allSelectedRow.filter((a) => !selectedRows.some((b) => a.id === b.id))]
-            .map((row: { value: { name?: string } }) => row?.value?.name);
-    };
-
     const getTogglerProps = (): PickerTogglerProps<TItem, TId> => {
         const selectedRowsCount = view.getSelectedRowsCount();
         const allowedMaxItems = getMaxItems(props.maxItems);
         const itemsToTake = selectedRowsCount > allowedMaxItems ? allowedMaxItems : selectedRowsCount;
         const selectedRows = getSelectedRows(itemsToTake);
-        const allSelectedRow = getSelectedRows();
-        const collapsedNames = getCollapsedNames(allSelectedRow, selectedRows);
         const {
             isDisabled,
             autoFocus,
@@ -319,7 +312,6 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
             onBlur: props.onBlur,
             selection: selectedRows,
             selectedRowsCount,
-            collapsedNames,
             placeholder: getPlaceholder(),
             getName: (i: any) => getName(i),
             entityName: getEntityName(selectedRowsCount),
diff --git a/uui/components/pickers/PickerInput.tsx b/uui/components/pickers/PickerInput.tsx
index 19712831c3..04b093fa90 100644
--- a/uui/components/pickers/PickerInput.tsx
+++ b/uui/components/pickers/PickerInput.tsx
@@ -14,7 +14,9 @@ import { PickerItem } from './PickerItem';
 const pickerHeight = 300;
 const pickerWidth = 360;
 
-export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId>;
+export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {
+    renderTag?: (props: DataRowProps<TItem, TId>) => React.ReactNode;
+};
 
 function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...props }: PickerInputProps<TItem, TId>, ref: React.ForwardedRef<HTMLElement>) {
     const toggleModalOpening = () => {
diff --git a/uui/components/pickers/PickerToggler.tsx b/uui/components/pickers/PickerToggler.tsx
index 9eec68d221..baf0dc579a 100644
--- a/uui/components/pickers/PickerToggler.tsx
+++ b/uui/components/pickers/PickerToggler.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as types from '../types';
 import { PickerToggler as UuiPickerToggler, PickerTogglerProps } from '@epam/uui-components';
-import { DataRowProps } from '@epam/uui-core';
 import { PickerTogglerTag, PickerTogglerTagProps } from './PickerTogglerTag';
 import css from './PickerToggler.module.scss';
 import { systemIcons } from '../../icons/icons';
@@ -26,12 +25,12 @@ function applyPickerTogglerMods(mods: PickerTogglerMods) {
 }
 
 function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>) {
-    const renderItem = (itemProps: DataRowProps<TItem, TId> & PickerTogglerTagProps) => (
+    const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => (
         <PickerTogglerTag
             { ...itemProps }
-            key={ itemProps.id as string }
+            rowProps={ itemProps.rowProps }
+            key={ itemProps.rowProps.id as string }
             size={ props.size }
-            collapsedNames={ props.collapsedNames?.join(', ') }
             isDisabled={ props.isDisabled || props.isReadonly || itemProps.isDisabled }
         />
     );
diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
index aa98884a3e..3940d61b0e 100644
--- a/uui/components/pickers/PickerTogglerTag.tsx
+++ b/uui/components/pickers/PickerTogglerTag.tsx
@@ -2,12 +2,17 @@ import * as React from 'react';
 import * as types from '../types';
 import { Tag, TagProps } from '../widgets';
 import { Tooltip } from '../overlays';
+import { DataRowProps } from '@epam/uui-core';
 
-export interface PickerTogglerTagProps extends TagProps {
+export type PickerTogglerTagProps<TItem, TId> = TagProps & DataRowProps<TItem, TId>& {
+    /** Defines component size */
     size?: types.ControlSize;
-    collapsedNames?: string;
+    /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */
     isCollapsed?: boolean;
-}
+    withTooltip?: boolean;
+    tooltipInfo?: string;
+    rowProps?: DataRowProps<TItem, TId>,
+};
 
 const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size'] => {
     switch (propSize) {
@@ -26,20 +31,18 @@ const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size
     }
 };
 
-export function PickerTogglerTag(props: PickerTogglerTagProps) {
+export function PickerTogglerTag(props: PickerTogglerTagProps<any, any>) {
     const tagProps = {
         ...props,
         tabIndex: -1,
         size: getPickerTogglerButtonSize(props.size),
     };
 
-    if (props.isCollapsed && props.collapsedNames?.length) {
-        return (
-            <Tooltip content={ props.collapsedNames } openDelay={ 400 }>
+    return props.withTooltip && !props.isCollapsed
+        ? (
+            <Tooltip content={ props.tooltipInfo } openDelay={ 400 }>
                 <Tag { ...tagProps } />
             </Tooltip>
-        );
-    }
-
-    return <Tag { ...tagProps } />;
+        )
+        : <Tag { ...tagProps } />;
 }

From 0cd6d1a54aa2a12b4aab77eb06c58f3d80c76f14 Mon Sep 17 00:00:00 2001
From: IhorKorenets <vik753@gmail.com>
Date: Sat, 23 Mar 2024 18:44:52 +0200
Subject: [PATCH 03/25] [PickerInput]: added renderTag property

---
 .../pickerTogglerTag/PickerTogglerTagDemo.tsx     | 12 +++++++++++-
 uui-components/src/pickers/PickerToggler.tsx      |  3 +--
 uui/components/pickers/PickerInput.tsx            | 14 ++++++++++----
 uui/components/pickers/PickerToggler.tsx          |  4 ++--
 uui/components/pickers/PickerTogglerTag.tsx       | 15 ++++++++-------
 uui/components/pickers/index.ts                   |  1 +
 6 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx b/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
index aad39154ff..af33c913c1 100644
--- a/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
+++ b/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
-import { FlexCell, FlexRow, LabeledInput, NumericInput, PickerInput } from '@epam/uui';
+import { FlexCell, FlexRow, LabeledInput, NumericInput, PickerInput, PickerTogglerTag } from '@epam/uui';
 import { Location } from '@epam/uui-docs';
+import { ReactComponent as myIcon } from '@epam/assets/icons/action-account-fill.svg';
 
 const cascadeSelectionModes: Array<{ id: 'explicit' | 'implicit'; caption: string }> = [
     {
@@ -51,6 +52,15 @@ export function PickerTogglerTagDemo() {
                     valueType="id"
                     cascadeSelection={ cascadeSelection }
                     maxItems={ maxItems }
+                    renderTag={ (props) => (
+                        <PickerTogglerTag
+                            { ...props }
+                            key={ props.isCollapsed ? 'collapsed' : props.rowProps?.id as string }
+                            color="info"
+                            tooltipContent={ !props.isCollapsed && `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }
+                            icon={ !props.isCollapsed && myIcon }
+                        />
+                    ) }
                 />
             </FlexRow>
         </FlexCell>
diff --git a/uui-components/src/pickers/PickerToggler.tsx b/uui-components/src/pickers/PickerToggler.tsx
index 80618149f4..7dbc7db2c8 100644
--- a/uui-components/src/pickers/PickerToggler.tsx
+++ b/uui-components/src/pickers/PickerToggler.tsx
@@ -123,9 +123,8 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
             const collapsedItem = props.renderItem?.({
                 caption: i18n.pickerToggler.createCollapsedName(props.selectedRowsCount - maxItems, props.entityName || ''),
                 isCollapsed: true,
-                onClear: null,
                 isDisabled: false,
-                id: 'collapsed',
+                onClear: null,
             } as any);
             multiItems.push(collapsedItem);
         }
diff --git a/uui/components/pickers/PickerInput.tsx b/uui/components/pickers/PickerInput.tsx
index 04b093fa90..a215705a82 100644
--- a/uui/components/pickers/PickerInput.tsx
+++ b/uui/components/pickers/PickerInput.tsx
@@ -10,12 +10,13 @@ import { DataPickerBody } from './DataPickerBody';
 import { DataPickerRow } from './DataPickerRow';
 import { DataPickerFooter } from './DataPickerFooter';
 import { PickerItem } from './PickerItem';
+import { PickerTogglerTagProps } from './PickerTogglerTag';
 
 const pickerHeight = 300;
 const pickerWidth = 360;
 
 export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {
-    renderTag?: (props: DataRowProps<TItem, TId>) => React.ReactNode;
+    renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;
 };
 
 function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...props }: PickerInputProps<TItem, TId>, ref: React.ForwardedRef<HTMLElement>) {
@@ -68,7 +69,12 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
     };
 
     const renderTarget = (targetProps: IDropdownToggler & PickerTogglerProps<TItem, TId>) => {
-        const renderTargetFn = props.renderToggler || ((props) => <PickerToggler { ...props } />);
+        const renderTargetFn = props.renderToggler || ((pickerTogglerProps) => (
+            <PickerToggler
+                { ...pickerTogglerProps }
+                renderItem={ props.renderTag ? (renderItemProps) => props.renderTag(renderItemProps) : null }
+            />
+        ));
 
         return (
             <IEditableDebouncer
@@ -108,7 +114,7 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
             .join(' / ');
     };
 
-    const renderItem = (item: TItem, rowProps: DataRowProps<TItem, TId>, dsState: DataSourceState) => {
+    const renderRowItem = (item: TItem, rowProps: DataRowProps<TItem, TId>, dsState: DataSourceState) => {
         const { flattenSearchResults } = view.getConfig();
 
         return (
@@ -132,7 +138,7 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
                 key={ rowProps.rowKey }
                 size={ getRowSize() }
                 padding={ props.editMode === 'modal' ? '24' : '12' }
-                renderItem={ (item, itemProps) => renderItem(item, itemProps, dsState) }
+                renderItem={ (item, itemProps) => renderRowItem(item, itemProps, dsState) }
             />
         );
     };
diff --git a/uui/components/pickers/PickerToggler.tsx b/uui/components/pickers/PickerToggler.tsx
index baf0dc579a..936c987512 100644
--- a/uui/components/pickers/PickerToggler.tsx
+++ b/uui/components/pickers/PickerToggler.tsx
@@ -24,12 +24,12 @@ function applyPickerTogglerMods(mods: PickerTogglerMods) {
     ];
 }
 
-function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>) {
+function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>): JSX.Element {
     const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => (
         <PickerTogglerTag
             { ...itemProps }
             rowProps={ itemProps.rowProps }
-            key={ itemProps.rowProps.id as string }
+            key={ itemProps.isCollapsed ? 'collapsed' : itemProps.rowProps?.id as string }
             size={ props.size }
             isDisabled={ props.isDisabled || props.isReadonly || itemProps.isDisabled }
         />
diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
index 3940d61b0e..60df9f4e56 100644
--- a/uui/components/pickers/PickerTogglerTag.tsx
+++ b/uui/components/pickers/PickerTogglerTag.tsx
@@ -4,14 +4,15 @@ import { Tag, TagProps } from '../widgets';
 import { Tooltip } from '../overlays';
 import { DataRowProps } from '@epam/uui-core';
 
-export type PickerTogglerTagProps<TItem, TId> = TagProps & DataRowProps<TItem, TId>& {
+export type PickerTogglerTagProps<TItem, TId> = TagProps & {
     /** Defines component size */
     size?: types.ControlSize;
     /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */
     isCollapsed?: boolean;
-    withTooltip?: boolean;
-    tooltipInfo?: string;
-    rowProps?: DataRowProps<TItem, TId>,
+    /** Defines content for tooltip */
+    tooltipContent?: string;
+    /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */
+    rowProps?: DataRowProps<TItem, TId>;
 };
 
 const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size'] => {
@@ -31,16 +32,16 @@ const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size
     }
 };
 
-export function PickerTogglerTag(props: PickerTogglerTagProps<any, any>) {
+export function PickerTogglerTag(props: PickerTogglerTagProps<any, any>): JSX.Element {
     const tagProps = {
         ...props,
         tabIndex: -1,
         size: getPickerTogglerButtonSize(props.size),
     };
 
-    return props.withTooltip && !props.isCollapsed
+    return (props.tooltipContent)
         ? (
-            <Tooltip content={ props.tooltipInfo } openDelay={ 400 }>
+            <Tooltip content={ props.tooltipContent } openDelay={ 400 }>
                 <Tag { ...tagProps } />
             </Tooltip>
         )
diff --git a/uui/components/pickers/index.ts b/uui/components/pickers/index.ts
index 6f6073a0b8..056b83e2ea 100644
--- a/uui/components/pickers/index.ts
+++ b/uui/components/pickers/index.ts
@@ -9,4 +9,5 @@ export * from './PickerList';
 export * from './PickerListItem';
 export * from './PickerModal';
 export * from './PickerToggler';
+export * from './PickerTogglerTag';
 export * from './highlight';

From e82dff966b57dda37cc7a1a23c26d30e2b8bf57c Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Mon, 25 Mar 2024 16:00:27 +0200
Subject: [PATCH 04/25] [PickerTogglerTag]: fixed test for new realisation of
 maxItems prop

---
 .../pickerTogglerTag/PickerTogglerTagDemo.tsx |  42 +-
 public/docs/docsGenOutput/docsGenOutput.d.ts  |   1 +
 public/docs/docsGenOutput/docsGenOutput.json  | 538 +++++++++++++++++-
 .../pickers/__tests__/PickerInput.test.tsx    |   7 +-
 4 files changed, 566 insertions(+), 22 deletions(-)

diff --git a/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx b/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
index af33c913c1..3278754710 100644
--- a/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
+++ b/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
@@ -52,15 +52,39 @@ export function PickerTogglerTagDemo() {
                     valueType="id"
                     cascadeSelection={ cascadeSelection }
                     maxItems={ maxItems }
-                    renderTag={ (props) => (
-                        <PickerTogglerTag
-                            { ...props }
-                            key={ props.isCollapsed ? 'collapsed' : props.rowProps?.id as string }
-                            color="info"
-                            tooltipContent={ !props.isCollapsed && `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }
-                            icon={ !props.isCollapsed && myIcon }
-                        />
-                    ) }
+                    renderTag={ (props) => {
+                        return (
+                            <PickerTogglerTag
+                                { ...props }
+                                key={ props.isCollapsed ? 'collapsed' : props.rowProps?.id as string }
+                                tooltipContent={ !props.isCollapsed && `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }
+                                icon={ !props.isCollapsed && myIcon }
+                            />
+                        );
+
+                        // if (props.isCollapsed) {
+                        //     return (
+                        //         <Button
+                        //             { ...props }
+                        //             size="30"
+                        //             key="collapsed"
+                        //             color="secondary"
+                        //         />
+                        //     );
+                        // } else {
+                        //     return (
+                        //         <Tooltip content={ `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }>
+                        //             <Button
+                        //                 { ...props }
+                        //                 size="30"
+                        //                 key={ props.rowProps?.id as string }
+                        //                 color="accent"
+                        //                 icon={ myIcon }
+                        //             />
+                        //         </Tooltip>
+                        //     );
+                        // }
+                    } }
                 />
             </FlexRow>
         </FlexCell>
diff --git a/public/docs/docsGenOutput/docsGenOutput.d.ts b/public/docs/docsGenOutput/docsGenOutput.d.ts
index 5a27a068a9..78f2ecfa6b 100644
--- a/public/docs/docsGenOutput/docsGenOutput.d.ts
+++ b/public/docs/docsGenOutput/docsGenOutput.d.ts
@@ -341,6 +341,7 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' |
 '@epam/uui:PickerModalProps' |
 '@epam/uui:PickerPart' |
 '@epam/uui:PickerTogglerMods' |
+'@epam/uui:PickerTogglerTagProps' |
 '@epam/uui:PresetsPanelProps' |
 '@epam/uui:ProgressBarProps' |
 '@epam/uui:RadioGroupItem' |
diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
index 085d5d27d7..fdb1880388 100644
--- a/public/docs/docsGenOutput/docsGenOutput.json
+++ b/public/docs/docsGenOutput/docsGenOutput.json
@@ -72057,9 +72057,11 @@
    "details": {
     "kind": 265,
     "typeValue": {
-     "raw": "SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable<TId> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'single'; valueType: 'entity'; } & IEditable<TItem> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable<TId[]> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable<TItem[]> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; }",
+     "raw": "SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable<TId> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'single'; valueType: 'entity'; } & IEditable<TItem> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable<TId[]> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable<TItem[]> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; }",
      "print": [
-      "type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId>;"
+      "type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {",
+      "    renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;",
+      "};"
      ]
     },
     "props": [
@@ -72992,6 +72994,17 @@
       "from": "@epam/uui-components:PickerInputBaseProps",
       "required": false
      },
+     {
+      "uid": "renderTag",
+      "name": "renderTag",
+      "typeValue": {
+       "raw": "(props: PickerTogglerTagProps<TItem, TId>) => JSX.Element"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "required": false
+     },
      {
       "uid": "valueType_2",
       "name": "valueType",
@@ -76350,9 +76363,9 @@
      "print": [
       "interface PickerTogglerMods extends types.IHasEditMode {",
       "    /**",
-      "    * Defines component size",
-      "    * @default 36",
-      "    */",
+      "     * Defines component size",
+      "     * @default 36",
+      "     */",
       "    size?: '24' | '30' | '36' | '42' | '48';",
       "}"
      ]
@@ -76414,6 +76427,513 @@
     "propsFromUnion": false
    }
   },
+  "@epam/uui:PickerTogglerTagProps": {
+   "summary": {
+    "module": "@epam/uui",
+    "typeName": {
+     "name": "PickerTogglerTagProps",
+     "nameFull": "PickerTogglerTagProps<TItem, TId>"
+    },
+    "src": "uui/components/pickers/PickerTogglerTag.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "PickerTogglerTagProps<TItem, TId>",
+     "print": [
+      "type PickerTogglerTagProps<TItem, TId> = TagProps & {",
+      "    /** Defines component size */",
+      "    size?: types.ControlSize;",
+      "    /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */",
+      "    isCollapsed?: boolean;",
+      "    /** Defines content for tooltip */",
+      "    tooltipContent?: string;",
+      "    /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */",
+      "    rowProps?: DataRowProps<TItem, TId>;",
+      "};"
+     ]
+    },
+    "props": [
+     {
+      "uid": "onClick",
+      "name": "onClick",
+      "comment": {
+       "raw": [
+        "Called when component is clicked"
+       ]
+      },
+      "typeValue": {
+       "raw": "(e?: any) => void"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "from": "@epam/uui-core:IClickable",
+      "required": false
+     },
+     {
+      "uid": "clickAnalyticsEvent",
+      "name": "clickAnalyticsEvent",
+      "comment": {
+       "raw": [
+        "An analytics event to send (via AnalyticsContext) when component is clicked.",
+        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+       ]
+      },
+      "typeValue": {
+       "raw": "null | { [key: string]: any; name: string; }"
+      },
+      "from": "@epam/uui-core:IAnalyticableClick",
+      "required": false
+     },
+     {
+      "uid": "tabIndex",
+      "name": "tabIndex",
+      "comment": {
+       "raw": [
+        "Controls the order of keyboard navigation between components"
+       ]
+      },
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "@epam/uui-core:IHasTabIndex",
+      "required": false
+     },
+     {
+      "uid": "isDisabled",
+      "name": "isDisabled",
+      "comment": {
+       "raw": [
+        "Disable editing, and visually de-emphasize value of the component"
+       ]
+      },
+      "typeValue": {
+       "raw": "boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "from": "@epam/uui-core:IDisableable",
+      "required": false
+     },
+     {
+      "uid": "cx",
+      "name": "cx",
+      "comment": {
+       "raw": [
+        "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details"
+       ]
+      },
+      "typeValue": {
+       "raw": "null | string | number | boolean | ClassDictionary | ClassArray"
+      },
+      "typeValueRef": "@epam/uui-core:ClassValue",
+      "from": "@epam/uui-core:IHasCX",
+      "required": false
+     },
+     {
+      "uid": "link",
+      "name": "link",
+      "comment": {
+       "raw": [
+        "Link object to redirect to for SPA-redirects"
+       ]
+      },
+      "typeValue": {
+       "raw": "Link"
+      },
+      "from": "@epam/uui-core:ICanRedirect",
+      "required": false
+     },
+     {
+      "uid": "href",
+      "name": "href",
+      "comment": {
+       "raw": [
+        "Href (URL) to redirect to, for non-SPA redirects"
+       ]
+      },
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "@epam/uui-core:ICanRedirect",
+      "required": false
+     },
+     {
+      "uid": "isLinkActive",
+      "name": "isLinkActive",
+      "comment": {
+       "raw": [
+        "Highlights component to show that link is active (browser is displaying the page to which link is pointing)"
+       ]
+      },
+      "typeValue": {
+       "raw": "boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "from": "@epam/uui-core:ICanRedirect",
+      "required": false
+     },
+     {
+      "uid": "target",
+      "name": "target",
+      "comment": {
+       "raw": [
+        "Controls where the link should be opened"
+       ]
+      },
+      "typeValue": {
+       "raw": "'_blank'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "_blank"
+       ]
+      },
+      "from": "@epam/uui-core:ICanRedirect",
+      "required": false
+     },
+     {
+      "uid": "rawProps",
+      "name": "rawProps",
+      "comment": {
+       "raw": [
+        "Any HTML attributes (native or 'data-') to put on the underlying component"
+       ]
+      },
+      "typeValue": {
+       "raw": "React.AnchorHTMLAttributes<HTMLAnchorElement> & Record<`data-${string}`, string> | React.ButtonHTMLAttributes<HTMLButtonElement> & Record<`data-${string}`, string> | React.HTMLAttributes<HTMLSpanElement> & Record<`data-${string}`, string>"
+      },
+      "from": "@epam/uui-core:IHasRawProps",
+      "required": false
+     },
+     {
+      "uid": "isOpen",
+      "name": "isOpen",
+      "comment": {
+       "raw": [
+        "When isDropdown=true, indicate that dropdown is open with chevron icon"
+       ]
+      },
+      "typeValue": {
+       "raw": "boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "from": "@epam/uui-core:IDropdownToggler",
+      "required": false
+     },
+     {
+      "uid": "isDropdown",
+      "name": "isDropdown",
+      "comment": {
+       "raw": [
+        "Shows chevron icon, enabling component to act as dropdown toggler"
+       ]
+      },
+      "typeValue": {
+       "raw": "boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "from": "@epam/uui-core:IDropdownToggler",
+      "required": false
+     },
+     {
+      "uid": "icon",
+      "name": "icon",
+      "comment": {
+       "raw": [
+        "Icon can be a React element (usually an SVG element)"
+       ]
+      },
+      "typeValue": {
+       "raw": "Icon"
+      },
+      "editor": {
+       "type": "component"
+      },
+      "from": "@epam/uui-core:IHasIcon",
+      "required": false
+     },
+     {
+      "uid": "iconPosition",
+      "name": "iconPosition",
+      "comment": {
+       "raw": [
+        "Position of the icon (left of right)"
+       ]
+      },
+      "typeValue": {
+       "raw": "'left' | 'right'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "left",
+        "right"
+       ]
+      },
+      "from": "@epam/uui-core:IHasIcon",
+      "required": false
+     },
+     {
+      "uid": "onIconClick",
+      "name": "onIconClick",
+      "comment": {
+       "raw": [
+        "Click handler for the icon"
+       ]
+      },
+      "typeValue": {
+       "raw": "() => void"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "from": "@epam/uui-core:IHasIcon",
+      "required": false
+     },
+     {
+      "uid": "caption",
+      "name": "caption",
+      "comment": {
+       "raw": [
+        "Caption. Can be a string, or React.Element. Certain components supports minimal markup (<b>,<i>,<a>) in captions."
+       ]
+      },
+      "typeValue": {
+       "raw": "React.ReactNode"
+      },
+      "typeValueRef": "@types/react:ReactNode",
+      "from": "@epam/uui-core:IHasCaption",
+      "required": false
+     },
+     {
+      "uid": "size",
+      "name": "size",
+      "comment": {
+       "raw": [
+        "Defines component size.",
+        " @default '36'"
+       ],
+       "tags": {
+        "@default": "36"
+       }
+      },
+      "typeValue": {
+       "raw": "'36' | '48' | '24' | '30' | '42'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "24",
+        "30",
+        "36",
+        "42",
+        "48"
+       ]
+      },
+      "from": "@epam/uui:TagCoreProps",
+      "required": false
+     },
+     {
+      "uid": "fill",
+      "name": "fill",
+      "comment": {
+       "raw": [
+        "Defines component fill style.",
+        " @default 'solid'"
+       ],
+       "tags": {
+        "@default": "solid"
+       }
+      },
+      "typeValue": {
+       "raw": "'solid' | 'outline'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "solid",
+        "outline"
+       ]
+      },
+      "from": "@epam/uui:TagCoreProps",
+      "required": false
+     },
+     {
+      "uid": "onClear",
+      "name": "onClear",
+      "comment": {
+       "raw": [
+        "Call to clear toggler value"
+       ]
+      },
+      "typeValue": {
+       "raw": "(e?: any) => void"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "from": "@epam/uui:TagCoreProps",
+      "required": false
+     },
+     {
+      "uid": "clearIcon",
+      "name": "clearIcon",
+      "comment": {
+       "raw": [
+        "Icon for clear value button (usually cross)"
+       ]
+      },
+      "typeValue": {
+       "raw": "Icon"
+      },
+      "editor": {
+       "type": "component"
+      },
+      "from": "@epam/uui:TagCoreProps",
+      "required": false
+     },
+     {
+      "uid": "captionCX",
+      "name": "captionCX",
+      "comment": {
+       "raw": [
+        "CSS classes to put on the caption",
+        " @deprecated"
+       ]
+      },
+      "typeValue": {
+       "raw": "null | string | number | boolean | ClassDictionary | ClassArray"
+      },
+      "typeValueRef": "@epam/uui-core:ClassValue",
+      "from": "@epam/uui:TagCoreProps",
+      "required": false
+     },
+     {
+      "uid": "dropdownIcon",
+      "name": "dropdownIcon",
+      "comment": {
+       "raw": [
+        "Icon for drop-down toggler"
+       ]
+      },
+      "typeValue": {
+       "raw": "Icon"
+      },
+      "editor": {
+       "type": "component"
+      },
+      "from": "@epam/uui:TagCoreProps",
+      "required": false
+     },
+     {
+      "uid": "count",
+      "name": "count",
+      "comment": {
+       "raw": [
+        "Count value to be placed in component"
+       ]
+      },
+      "typeValue": {
+       "raw": "React.ReactNode"
+      },
+      "typeValueRef": "@types/react:ReactNode",
+      "from": "@epam/uui:TagCoreProps",
+      "required": false
+     },
+     {
+      "uid": "color",
+      "name": "color",
+      "comment": {
+       "raw": [
+        "Defines component color.",
+        " @default 'neutral'"
+       ],
+       "tags": {
+        "@default": "neutral"
+       }
+      },
+      "typeValue": {
+       "raw": "'info' | 'success' | 'warning' | 'critical' | 'neutral'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "info",
+        "success",
+        "warning",
+        "critical",
+        "neutral"
+       ]
+      },
+      "from": "@epam/uui:TagMods",
+      "required": false
+     },
+     {
+      "uid": "isCollapsed",
+      "name": "isCollapsed",
+      "comment": {
+       "raw": [
+        "If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption."
+       ]
+      },
+      "typeValue": {
+       "raw": "boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "required": false
+     },
+     {
+      "uid": "tooltipContent",
+      "name": "tooltipContent",
+      "comment": {
+       "raw": [
+        "Defines content for tooltip"
+       ]
+      },
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "required": false
+     },
+     {
+      "uid": "rowProps",
+      "name": "rowProps",
+      "comment": {
+       "raw": [
+        "Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>)"
+       ]
+      },
+      "typeValue": {
+       "raw": "DataRowProps<TItem, TId>"
+      },
+      "required": false
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
   "@epam/uui:PresetsPanelProps": {
    "summary": {
     "module": "@epam/uui",
@@ -88508,7 +89028,7 @@
       "editor": {
        "type": "component"
       },
-      "from": "@epam/uui:IconButtonCoreProps",
+      "from": "@epam/uui-components:IconButtonProps",
       "required": false
      },
      {
@@ -88531,7 +89051,7 @@
         "36"
        ]
       },
-      "from": "@epam/uui-components:IconButtonProps",
+      "from": "@epam/uui:IconButtonCoreProps",
       "required": false
      },
      {
@@ -95811,7 +96331,7 @@
       "editor": {
        "type": "component"
       },
-      "from": "@epam/uui:IconButtonCoreProps",
+      "from": "@epam/uui-components:IconButtonProps",
       "required": false
      },
      {
@@ -95834,7 +96354,7 @@
         "36"
        ]
       },
-      "from": "@epam/uui-components:IconButtonProps",
+      "from": "@epam/uui:IconButtonCoreProps",
       "required": false
      },
      {
diff --git a/uui/components/pickers/__tests__/PickerInput.test.tsx b/uui/components/pickers/__tests__/PickerInput.test.tsx
index cb7945c2e3..d285990dbc 100644
--- a/uui/components/pickers/__tests__/PickerInput.test.tsx
+++ b/uui/components/pickers/__tests__/PickerInput.test.tsx
@@ -336,7 +336,6 @@ describe('PickerInput', () => {
                 selectionMode: 'multi',
                 getName: ({ name }) => name,
             });
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['', '']);
             expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
             await waitFor(() => expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Elementary+', 'Pre-Intermediate']));
         });
@@ -443,10 +442,10 @@ describe('PickerInput', () => {
             expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 2', 'Child 2.2', 'Parent 3']);
         });
 
-        it('should wrap up if number of elements is greater than maxItems', async () => {
+        it('should wrap up extra items if number of elements is greater than maxItems', async () => {
             const { mocks, dom } = await setupPickerInputForTest({
                 value: undefined,
-                maxItems: 3,
+                maxItems: 2,
                 entityPluralName: 'languages',
                 selectionMode: 'multi',
             });
@@ -463,7 +462,7 @@ describe('PickerInput', () => {
             await PickerInputTestObject.clickOptionByText('A2');
             await PickerInputTestObject.clickOptionByText('A2+');
             expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3, 4, 5]);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['4 languages selected']);
+            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+', '+ 2 languages selected']);
         });
 
         it('should disable clear', async () => {

From e74fe08056011d0cb1588a4a8f5b0adc8080e80e Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Mon, 25 Mar 2024 18:25:45 +0200
Subject: [PATCH 05/25] [PickerTogglerTag]: removed tooltipContext and made a
 doc example

---
 .../PickerTogglerTagDemo.example.tsx          | 63 +++++++++++++
 app/src/docs/pickerInput/PickerInput.doc.tsx  |  1 +
 app/src/sandbox/SandboxPage.tsx               |  2 -
 .../pickerTogglerTag/PickerTogglerTagDemo.tsx | 92 -------------------
 ...ples-pickerInput-PickerTogglerTagDemo.json | 17 ++++
 public/docs/docsGenOutput/docsGenOutput.json  | 28 ++----
 uui/components/pickers/PickerInput.tsx        |  4 +
 uui/components/pickers/PickerTogglerTag.tsx   | 15 +--
 8 files changed, 98 insertions(+), 124 deletions(-)
 create mode 100644 app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
 delete mode 100644 app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
 create mode 100644 public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json

diff --git a/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx b/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
new file mode 100644
index 0000000000..4621222e4a
--- /dev/null
+++ b/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
+import { FlexCell, PickerInput, PickerTogglerTag, Tooltip } from '@epam/uui';
+import { Location } from '@epam/uui-docs';
+
+const cascadeSelectionModes: Array<{ id: 'explicit' | 'implicit'; caption: string }> = [
+    {
+        id: 'explicit',
+        caption: 'Explicit cascade selection',
+    }, {
+        id: 'implicit',
+        caption: 'Implicit cascade selection',
+    },
+];
+
+export default function PickerTogglerTagDemoExample() {
+    const svc = useUuiContext();
+    const [value, onValueChange] = useState<string[]>();
+    const [cascadeSelection] = useState(cascadeSelectionModes[0].id);
+
+    const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
+        {
+            api: (request, ctx) => {
+                const { search } = request;
+                // and since parentId is meaningful value, it is required to exclude it from the filter.
+                const filter = search ? {} : { parentId: ctx?.parentId };
+                return svc.api.demo.locations({ ...request, search, filter });
+            },
+            getId: (i) => i.id,
+            getParentId: (i) => i.parentId,
+            getChildCount: (l) => l.childCount,
+        },
+        [],
+    );
+
+    return (
+        <FlexCell width={ 300 }>
+            <PickerInput
+                dataSource={ dataSource }
+                value={ value }
+                onValueChange={ onValueChange }
+                entityName="location"
+                selectionMode="multi"
+                valueType="id"
+                cascadeSelection={ cascadeSelection }
+                maxItems={ 2 }
+                renderTag={ (props) => {
+                    if (props.isCollapsed) {
+                        return (
+                            <PickerTogglerTag { ...props } key="selected" />
+                        );
+                    } else {
+                        return (
+                            <Tooltip key={ props.rowProps?.id } content={ `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }>
+                                <PickerTogglerTag { ...props } />
+                            </Tooltip>
+                        );
+                    }
+                } }
+            />
+        </FlexCell>
+    );
+}
diff --git a/app/src/docs/pickerInput/PickerInput.doc.tsx b/app/src/docs/pickerInput/PickerInput.doc.tsx
index 822b709d43..31e7bff4cf 100644
--- a/app/src/docs/pickerInput/PickerInput.doc.tsx
+++ b/app/src/docs/pickerInput/PickerInput.doc.tsx
@@ -80,6 +80,7 @@ export class PickerInputDoc extends BaseDocsBlock {
                 <DocExample title="Picker with changed array of items" path="./_examples/pickerInput/PickerWithChangingItemsArray.example.tsx" />
                 <DocExample title="Linked pickers" path="./_examples/pickerInput/LinkedPickers.example.tsx" />
                 <DocExample title="Change portal target and dropdown placement" path="./_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx" />
+                <DocExample title="PickerTogglerTag and renderTag demo" path="./_examples/pickerInput/PickerTogglerTagDemo.example.tsx" />
             </>
         );
     }
diff --git a/app/src/sandbox/SandboxPage.tsx b/app/src/sandbox/SandboxPage.tsx
index b9f530f2cb..458dd8877d 100644
--- a/app/src/sandbox/SandboxPage.tsx
+++ b/app/src/sandbox/SandboxPage.tsx
@@ -23,7 +23,6 @@ import { ProjectTasksDemo } from './tasks/ProjectTasksDemo';
 import { RichTextEditorDemo } from './RTE/rteDemo';
 import { TableColumnConfigModalTest } from './tableColConfigModal/TableColumnConfigModalTest';
 import { PalettePage } from './tokens/palette/palettePage';
-import { PickerTogglerTagDemo } from './pickerTogglerTag/PickerTogglerTagDemo';
 
 export function SandboxPage() {
     const items = useMemo(
@@ -47,7 +46,6 @@ export function SandboxPage() {
             { id: 'tagInput', name: 'Tag Input', component: TagInputDemo },
             { id: 'tokens', name: 'Tokens' },
             { parentId: 'tokens', id: 'tokensPalette', name: 'Palette', component: PalettePage },
-            { id: 'pickerTogglerTag', name: 'PickerTogglerTag', component: PickerTogglerTagDemo },
         ],
         [],
     );
diff --git a/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx b/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
deleted file mode 100644
index 3278754710..0000000000
--- a/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
-import { FlexCell, FlexRow, LabeledInput, NumericInput, PickerInput, PickerTogglerTag } from '@epam/uui';
-import { Location } from '@epam/uui-docs';
-import { ReactComponent as myIcon } from '@epam/assets/icons/action-account-fill.svg';
-
-const cascadeSelectionModes: Array<{ id: 'explicit' | 'implicit'; caption: string }> = [
-    {
-        id: 'explicit',
-        caption: 'Explicit cascade selection',
-    }, {
-        id: 'implicit',
-        caption: 'Implicit cascade selection',
-    },
-];
-
-export function PickerTogglerTagDemo() {
-    const svc = useUuiContext();
-    const [maxItems, setMaxItems] = useState(null);
-    const [value, onValueChange] = useState<string[]>();
-    const [cascadeSelection] = useState(cascadeSelectionModes[0].id);
-
-    const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
-        {
-            api: (request, ctx) => {
-                const { search } = request;
-                // and since parentId is meaningful value, it is required to exclude it from the filter.
-                const filter = search ? {} : { parentId: ctx?.parentId };
-                return svc.api.demo.locations({ ...request, search, filter });
-            },
-            getId: (i) => i.id,
-            getParentId: (i) => i.parentId,
-            getChildCount: (l) => l.childCount,
-        },
-        [],
-    );
-
-    return (
-        <FlexCell width={ 370 }>
-            <FlexRow margin="12">
-                <LabeledInput label="Set maxItem">
-                    <NumericInput value={ maxItems } onValueChange={ setMaxItems } />
-                </LabeledInput>
-            </FlexRow>
-            <FlexRow margin="12">
-                <PickerInput
-                    dataSource={ dataSource }
-                    value={ value }
-                    onValueChange={ onValueChange }
-                    entityName="location"
-                    selectionMode="multi"
-                    valueType="id"
-                    cascadeSelection={ cascadeSelection }
-                    maxItems={ maxItems }
-                    renderTag={ (props) => {
-                        return (
-                            <PickerTogglerTag
-                                { ...props }
-                                key={ props.isCollapsed ? 'collapsed' : props.rowProps?.id as string }
-                                tooltipContent={ !props.isCollapsed && `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }
-                                icon={ !props.isCollapsed && myIcon }
-                            />
-                        );
-
-                        // if (props.isCollapsed) {
-                        //     return (
-                        //         <Button
-                        //             { ...props }
-                        //             size="30"
-                        //             key="collapsed"
-                        //             color="secondary"
-                        //         />
-                        //     );
-                        // } else {
-                        //     return (
-                        //         <Tooltip content={ `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }>
-                        //             <Button
-                        //                 { ...props }
-                        //                 size="30"
-                        //                 key={ props.rowProps?.id as string }
-                        //                 color="accent"
-                        //                 icon={ myIcon }
-                        //             />
-                        //         </Tooltip>
-                        //     );
-                        // }
-                    } }
-                />
-            </FlexRow>
-        </FlexCell>
-    );
-}
diff --git a/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
new file mode 100644
index 0000000000..22b40735a6
--- /dev/null
+++ b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
@@ -0,0 +1,17 @@
+[
+  {
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "In this example we use "
+      },
+      {
+        "text": "renderTag",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " callback to make custom Tags with Tooltip if they are not a Tag for collapsed values."
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
index fdb1880388..1789d3db71 100644
--- a/public/docs/docsGenOutput/docsGenOutput.json
+++ b/public/docs/docsGenOutput/docsGenOutput.json
@@ -72060,6 +72060,10 @@
      "raw": "SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable<TId> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'single'; valueType: 'entity'; } & IEditable<TItem> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable<TId[]> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable<TItem[]> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; }",
      "print": [
       "type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {",
+      "    /**",
+      "     * Render Callback for the Tags.",
+      "     * If omitted, they will be rendered by default.",
+      "     */",
       "    renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;",
       "};"
      ]
@@ -72997,6 +73001,12 @@
      {
       "uid": "renderTag",
       "name": "renderTag",
+      "comment": {
+       "raw": [
+        "Render Callback for the Tags.",
+        " If omitted, they will be rendered by default."
+       ]
+      },
       "typeValue": {
        "raw": "(props: PickerTogglerTagProps<TItem, TId>) => JSX.Element"
       },
@@ -76447,8 +76457,6 @@
       "    size?: types.ControlSize;",
       "    /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */",
       "    isCollapsed?: boolean;",
-      "    /** Defines content for tooltip */",
-      "    tooltipContent?: string;",
       "    /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */",
       "    rowProps?: DataRowProps<TItem, TId>;",
       "};"
@@ -76901,22 +76909,6 @@
       },
       "required": false
      },
-     {
-      "uid": "tooltipContent",
-      "name": "tooltipContent",
-      "comment": {
-       "raw": [
-        "Defines content for tooltip"
-       ]
-      },
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "required": false
-     },
      {
       "uid": "rowProps",
       "name": "rowProps",
diff --git a/uui/components/pickers/PickerInput.tsx b/uui/components/pickers/PickerInput.tsx
index a215705a82..06ff93ee29 100644
--- a/uui/components/pickers/PickerInput.tsx
+++ b/uui/components/pickers/PickerInput.tsx
@@ -16,6 +16,10 @@ const pickerHeight = 300;
 const pickerWidth = 360;
 
 export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {
+    /**
+     * Render Callback for making custom Tags.
+     * If omitted, they will be rendered by default component PickerTogglerTag.
+     */
     renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;
 };
 
diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
index 60df9f4e56..80bd2d6a55 100644
--- a/uui/components/pickers/PickerTogglerTag.tsx
+++ b/uui/components/pickers/PickerTogglerTag.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as types from '../types';
 import { Tag, TagProps } from '../widgets';
-import { Tooltip } from '../overlays';
 import { DataRowProps } from '@epam/uui-core';
 
 export type PickerTogglerTagProps<TItem, TId> = TagProps & {
@@ -9,8 +8,6 @@ export type PickerTogglerTagProps<TItem, TId> = TagProps & {
     size?: types.ControlSize;
     /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */
     isCollapsed?: boolean;
-    /** Defines content for tooltip */
-    tooltipContent?: string;
     /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */
     rowProps?: DataRowProps<TItem, TId>;
 };
@@ -32,18 +29,12 @@ const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size
     }
 };
 
-export function PickerTogglerTag(props: PickerTogglerTagProps<any, any>): JSX.Element {
+export const PickerTogglerTag = React.forwardRef((props: PickerTogglerTagProps<any, any>, ref: React.Ref<HTMLSpanElement>): JSX.Element => {
     const tagProps = {
         ...props,
         tabIndex: -1,
         size: getPickerTogglerButtonSize(props.size),
     };
 
-    return (props.tooltipContent)
-        ? (
-            <Tooltip content={ props.tooltipContent } openDelay={ 400 }>
-                <Tag { ...tagProps } />
-            </Tooltip>
-        )
-        : <Tag { ...tagProps } />;
-}
+    return <Tag ref={ ref } { ...tagProps } />;
+});

From ab89517eda0e9b3b0de5bc801646af83536fa042 Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Tue, 26 Mar 2024 15:11:38 +0200
Subject: [PATCH 06/25] [PickerTogglerTag]: fixed TS error

---
 public/docs/docsGenOutput/docsGenOutput.json | 123 +++++++++----------
 uui/components/pickers/PickerTogglerTag.tsx  |   6 +-
 2 files changed, 62 insertions(+), 67 deletions(-)

diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
index 1789d3db71..1a3408d091 100644
--- a/public/docs/docsGenOutput/docsGenOutput.json
+++ b/public/docs/docsGenOutput/docsGenOutput.json
@@ -72061,8 +72061,8 @@
      "print": [
       "type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {",
       "    /**",
-      "     * Render Callback for the Tags.",
-      "     * If omitted, they will be rendered by default.",
+      "     * Render Callback for making custom Tags.",
+      "     * If omitted, they will be rendered by default component PickerTogglerTag.",
       "     */",
       "    renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;",
       "};"
@@ -73003,8 +73003,8 @@
       "name": "renderTag",
       "comment": {
        "raw": [
-        "Render Callback for the Tags.",
-        " If omitted, they will be rendered by default."
+        "Render Callback for making custom Tags.",
+        " If omitted, they will be rendered by default component PickerTogglerTag."
        ]
       },
       "typeValue": {
@@ -76448,21 +76448,73 @@
     "exported": true
    },
    "details": {
-    "kind": 265,
+    "kind": 264,
     "typeValue": {
      "raw": "PickerTogglerTagProps<TItem, TId>",
      "print": [
-      "type PickerTogglerTagProps<TItem, TId> = TagProps & {",
+      "interface PickerTogglerTagProps<TItem, TId> extends TagProps {",
       "    /** Defines component size */",
       "    size?: types.ControlSize;",
       "    /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */",
       "    isCollapsed?: boolean;",
       "    /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */",
       "    rowProps?: DataRowProps<TItem, TId>;",
-      "};"
+      "}"
      ]
     },
     "props": [
+     {
+      "uid": "size",
+      "name": "size",
+      "comment": {
+       "raw": [
+        "Defines component size"
+       ]
+      },
+      "typeValue": {
+       "raw": "'36' | '48' | '24' | '30' | '42'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "24",
+        "30",
+        "36",
+        "42",
+        "48"
+       ]
+      },
+      "required": false
+     },
+     {
+      "uid": "isCollapsed",
+      "name": "isCollapsed",
+      "comment": {
+       "raw": [
+        "If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption."
+       ]
+      },
+      "typeValue": {
+       "raw": "boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "required": false
+     },
+     {
+      "uid": "rowProps",
+      "name": "rowProps",
+      "comment": {
+       "raw": [
+        "Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>)"
+       ]
+      },
+      "typeValue": {
+       "raw": "DataRowProps<TItem, TId>"
+      },
+      "required": false
+     },
      {
       "uid": "onClick",
       "name": "onClick",
@@ -76730,34 +76782,6 @@
       "from": "@epam/uui-core:IHasCaption",
       "required": false
      },
-     {
-      "uid": "size",
-      "name": "size",
-      "comment": {
-       "raw": [
-        "Defines component size.",
-        " @default '36'"
-       ],
-       "tags": {
-        "@default": "36"
-       }
-      },
-      "typeValue": {
-       "raw": "'36' | '48' | '24' | '30' | '42'"
-      },
-      "editor": {
-       "type": "oneOf",
-       "options": [
-        "24",
-        "30",
-        "36",
-        "42",
-        "48"
-       ]
-      },
-      "from": "@epam/uui:TagCoreProps",
-      "required": false
-     },
      {
       "uid": "fill",
       "name": "fill",
@@ -76892,35 +76916,6 @@
       },
       "from": "@epam/uui:TagMods",
       "required": false
-     },
-     {
-      "uid": "isCollapsed",
-      "name": "isCollapsed",
-      "comment": {
-       "raw": [
-        "If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption."
-       ]
-      },
-      "typeValue": {
-       "raw": "boolean"
-      },
-      "editor": {
-       "type": "bool"
-      },
-      "required": false
-     },
-     {
-      "uid": "rowProps",
-      "name": "rowProps",
-      "comment": {
-       "raw": [
-        "Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>)"
-       ]
-      },
-      "typeValue": {
-       "raw": "DataRowProps<TItem, TId>"
-      },
-      "required": false
      }
     ],
     "propsFromUnion": false
diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
index 80bd2d6a55..3b8aec826b 100644
--- a/uui/components/pickers/PickerTogglerTag.tsx
+++ b/uui/components/pickers/PickerTogglerTag.tsx
@@ -3,14 +3,14 @@ import * as types from '../types';
 import { Tag, TagProps } from '../widgets';
 import { DataRowProps } from '@epam/uui-core';
 
-export type PickerTogglerTagProps<TItem, TId> = TagProps & {
+export interface PickerTogglerTagProps<TItem, TId> extends TagProps {
     /** Defines component size */
     size?: types.ControlSize;
     /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */
     isCollapsed?: boolean;
     /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */
     rowProps?: DataRowProps<TItem, TId>;
-};
+}
 
 const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size'] => {
     switch (propSize) {
@@ -29,7 +29,7 @@ const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size
     }
 };
 
-export const PickerTogglerTag = React.forwardRef((props: PickerTogglerTagProps<any, any>, ref: React.Ref<HTMLSpanElement>): JSX.Element => {
+export const PickerTogglerTag = React.forwardRef((props: PickerTogglerTagProps<any, any>, ref: React.Ref<HTMLElement>) => {
     const tagProps = {
         ...props,
         tabIndex: -1,

From 3a38dd979af0470a34d8aed623cfaa3c12d7c17b Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Tue, 26 Mar 2024 15:38:40 +0200
Subject: [PATCH 07/25] [PickerTogglerTag]: added changelog

---
 changelog.md                                          |  7 +++++++
 .../examples-pickerInput-PickerTogglerTagDemo.json    | 11 +++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/changelog.md b/changelog.md
index 189f505697..1428700a7c 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,10 @@
+# 5.7.1 - xx.xx.2024
+
+**What's New**
+* [PickerInput]: added property `renderTag` it's a callback for rendering custom Tags in selectionMode: `multi`. 
+* [PickerTogglerTag]: it's a new component, and we recommend it to use in the `renderTag` callback in the PickerInput. 
+
+
 # 5.7.0 - 25.03.2024
 
 **What's New**
diff --git a/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
index 22b40735a6..0699acc114 100644
--- a/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
+++ b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
@@ -3,14 +3,21 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "In this example we use "
+        "text": "In this example, we use "
       },
       {
         "text": "renderTag",
         "uui-richTextEditor-code": true
       },
       {
-        "text": " callback to make custom Tags with Tooltip if they are not a Tag for collapsed values."
+        "text": " callback to make custom Tags with Tooltip if they are not a Tag for collapsed values. "
+      },
+      {
+        "text": "PickerTogglerTag",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " is a component we recommend to use for rendering Tags."
       }
     ]
   }

From 8cf9d8cf6c09f7199271a673f6fd076c9a214f38 Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Wed, 27 Mar 2024 12:09:40 +0200
Subject: [PATCH 08/25] [PickerTogglerTag]: fixed MR remarks

---
 .../pickerInput/PickerTogglerTagDemo.example.tsx   | 14 +-------------
 app/src/docs/pickerInput/PickerInput.doc.tsx       |  2 +-
 .../examples-pickerInput-PickerTogglerTagDemo.json | 11 ++---------
 public/docs/docsGenOutput/docsGenOutput.json       | 10 +++++-----
 uui-components/src/i18n.tsx                        |  2 +-
 uui-components/src/pickers/PickerToggler.tsx       | 11 ++++++++---
 uui/components/pickers/DataPickerHeader.tsx        |  2 +-
 uui/components/pickers/PickerInput.tsx             | 14 +++++---------
 uui/components/pickers/PickerToggler.tsx           | 10 +---------
 9 files changed, 25 insertions(+), 51 deletions(-)

diff --git a/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx b/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
index 4621222e4a..e5fc893048 100644
--- a/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
+++ b/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
@@ -3,20 +3,9 @@ import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-cor
 import { FlexCell, PickerInput, PickerTogglerTag, Tooltip } from '@epam/uui';
 import { Location } from '@epam/uui-docs';
 
-const cascadeSelectionModes: Array<{ id: 'explicit' | 'implicit'; caption: string }> = [
-    {
-        id: 'explicit',
-        caption: 'Explicit cascade selection',
-    }, {
-        id: 'implicit',
-        caption: 'Implicit cascade selection',
-    },
-];
-
 export default function PickerTogglerTagDemoExample() {
     const svc = useUuiContext();
-    const [value, onValueChange] = useState<string[]>();
-    const [cascadeSelection] = useState(cascadeSelectionModes[0].id);
+    const [value, onValueChange] = useState<string[]>([]);
 
     const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
         {
@@ -42,7 +31,6 @@ export default function PickerTogglerTagDemoExample() {
                 entityName="location"
                 selectionMode="multi"
                 valueType="id"
-                cascadeSelection={ cascadeSelection }
                 maxItems={ 2 }
                 renderTag={ (props) => {
                     if (props.isCollapsed) {
diff --git a/app/src/docs/pickerInput/PickerInput.doc.tsx b/app/src/docs/pickerInput/PickerInput.doc.tsx
index 31e7bff4cf..b3e4dd9365 100644
--- a/app/src/docs/pickerInput/PickerInput.doc.tsx
+++ b/app/src/docs/pickerInput/PickerInput.doc.tsx
@@ -80,7 +80,7 @@ export class PickerInputDoc extends BaseDocsBlock {
                 <DocExample title="Picker with changed array of items" path="./_examples/pickerInput/PickerWithChangingItemsArray.example.tsx" />
                 <DocExample title="Linked pickers" path="./_examples/pickerInput/LinkedPickers.example.tsx" />
                 <DocExample title="Change portal target and dropdown placement" path="./_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx" />
-                <DocExample title="PickerTogglerTag and renderTag demo" path="./_examples/pickerInput/PickerTogglerTagDemo.example.tsx" />
+                <DocExample title="Custom toggler tag render" path="./_examples/pickerInput/PickerTogglerTagDemo.example.tsx" />
             </>
         );
     }
diff --git a/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
index 0699acc114..c7dba0cc5e 100644
--- a/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
+++ b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
@@ -3,21 +3,14 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "In this example, we use "
-      },
-      {
-        "text": "renderTag",
-        "uui-richTextEditor-code": true
-      },
-      {
-        "text": " callback to make custom Tags with Tooltip if they are not a Tag for collapsed values. "
+        "text": "You can utilize the default UUI implementation of tags for PickerInput by using the "
       },
       {
         "text": "PickerTogglerTag",
         "uui-richTextEditor-code": true
       },
       {
-        "text": " is a component we recommend to use for rendering Tags."
+        "text": " component."
       }
     ]
   }
diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
index 1a3408d091..ccbf105919 100644
--- a/public/docs/docsGenOutput/docsGenOutput.json
+++ b/public/docs/docsGenOutput/docsGenOutput.json
@@ -1,5 +1,5 @@
 {
- "version": "5.7.0-alpha.0",
+ "version": "5.7.0",
  "docsGenTypes": {
   "@epam/uui-core:AcceptDropParams": {
    "summary": {
@@ -72061,8 +72061,8 @@
      "print": [
       "type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {",
       "    /**",
-      "     * Render Callback for making custom Tags.",
-      "     * If omitted, they will be rendered by default component PickerTogglerTag.",
+      "     * Render callback for picker toggler selection tag",
+      "     * If omitted, default `PickerTogglerTag` component will be rendered",
       "     */",
       "    renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;",
       "};"
@@ -73003,8 +73003,8 @@
       "name": "renderTag",
       "comment": {
        "raw": [
-        "Render Callback for making custom Tags.",
-        " If omitted, they will be rendered by default component PickerTogglerTag."
+        "Render callback for picker toggler selection tag",
+        " If omitted, default `PickerTogglerTag` component will be rendered"
        ]
       },
       "typeValue": {
diff --git a/uui-components/src/i18n.tsx b/uui-components/src/i18n.tsx
index 9368d41917..41cd1df744 100644
--- a/uui-components/src/i18n.tsx
+++ b/uui-components/src/i18n.tsx
@@ -10,7 +10,7 @@ export const i18n = {
         showAll: 'SHOW ALL',
     },
     pickerToggler: {
-        createCollapsedName: (length: number, entityName: string) => `+ ${length} ${entityName} selected`,
+        createItemValue: (length: number, entityName: string) => `+ ${length} ${entityName} selected`,
     },
     pickerInput: {
         defaultPlaceholder: (entity: string) => `Please select ${entity}`,
diff --git a/uui-components/src/pickers/PickerToggler.tsx b/uui-components/src/pickers/PickerToggler.tsx
index 7dbc7db2c8..7694305acd 100644
--- a/uui-components/src/pickers/PickerToggler.tsx
+++ b/uui-components/src/pickers/PickerToggler.tsx
@@ -103,14 +103,18 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
 
     const renderItems = () => {
         const maxItems = getMaxItems(props.maxItems);
+        let isDisabled = props.isDisabled || props.isReadonly;
 
         const multiItems = props.selection?.map((row) => {
+            isDisabled = isDisabled || row.isDisabled;
+
             const newMultiItems = {
                 ...row,
+                key: row?.id as string,
                 rowProps: row,
                 caption: props.getName(row.value),
                 isCollapsed: false,
-                isDisabled: row.isDisabled,
+                isDisabled,
                 onClear: () => {
                     row.onCheck?.(row);
                     // When we delete item it disappears from the DOM and focus is passed to the Body. So in this case we have to return focus on the toggleContainer by hand.
@@ -121,9 +125,10 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
 
         if (props.selectedRowsCount > maxItems) {
             const collapsedItem = props.renderItem?.({
-                caption: i18n.pickerToggler.createCollapsedName(props.selectedRowsCount - maxItems, props.entityName || ''),
+                key: 'collapsed',
+                caption: i18n.pickerToggler.createItemValue(props.selectedRowsCount - maxItems, props.entityName || ''),
                 isCollapsed: true,
-                isDisabled: false,
+                isDisabled,
                 onClear: null,
             } as any);
             multiItems.push(collapsedItem);
diff --git a/uui/components/pickers/DataPickerHeader.tsx b/uui/components/pickers/DataPickerHeader.tsx
index ce4be90798..17532f303c 100644
--- a/uui/components/pickers/DataPickerHeader.tsx
+++ b/uui/components/pickers/DataPickerHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import css from './DataPickerHeader.module.scss';
-import { ReactComponent as CloseIcon } from '@epam/assets/icons/action-delete_forever-fill.svg';
+import { ReactComponent as CloseIcon } from '@epam/assets/icons/navigation-close-outline.svg';
 import { Text } from '../typography';
 import { IconButton } from '../buttons';
 import { FlexRow } from '../layout';
diff --git a/uui/components/pickers/PickerInput.tsx b/uui/components/pickers/PickerInput.tsx
index 06ff93ee29..809bceea46 100644
--- a/uui/components/pickers/PickerInput.tsx
+++ b/uui/components/pickers/PickerInput.tsx
@@ -17,8 +17,8 @@ const pickerWidth = 360;
 
 export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {
     /**
-     * Render Callback for making custom Tags.
-     * If omitted, they will be rendered by default component PickerTogglerTag.
+     * Render callback for picker toggler selection tag
+     * If omitted, default `PickerTogglerTag` component will be rendered
      */
     renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;
 };
@@ -73,12 +73,7 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
     };
 
     const renderTarget = (targetProps: IDropdownToggler & PickerTogglerProps<TItem, TId>) => {
-        const renderTargetFn = props.renderToggler || ((pickerTogglerProps) => (
-            <PickerToggler
-                { ...pickerTogglerProps }
-                renderItem={ props.renderTag ? (renderItemProps) => props.renderTag(renderItemProps) : null }
-            />
-        ));
+        const renderTargetFn = props.renderToggler || ((props) => <PickerToggler { ...props } />);
 
         return (
             <IEditableDebouncer
@@ -184,12 +179,13 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
     };
 
     const rows = getRows();
+    const renderItem = props.renderTag ? props.renderTag : null;
 
     return (
         <Dropdown
             renderTarget={ (dropdownProps) => {
                 const targetProps = getTogglerProps();
-                return renderTarget({ ...dropdownProps, ...targetProps });
+                return renderTarget({ ...dropdownProps, ...targetProps, renderItem });
             } }
             renderBody={ (bodyProps) => renderBody({ ...bodyProps, ...getPickerBodyProps(rows), ...getListProps() }, rows) }
             value={ shouldShowBody() }
diff --git a/uui/components/pickers/PickerToggler.tsx b/uui/components/pickers/PickerToggler.tsx
index 936c987512..465826aa37 100644
--- a/uui/components/pickers/PickerToggler.tsx
+++ b/uui/components/pickers/PickerToggler.tsx
@@ -25,15 +25,7 @@ function applyPickerTogglerMods(mods: PickerTogglerMods) {
 }
 
 function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>): JSX.Element {
-    const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => (
-        <PickerTogglerTag
-            { ...itemProps }
-            rowProps={ itemProps.rowProps }
-            key={ itemProps.isCollapsed ? 'collapsed' : itemProps.rowProps?.id as string }
-            size={ props.size }
-            isDisabled={ props.isDisabled || props.isReadonly || itemProps.isDisabled }
-        />
-    );
+    const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => <PickerTogglerTag { ...itemProps } size={ props.size } />;
 
     return (
         <UuiPickerToggler

From 2b83528bc78731b88b60621e606353ac08c3ffb6 Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Thu, 28 Mar 2024 11:03:19 +0200
Subject: [PATCH 09/25] [PickerTogglerTag]: fixed interfaces for renderItem,
 and reworked demo.

---
 .../PickerTogglerTagDemo.example.tsx          | 34 +++++++++++--------
 uui-components/src/pickers/PickerToggler.tsx  | 28 ++++++++++-----
 uui/components/pickers/PickerToggler.tsx      | 10 ++++--
 uui/components/pickers/PickerTogglerTag.tsx   |  8 ++---
 4 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx b/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
index e5fc893048..1b6c54160b 100644
--- a/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
+++ b/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
-import { FlexCell, PickerInput, PickerTogglerTag, Tooltip } from '@epam/uui';
+import { FlexCell, PickerInput, PickerTogglerTag, PickerTogglerTagProps, Tooltip } from '@epam/uui';
 import { Location } from '@epam/uui-docs';
 
 export default function PickerTogglerTagDemoExample() {
     const svc = useUuiContext();
-    const [value, onValueChange] = useState<string[]>([]);
+    const [value, onValueChange] = useState<string[]>(['225284', '2747351', '3119841', '3119746']);
 
     const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
         {
@@ -22,6 +22,22 @@ export default function PickerTogglerTagDemoExample() {
         [],
     );
 
+    const renderTag = (props: PickerTogglerTagProps<Location, string>) => {
+        if (props.isCollapsed) {
+            // rendering '+ N items selected' Tag
+            return (
+                <PickerTogglerTag { ...props } key="selected" />
+            );
+        } else {
+            // rendering all other Tags with Tooltip
+            return (
+                <Tooltip key={ props.rowProps?.id } content={ `${props.rowProps?.value?.tz}/${props.caption}` }>
+                    <PickerTogglerTag { ...props } />
+                </Tooltip>
+            );
+        }
+    };
+
     return (
         <FlexCell width={ 300 }>
             <PickerInput
@@ -32,19 +48,7 @@ export default function PickerTogglerTagDemoExample() {
                 selectionMode="multi"
                 valueType="id"
                 maxItems={ 2 }
-                renderTag={ (props) => {
-                    if (props.isCollapsed) {
-                        return (
-                            <PickerTogglerTag { ...props } key="selected" />
-                        );
-                    } else {
-                        return (
-                            <Tooltip key={ props.rowProps?.id } content={ `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }>
-                                <PickerTogglerTag { ...props } />
-                            </Tooltip>
-                        );
-                    }
-                } }
+                renderTag={ (props) => renderTag(props) }
             />
         </FlexCell>
     );
diff --git a/uui-components/src/pickers/PickerToggler.tsx b/uui-components/src/pickers/PickerToggler.tsx
index 7694305acd..27889a5d7f 100644
--- a/uui-components/src/pickers/PickerToggler.tsx
+++ b/uui-components/src/pickers/PickerToggler.tsx
@@ -1,16 +1,27 @@
 import * as React from 'react';
-import { IPickerToggler, IHasIcon, IHasCX, ICanBeReadonly, Icon, uuiMod, uuiElement, uuiMarkers, cx, IHasRawProps, ICanFocus, isEventTargetInsideClickable, DataRowProps } from '@epam/uui-core';
+import { IPickerToggler, IHasIcon, IHasCX, ICanBeReadonly, Icon, uuiMod, uuiElement, uuiMarkers, cx, IHasRawProps, ICanFocus, isEventTargetInsideClickable, DataRowProps, IHasCaption, IDisableable } from '@epam/uui-core';
 import { IconContainer } from '../layout';
 import css from './PickerToggler.module.scss';
 import { i18n } from '../i18n';
 import { getMaxItems } from './helpers';
 
+export interface IRenderItemProps<TItem, TId> extends IHasCaption, IDisableable {
+    /** Key for the component */
+    key: string;
+    /** DataRowProps object of the rendered item */
+    rowProps?: DataRowProps<TItem, TId>;
+    /** Indicates that tag is collapsed rest selected items, like '+N items selected' */
+    isCollapsed?: boolean;
+    /** Call to clear a value */
+    onClear?(e?: any): void;
+}
+
 export interface PickerTogglerProps<TItem = any, TId = any>
     extends IPickerToggler<TItem, TId>, ICanFocus<HTMLElement>, IHasIcon, IHasCX, ICanBeReadonly, IHasRawProps<React.HTMLAttributes<HTMLElement>> {
     cancelIcon?: Icon;
     dropdownIcon?: Icon;
     autoFocus?: boolean;
-    renderItem?(props: DataRowProps<TItem, TId>): React.ReactNode;
+    renderItem?(props: IRenderItemProps<TItem, TId>): React.ReactNode;
     getName?: (item: TItem) => string;
     entityName?: string;
     maxItems?: number;
@@ -105,11 +116,10 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
         const maxItems = getMaxItems(props.maxItems);
         let isDisabled = props.isDisabled || props.isReadonly;
 
-        const multiItems = props.selection?.map((row) => {
+        const tags = props.selection?.map((row) => {
             isDisabled = isDisabled || row.isDisabled;
 
-            const newMultiItems = {
-                ...row,
+            const tagProps = {
                 key: row?.id as string,
                 rowProps: row,
                 caption: props.getName(row.value),
@@ -120,21 +130,21 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
                     // When we delete item it disappears from the DOM and focus is passed to the Body. So in this case we have to return focus on the toggleContainer by hand.
                     toggleContainer.current?.focus();
                 } };
-            return props.renderItem?.(newMultiItems);
+            return props.renderItem?.(tagProps);
         });
 
         if (props.selectedRowsCount > maxItems) {
-            const collapsedItem = props.renderItem?.({
+            const collapsedTagProps = props.renderItem?.({
                 key: 'collapsed',
                 caption: i18n.pickerToggler.createItemValue(props.selectedRowsCount - maxItems, props.entityName || ''),
                 isCollapsed: true,
                 isDisabled,
                 onClear: null,
             } as any);
-            multiItems.push(collapsedItem);
+            tags.push(collapsedTagProps);
         }
 
-        return multiItems;
+        return tags;
     };
 
     const renderInput = () => {
diff --git a/uui/components/pickers/PickerToggler.tsx b/uui/components/pickers/PickerToggler.tsx
index 465826aa37..49ca5c3b53 100644
--- a/uui/components/pickers/PickerToggler.tsx
+++ b/uui/components/pickers/PickerToggler.tsx
@@ -25,14 +25,20 @@ function applyPickerTogglerMods(mods: PickerTogglerMods) {
 }
 
 function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>): JSX.Element {
-    const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => <PickerTogglerTag { ...itemProps } size={ props.size } />;
+    const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => {
+        const itemPropsWithSize = { ...itemProps, size: props.size };
+        if (!!props.renderItem) {
+            return props.renderItem(itemPropsWithSize);
+        }
+        return <PickerTogglerTag { ...itemPropsWithSize } />;
+    };
 
     return (
         <UuiPickerToggler
             { ...props }
             ref={ ref }
             cx={ [applyPickerTogglerMods(props), props.cx] }
-            renderItem={ !!props.renderItem ? props.renderItem : renderItem }
+            renderItem={ renderItem }
             getName={ (item) => (props.getName ? props.getName(item) : item) }
             cancelIcon={ systemIcons.clear }
             dropdownIcon={ systemIcons.foldingArrow }
diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
index 3b8aec826b..65361a6aec 100644
--- a/uui/components/pickers/PickerTogglerTag.tsx
+++ b/uui/components/pickers/PickerTogglerTag.tsx
@@ -1,15 +1,11 @@
 import * as React from 'react';
 import * as types from '../types';
 import { Tag, TagProps } from '../widgets';
-import { DataRowProps } from '@epam/uui-core';
+import { IRenderItemProps } from '@epam/uui-components';
 
-export interface PickerTogglerTagProps<TItem, TId> extends TagProps {
+export interface PickerTogglerTagProps<TItem, TId> extends IRenderItemProps<TItem, TId>, TagProps {
     /** Defines component size */
     size?: types.ControlSize;
-    /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */
-    isCollapsed?: boolean;
-    /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */
-    rowProps?: DataRowProps<TItem, TId>;
 }
 
 const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size'] => {

From 5814b30870722fdc7088bac539c2a0092ab1701a Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Thu, 28 Mar 2024 17:43:23 +0200
Subject: [PATCH 10/25] [Slider]: fixed floating number point problem, like 0.1
 + 0.2, made some tests

---
 uui-components/src/inputs/Slider/Slider.tsx   | 16 +++---
 .../src/inputs/Slider/SliderBase.tsx          | 19 ++++++-
 .../src/inputs/Slider/SliderScaleBase.tsx     | 12 ++++-
 .../src/inputs/__tests__/Slider.test.tsx      | 54 +++++++++++++++++++
 4 files changed, 90 insertions(+), 11 deletions(-)
 create mode 100644 uui-components/src/inputs/__tests__/Slider.test.tsx

diff --git a/uui-components/src/inputs/Slider/Slider.tsx b/uui-components/src/inputs/Slider/Slider.tsx
index a591d34777..0a4e5643e3 100644
--- a/uui-components/src/inputs/Slider/Slider.tsx
+++ b/uui-components/src/inputs/Slider/Slider.tsx
@@ -20,15 +20,17 @@ export class Slider extends SliderBase<number, any> {
     }
 
     handleKeyDownUpdate(type: 'left' | 'right') {
-        const {
-            value, step, min, max,
-        } = this.props;
+        const { value, step, min, max } = this.props;
+        const floatPrecision = this.getFloatPrecision(step);
+
         if (type === 'left') {
-            if (value - step < min) return;
-            else this.props.onValueChange(value - step);
+            const newValue = ((value * floatPrecision - step * floatPrecision) / floatPrecision);
+            if (newValue < min) return;
+            else this.props.onValueChange(newValue);
         } else if (type === 'right') {
-            if (value + step > max) return;
-            this.props.onValueChange(value + step);
+            const newValue = ((value * floatPrecision + step * floatPrecision) / floatPrecision);
+            if (newValue > max) return;
+            this.props.onValueChange(newValue);
         }
     }
 
diff --git a/uui-components/src/inputs/Slider/SliderBase.tsx b/uui-components/src/inputs/Slider/SliderBase.tsx
index 946542c8f5..a69d03803d 100644
--- a/uui-components/src/inputs/Slider/SliderBase.tsx
+++ b/uui-components/src/inputs/Slider/SliderBase.tsx
@@ -55,9 +55,24 @@ export abstract class SliderBase<TSelection, TState extends SliderBaseState> ext
         window.removeEventListener('resize', this.handleResize);
     }
 
+    getFloatPrecision = (step: number): number => {
+        const stepString = step.toString();
+        const decimalIndex = stepString.indexOf('.');
+        return decimalIndex >= 0 ? stepString.length - decimalIndex - 1 : 0;
+    };
+
     roundToStep(value: number, step: number) {
-        const normalized = this.props.min + Math.round(Math.abs((value - this.props.min) / step)) * step;
-        return normalized > this.props.max ? this.props.max : normalized;
+        const precision = this.getFloatPrecision(step);
+        let rounded = this.props.min + Math.round(Math.abs((value - this.props.min) / step)) * step;
+        rounded = parseFloat(rounded.toFixed(precision));
+
+        if (rounded < this.props.min) {
+            return this.props.min;
+        } else if (rounded > this.props.max) {
+            return this.props.max;
+        } else {
+            return rounded;
+        }
     }
 
     handleResize = () => {
diff --git a/uui-components/src/inputs/Slider/SliderScaleBase.tsx b/uui-components/src/inputs/Slider/SliderScaleBase.tsx
index e243d06b31..5211b2b111 100644
--- a/uui-components/src/inputs/Slider/SliderScaleBase.tsx
+++ b/uui-components/src/inputs/Slider/SliderScaleBase.tsx
@@ -15,14 +15,22 @@ interface SliderScaleProps<THandleOffsetValue> {
 
 export abstract class SliderScaleBase<THandleOffsetValue> extends React.Component<SliderScaleProps<THandleOffsetValue>> {
     abstract renderSliderScaleElements(): React.ReactElement<SliderScaleElement>[];
+    getPrecision = (step: number): number => {
+        const stepString = step.toString();
+        const decimalIndex = stepString.indexOf('.');
+        return decimalIndex >= 0 ? stepString.length - decimalIndex - 1 : 0;
+    };
+
     generateScale = (step: number): number[] => {
         const min = this.props.min;
         const max = this.props.max;
-        const count = Math.ceil(max - min) / step;
+        const precision = this.getPrecision(step);
+        const count = (max - min) / step;
         const scale: number[] = [min];
 
         for (let i = 1; i < count; i += 1) {
-            scale.push(scale[i - 1] + step);
+            const newValue = parseFloat((min + i * step).toFixed(precision));
+            scale.push(newValue);
         }
 
         scale.push(max);
diff --git a/uui-components/src/inputs/__tests__/Slider.test.tsx b/uui-components/src/inputs/__tests__/Slider.test.tsx
new file mode 100644
index 0000000000..d1ad1669cb
--- /dev/null
+++ b/uui-components/src/inputs/__tests__/Slider.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Slider, SliderProps } from '../Slider';
+import { setupComponentForTest, userEvent, screen } from '@epam/uui-test-utils';
+
+async function setupSlider(params: Partial<SliderProps>) {
+    const { mocks, setProps } = await setupComponentForTest<SliderProps>(
+        (context) => ({
+            value: params.value,
+            onValueChange: params.onValueChange || jest.fn().mockImplementation((newValue) => {
+                context.current.setProperty('value', newValue);
+            }),
+            min: 0,
+            max: 100,
+            step: 1,
+            ...params,
+        }),
+        (props) => {
+            return <Slider { ...props } />;
+        },
+    );
+    return { setProps, mocks };
+}
+
+describe('Slider', () => {
+    it('sets the initial value', async () => {
+        await setupSlider({ value: 50 });
+        const slider = screen.getByRole('slider');
+        expect(slider.getAttribute('aria-valuenow')).toEqual('50');
+    });
+
+    it('changes the value when clicked', async () => {
+        const setup = await setupSlider({ value: 50 });
+        const slider = screen.getByRole('slider');
+        slider.click();
+        expect(setup.mocks.onValueChange).toHaveBeenCalled();
+    });
+
+    it('should call onValueChange on keyboard click', async () => {
+        const setup = await setupSlider({ value: 50 });
+        const slider = screen.getByRole('slider');
+
+        await userEvent.type(slider, '{arrowright}');
+        expect(setup.mocks.onValueChange).toHaveBeenCalled();
+
+        await userEvent.type(slider, '{arrowleft}');
+        expect(setup.mocks.onValueChange).toHaveBeenCalled();
+    });
+
+    it('should have class `uui-disabled` when `isDisabled` is true', async () => {
+        await setupSlider({ value: 50, isDisabled: true });
+        const slider = screen.getByRole('slider').parentElement;
+        expect(slider).toHaveClass('uui-disabled');
+    });
+});

From a5d4d420a067c9b8378927fd14af7d7307c9d12a Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Mon, 1 Apr 2024 09:46:56 +0300
Subject: [PATCH 11/25] [DropdownContainer]: fixed rounded corners on mobile
 view

---
 uui/components/overlays/DropdownContainer.module.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/uui/components/overlays/DropdownContainer.module.scss b/uui/components/overlays/DropdownContainer.module.scss
index 5eadb090a5..7152c13ec1 100644
--- a/uui/components/overlays/DropdownContainer.module.scss
+++ b/uui/components/overlays/DropdownContainer.module.scss
@@ -15,6 +15,10 @@
         border-radius: var(--uui-dropdown_container-border-radius);
         overflow: hidden;
 
+        @media (max-width: 720px) {
+            border-radius: 0;
+        }
+
         &:focus-visible {
             outline: none;
         }

From 3a5ee6448f1a017f45f5bb1e4edeaa1909b41c29 Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Mon, 1 Apr 2024 14:36:48 +0300
Subject: [PATCH 12/25] Run e2e tests on push to develop

---
 .github/workflows/e2e.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 452305b008..f2fbf1e155 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -4,6 +4,8 @@ on:
         branches:
             - develop
             - main
+    push:
+        branches: [ develop ]
 
 concurrency:
     group: ${{ github.workflow }}-${{ github.base_ref }}-${{ github.head_ref }}

From 6d6e55ff0ec4a9f1d888fda0272cede26d2ae6c9 Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Mon, 1 Apr 2024 17:00:15 +0300
Subject: [PATCH 13/25] Improve performance of tests related to docs gen

---
 .../__tests__/__snapshots__/all.test.ts.snap  | 1675 +++++++++++++++++
 .../docsGenComments.test.ts.snap              |  202 --
 .../docsGenComplexTypes.test.ts.snap          |  803 --------
 .../docsGenIntersection.test.ts.snap          |  277 ---
 .../docsGenMappedType.test.ts.snap            |   41 -
 .../docsGenPropEditor.test.ts.snap            |   44 -
 .../__snapshots__/docsGenUnion.test.ts.snap   |  313 ---
 .../ts/tasks/docsGen/__tests__/all.test.ts    |  276 +++
 .../docsGen/__tests__/docsGenComments.test.ts |   45 -
 .../__tests__/docsGenComplexTypes.test.ts     |  123 --
 .../__tests__/docsGenIntersection.test.ts     |   47 -
 .../__tests__/docsGenMappedType.test.ts       |   12 -
 .../__tests__/docsGenPropEditor.test.ts       |   13 -
 .../docsGen/__tests__/docsGenUnion.test.ts    |   44 -
 .../docsGen/__tests__/utils/test-utils.ts     |    7 +-
 15 files changed, 1957 insertions(+), 1965 deletions(-)
 create mode 100644 uui-build/ts/tasks/docsGen/__tests__/__snapshots__/all.test.ts.snap
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenComments.test.ts.snap
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenComplexTypes.test.ts.snap
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenIntersection.test.ts.snap
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenMappedType.test.ts.snap
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenPropEditor.test.ts.snap
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenUnion.test.ts.snap
 create mode 100644 uui-build/ts/tasks/docsGen/__tests__/all.test.ts
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/docsGenComments.test.ts
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/docsGenComplexTypes.test.ts
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/docsGenIntersection.test.ts
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/docsGenMappedType.test.ts
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/docsGenPropEditor.test.ts
 delete mode 100644 uui-build/ts/tasks/docsGen/__tests__/docsGenUnion.test.ts

diff --git a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/all.test.ts.snap b/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/all.test.ts.snap
new file mode 100644
index 0000000000..0eaa8e7a5c
--- /dev/null
+++ b/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/all.test.ts.snap
@@ -0,0 +1,1675 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docsGen:all docsGen:comments should convert comments 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:ITest": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "ITest",
+     "nameFull": "ITest"
+    },
+    "src": "test/test.tsx",
+    "comment": {
+     "raw": [
+      "This is an export level multiline TSDoc."
+     ]
+    },
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "ITest",
+     "print": [
+      "/**",
+      " * This is an export level multiline TSDoc.",
+      "*/",
+      "interface ITest {",
+      "    // Single line comment should be ignored",
+      "    a: number;",
+      "    /** This is property-level TSDoc */",
+      "    b: number;",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "a",
+      "name": "a",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     },
+     {
+      "uid": "b",
+      "name": "b",
+      "comment": {
+       "raw": [
+        "This is property-level TSDoc"
+       ]
+      },
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:comments should convert property-level tags 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:ITest": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "ITest",
+     "nameFull": "ITest"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "ITest",
+     "print": [
+      "interface ITest {",
+      "    /**",
+      "     * This is property \\"a\\"",
+      "     * @default true",
+      "     */",
+      "    a: boolean;",
+      "    /**",
+      "     * This is property \\"b\\"",
+      "     * @default 100",
+      "     */",
+      "    b: number;",
+      "    /**",
+      "     * This is property \\"c\\"",
+      "     * @default 'hello'",
+      "     */",
+      "    c: string;",
+      "    /**",
+      "     * This is property \\"d\\"",
+      "     * @default null",
+      "     */",
+      "    d: string;",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "a",
+      "name": "a",
+      "comment": {
+       "raw": [
+        "This is property \\"a\\"",
+        " @default true"
+       ],
+       "tags": {
+        "@default": true
+       }
+      },
+      "typeValue": {
+       "raw": "boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "required": true
+     },
+     {
+      "uid": "b",
+      "name": "b",
+      "comment": {
+       "raw": [
+        "This is property \\"b\\"",
+        " @default 100"
+       ],
+       "tags": {
+        "@default": 100
+       }
+      },
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     },
+     {
+      "uid": "c",
+      "name": "c",
+      "comment": {
+       "raw": [
+        "This is property \\"c\\"",
+        " @default 'hello'"
+       ],
+       "tags": {
+        "@default": "hello"
+       }
+      },
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "required": true
+     },
+     {
+      "uid": "d",
+      "name": "d",
+      "comment": {
+       "raw": [
+        "This is property \\"d\\"",
+        " @default null"
+       ],
+       "tags": {
+        "@default": null
+       }
+      },
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:complexTypes should convert interface when it extends another interface and passes specific generic parameter to it 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:IInterface": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "IInterface",
+     "nameFull": "IInterface"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "IInterface",
+     "print": [
+      "interface IInterface extends IBaseInterface<string> {",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "value",
+      "name": "value",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "test/test.tsx:IBaseInterface",
+      "required": true
+     },
+     {
+      "uid": "onValueChange",
+      "name": "onValueChange",
+      "typeValue": {
+       "raw": "(newValue: string) => void"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "from": "test/test.tsx:IBaseInterface",
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "test/test.tsx:IBaseInterface": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "IBaseInterface",
+     "nameFull": "IBaseInterface<T>"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:complexTypes should convert interface which extends other interface 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:ITestA": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "ITestA",
+     "nameFull": "ITestA"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "ITestA",
+     "print": [
+      "interface ITestA extends ITestB {",
+      "    // This comment must be ignored, because it's not TSDoc",
+      "    aProp: 'black' | 'white';",
+      "    propExternalTypeTest: HTMLElement;",
+      "    /** This is PropertySignature */",
+      "    propSignatureTest: {",
+      "        name: string;",
+      "        value: any;",
+      "    }[];",
+      "    /** This is MethodSignature */",
+      "    methodSignatureTest: (a?: number, b?: number) => number | undefined;",
+      "    /** This is MethodDeclaration */",
+      "    methodDeclarationTest: (p: number) => number;",
+      "    /** This is GetAccessor */",
+      "    get someBool(): boolean;",
+      "    /** This is SetAccessor */",
+      "    set someBool(b: boolean);",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "aProp",
+      "name": "aProp",
+      "typeValue": {
+       "raw": "'black' | 'white'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "black",
+        "white"
+       ]
+      },
+      "required": true
+     },
+     {
+      "uid": "propExternalTypeTest",
+      "name": "propExternalTypeTest",
+      "typeValue": {
+       "raw": "HTMLElement"
+      },
+      "required": true
+     },
+     {
+      "uid": "propSignatureTest",
+      "name": "propSignatureTest",
+      "comment": {
+       "raw": [
+        "This is PropertySignature"
+       ]
+      },
+      "typeValue": {
+       "raw": "{ name: string; value: any; }[]"
+      },
+      "required": true
+     },
+     {
+      "uid": "methodSignatureTest",
+      "name": "methodSignatureTest",
+      "comment": {
+       "raw": [
+        "This is MethodSignature"
+       ]
+      },
+      "typeValue": {
+       "raw": "(a?: number | undefined, b?: number | undefined) => number | undefined"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "required": true
+     },
+     {
+      "uid": "methodDeclarationTest",
+      "name": "methodDeclarationTest",
+      "comment": {
+       "raw": [
+        "This is MethodDeclaration"
+       ]
+      },
+      "typeValue": {
+       "raw": "(p: number) => number"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "required": true
+     },
+     {
+      "uid": "get someBool",
+      "name": "get someBool",
+      "comment": {
+       "raw": [
+        "This is GetAccessor"
+       ]
+      },
+      "typeValue": {
+       "raw": "get someBool(): boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "required": true
+     },
+     {
+      "uid": "a",
+      "name": "a",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:ITestB",
+      "required": true
+     },
+     {
+      "uid": "b",
+      "name": "b",
+      "comment": {
+       "raw": [
+        "This is inherited property TSDoc"
+       ]
+      },
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:ITestB",
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "test/test.tsx:ITestB": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "ITestB",
+     "nameFull": "ITestB"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "ITestB",
+     "print": [
+      "interface ITestB {",
+      "    a: number;",
+      "    /** This is inherited property TSDoc */",
+      "    b: number;",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "a",
+      "name": "a",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     },
+     {
+      "uid": "b",
+      "name": "b",
+      "comment": {
+       "raw": [
+        "This is inherited property TSDoc"
+       ]
+      },
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:complexTypes should convert interface with generics 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:AcceptDropParams": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "AcceptDropParams",
+     "nameFull": "AcceptDropParams<TSrcData, TDstData>"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "AcceptDropParams<TSrcData, TDstData>",
+     "print": [
+      "interface AcceptDropParams<TSrcData, TDstData> {",
+      "    srcData: TSrcData;",
+      "    dstData?: TDstData;",
+      "    offsetLeft: number;",
+      "    offsetTop: number;",
+      "    targetWidth: number;",
+      "    targetHeight: number;",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "srcData",
+      "name": "srcData",
+      "typeValue": {
+       "raw": "TSrcData"
+      },
+      "required": true
+     },
+     {
+      "uid": "dstData",
+      "name": "dstData",
+      "typeValue": {
+       "raw": "TDstData"
+      },
+      "required": false
+     },
+     {
+      "uid": "offsetLeft",
+      "name": "offsetLeft",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     },
+     {
+      "uid": "offsetTop",
+      "name": "offsetTop",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     },
+     {
+      "uid": "targetWidth",
+      "name": "targetWidth",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     },
+     {
+      "uid": "targetHeight",
+      "name": "targetHeight",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:complexTypes should convert object type with different types of props 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TPrimitives": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TPrimitives",
+     "nameFull": "TPrimitives"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "TPrimitives",
+     "print": [
+      "type TPrimitives = {",
+      "    pBool: boolean;",
+      "    pNumber: number;",
+      "    pString: string;",
+      "    pAny: any;",
+      "    pUnknown: unknown;",
+      "    pNever: never;",
+      "    pVoid: void;",
+      "    pNull: null;",
+      "    pUndefined: undefined;",
+      "    pArray: string[];",
+      "    pObject: object;",
+      "    pBigint: bigint;",
+      "    pSymbol: symbol;",
+      "    pLiteral: 'test';",
+      "    pTuple: [",
+      "        boolean,",
+      "        number,",
+      "        string,",
+      "        any,",
+      "        unknown,",
+      "        never,",
+      "        void,",
+      "        null,",
+      "        undefined,",
+      "        string[],",
+      "        object,",
+      "        bigint,",
+      "        symbol,",
+      "        'test'",
+      "    ];",
+      "    pUnion: boolean | number | string | never | void | null | undefined | string[] | object | bigint | symbol | 'test';",
+      "};"
+     ]
+    },
+    "props": [
+     {
+      "uid": "pBool",
+      "name": "pBool",
+      "typeValue": {
+       "raw": "boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "required": true
+     },
+     {
+      "uid": "pNumber",
+      "name": "pNumber",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": true
+     },
+     {
+      "uid": "pString",
+      "name": "pString",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "required": true
+     },
+     {
+      "uid": "pAny",
+      "name": "pAny",
+      "typeValue": {
+       "raw": "any"
+      },
+      "required": true
+     },
+     {
+      "uid": "pUnknown",
+      "name": "pUnknown",
+      "typeValue": {
+       "raw": "unknown"
+      },
+      "required": true
+     },
+     {
+      "uid": "pNever",
+      "name": "pNever",
+      "typeValue": {
+       "raw": "never"
+      },
+      "required": true
+     },
+     {
+      "uid": "pVoid",
+      "name": "pVoid",
+      "typeValue": {
+       "raw": "void"
+      },
+      "required": true
+     },
+     {
+      "uid": "pNull",
+      "name": "pNull",
+      "typeValue": {
+       "raw": "null"
+      },
+      "required": true
+     },
+     {
+      "uid": "pUndefined",
+      "name": "pUndefined",
+      "typeValue": {
+       "raw": "undefined"
+      },
+      "required": true
+     },
+     {
+      "uid": "pArray",
+      "name": "pArray",
+      "typeValue": {
+       "raw": "string[]"
+      },
+      "required": true
+     },
+     {
+      "uid": "pObject",
+      "name": "pObject",
+      "typeValue": {
+       "raw": "object"
+      },
+      "required": true
+     },
+     {
+      "uid": "pBigint",
+      "name": "pBigint",
+      "typeValue": {
+       "raw": "bigint"
+      },
+      "required": true
+     },
+     {
+      "uid": "pSymbol",
+      "name": "pSymbol",
+      "typeValue": {
+       "raw": "symbol"
+      },
+      "required": true
+     },
+     {
+      "uid": "pLiteral",
+      "name": "pLiteral",
+      "typeValue": {
+       "raw": "'test'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "test"
+       ]
+      },
+      "required": true
+     },
+     {
+      "uid": "pTuple",
+      "name": "pTuple",
+      "typeValue": {
+       "raw": "[boolean, number, string, any, unknown, never, void, null, undefined, string[], object, bigint, symbol, 'test']"
+      },
+      "required": true
+     },
+     {
+      "uid": "pUnion",
+      "name": "pUnion",
+      "typeValue": {
+       "raw": "null | string | number | bigint | boolean | symbol | void | object | string[]"
+      },
+      "required": false
+     }
+    ],
+    "propsFromUnion": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:complexTypes should expand props if internal type is wrapped in Typescript utility type 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TTest": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TTest",
+     "nameFull": "TTest"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "TTest",
+     "print": [
+      "type TTest = Omit<TLocal, 'p1'>;"
+     ]
+    },
+    "props": [
+     {
+      "uid": "p2",
+      "name": "p2",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "test/test.tsx:TLocal",
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "test/test.tsx:TLocal": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TLocal",
+     "nameFull": "TLocal"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:complexTypes should include generic type argument names in fullName of type 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:IA": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "IA",
+     "nameFull": "IA<T>"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "IA<T>",
+     "print": [
+      "interface IA<T> {",
+      "    p1: Record<string, T>;",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "p1",
+      "name": "p1",
+      "typeValue": {
+       "raw": "Record<string, T>"
+      },
+      "typeValueRef": "node_modules/typescript/lib/lib.es5.d.ts:Record",
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "test/test.tsx:TA": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TA",
+     "nameFull": "TA<S>"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "TA<S>",
+     "print": [
+      "type TA<S> = {",
+      "    p1: Record<string, S>;",
+      "};"
+     ]
+    },
+    "props": [
+     {
+      "uid": "p1",
+      "name": "p1",
+      "typeValue": {
+       "raw": "Record<string, S>"
+      },
+      "typeValueRef": "node_modules/typescript/lib/lib.es5.d.ts:Record",
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "node_modules/typescript/lib/lib.es5.d.ts:Record": {
+   "summary": {
+    "module": "node_modules/typescript/lib/lib.es5.d.ts",
+    "typeName": {
+     "name": "Record",
+     "nameFull": "Record<K, T>"
+    },
+    "src": "node_modules/typescript/lib/lib.es5.d.ts",
+    "exported": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:complexTypes should mark props as optional when type extends from Partial of another type 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:ISecondType": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "ISecondType",
+     "nameFull": "ISecondType"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "ISecondType",
+     "print": [
+      "interface ISecondType extends Partial<IFirstType> {",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "value",
+      "name": "value",
+      "typeValue": {
+       "raw": "boolean"
+      },
+      "editor": {
+       "type": "bool"
+      },
+      "from": "test/test.tsx:IFirstType",
+      "required": false
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "test/test.tsx:IFirstType": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "IFirstType",
+     "nameFull": "IFirstType"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:complexTypes should not expand props from external type 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TExternalTypeTest": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TExternalTypeTest",
+     "nameFull": "TExternalTypeTest"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "HTMLElement",
+     "print": [
+      "type TExternalTypeTest = HTMLElement;"
+     ]
+    }
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:intersection should convert intersection 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TIntersection": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TIntersection",
+     "nameFull": "TIntersection"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "TIntersection",
+     "print": [
+      "type TIntersection = TIntersectionMemberA & IIntersectionMemberB;"
+     ]
+    },
+    "props": [
+     {
+      "uid": "a1",
+      "name": "a1",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:TIntersectionMemberA",
+      "required": true
+     },
+     {
+      "uid": "a2",
+      "name": "a2",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "test/test.tsx:TIntersectionMemberA",
+      "required": true
+     },
+     {
+      "uid": "b1",
+      "name": "b1",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:IIntersectionMemberB",
+      "required": true
+     },
+     {
+      "uid": "b2",
+      "name": "b2",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "test/test.tsx:IIntersectionMemberB",
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "test/test.tsx:IIntersectionMemberB": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "IIntersectionMemberB",
+     "nameFull": "IIntersectionMemberB"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  },
+  "test/test.tsx:TIntersectionMemberA": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TIntersectionMemberA",
+     "nameFull": "TIntersectionMemberA"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:intersection should convert top level type with Omit 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TIntersection": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TIntersection",
+     "nameFull": "TIntersection"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "TIntersection",
+     "print": [
+      "type TIntersection = Omit<TFirst, 'f2'>;"
+     ]
+    },
+    "props": [
+     {
+      "uid": "f1",
+      "name": "f1",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:TFirst",
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "test/test.tsx:TFirst": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TFirst",
+     "nameFull": "TFirst"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:intersection should convert type intersection with Omit 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TIntersection": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TIntersection",
+     "nameFull": "TIntersection"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "TIntersection",
+     "print": [
+      "type TIntersection = Omit<TFirst, 'f2'> & TSecond;"
+     ]
+    },
+    "props": [
+     {
+      "uid": "f1",
+      "name": "f1",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:IFirstPart1",
+      "required": true
+     },
+     {
+      "uid": "f3",
+      "name": "f3",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:IFirstPart2",
+      "required": true
+     },
+     {
+      "uid": "f4",
+      "name": "f4",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:IFirstPart2",
+      "required": true
+     },
+     {
+      "uid": "s1",
+      "name": "s1",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:TSecond",
+      "required": true
+     },
+     {
+      "uid": "s2",
+      "name": "s2",
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "test/test.tsx:TSecond",
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "test/test.tsx:IFirstPart1": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "IFirstPart1",
+     "nameFull": "IFirstPart1"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  },
+  "test/test.tsx:IFirstPart2": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "IFirstPart2",
+     "nameFull": "IFirstPart2"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  },
+  "test/test.tsx:TSecond": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TSecond",
+     "nameFull": "TSecond"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:mappedType should convert mapped type 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TLocal": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TLocal",
+     "nameFull": "TLocal"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "TLocal",
+     "print": [
+      "type TLocal = {",
+      "    [key: number]: string;",
+      "};"
+     ]
+    },
+    "props": [
+     {
+      "uid": "[key: number]",
+      "name": "[key: number]",
+      "typeValue": {
+       "raw": "string"
+      },
+      "required": true
+     }
+    ],
+    "propsFromUnion": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:propEditor should convert prop editor for optional icon prop 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TTest": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TTest",
+     "nameFull": "TTest"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "TTest",
+     "print": [
+      "interface TTest {",
+      "    icon?: Icon;",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "icon",
+      "name": "icon",
+      "typeValue": {
+       "raw": "Icon"
+      },
+      "editor": {
+       "type": "component"
+      },
+      "required": false
+     }
+    ],
+    "propsFromUnion": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:union should convert union of simple types 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TUnionTest": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TUnionTest",
+     "nameFull": "TUnionTest"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "boolean | 'one' | 'two' | 'three' | 'four'",
+     "print": [
+      "type TUnionTest = 'one' | 'two' | 'three' | 'four' | boolean;"
+     ]
+    }
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:union should convert union of two anonymous object types 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TTest": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TTest",
+     "nameFull": "TTest"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "{ sameProp: string; n1Prop: string; } | { sameProp: string; n2Prop: string; }",
+     "print": [
+      "type TTest = ({",
+      "    sameProp: string;",
+      "    n1Prop: string;",
+      "}) | ({",
+      "    sameProp: string;",
+      "    n2Prop: string;",
+      "});"
+     ]
+    },
+    "props": [
+     {
+      "uid": "sameProp",
+      "name": "sameProp",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "required": true
+     },
+     {
+      "uid": "n1Prop",
+      "name": "n1Prop",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "required": true
+     },
+     {
+      "uid": "n2Prop",
+      "name": "n2Prop",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "required": true
+     }
+    ],
+    "propsFromUnion": true
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:union should convert union of two object types 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TTest": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TTest",
+     "nameFull": "TTest"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "N1 | N2",
+     "print": [
+      "type TTest = N1 | N2;"
+     ]
+    },
+    "props": [
+     {
+      "uid": "sameProp",
+      "name": "sameProp",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "test/test.tsx:N1",
+      "required": true
+     },
+     {
+      "uid": "n1Prop",
+      "name": "n1Prop",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "test/test.tsx:N1",
+      "required": true
+     },
+     {
+      "uid": "sameProp_2",
+      "name": "sameProp",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "test/test.tsx:N2",
+      "required": true
+     },
+     {
+      "uid": "n2Prop",
+      "name": "n2Prop",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "test/test.tsx:N2",
+      "required": true
+     }
+    ],
+    "propsFromUnion": true
+   }
+  },
+  "test/test.tsx:N1": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "N1",
+     "nameFull": "N1"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  },
+  "test/test.tsx:N2": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "N2",
+     "nameFull": "N2"
+    },
+    "src": "test/test.tsx",
+    "exported": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:union should not expand ReactNode type of property 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TTestOptional": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TTestOptional",
+     "nameFull": "TTestOptional"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "TTestOptional",
+     "print": [
+      "interface TTestOptional {",
+      "    testProp?: React.ReactNode;",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "testProp",
+      "name": "testProp",
+      "typeValue": {
+       "raw": "React.ReactNode"
+      },
+      "typeValueRef": "@types/react:ReactNode",
+      "required": false
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "test/test.tsx:TTestRequired": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TTestRequired",
+     "nameFull": "TTestRequired"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 264,
+    "typeValue": {
+     "raw": "TTestRequired",
+     "print": [
+      "interface TTestRequired {",
+      "    testProp: React.ReactNode;",
+      "}"
+     ]
+    },
+    "props": [
+     {
+      "uid": "testProp",
+      "name": "testProp",
+      "typeValue": {
+       "raw": "React.ReactNode"
+      },
+      "typeValueRef": "@types/react:ReactNode",
+      "required": false
+     }
+    ],
+    "propsFromUnion": false
+   }
+  },
+  "@types/react:ReactNode": {
+   "summary": {
+    "module": "@types/react",
+    "typeName": {
+     "name": "ReactNode",
+     "nameFull": "ReactNode"
+    },
+    "src": "node_modules/@types/react/index.d.ts",
+    "exported": false
+   }
+  }
+ }
+}
+`;
+
+exports[`docsGen:all docsGen:union should not try to expand props if union contains an external type 1`] = `
+{
+ "docsGenTypes": {
+  "test/test.tsx:TTest": {
+   "summary": {
+    "module": "test/test.tsx",
+    "typeName": {
+     "name": "TTest",
+     "nameFull": "TTest"
+    },
+    "src": "test/test.tsx",
+    "exported": true
+   },
+   "details": {
+    "kind": 265,
+    "typeValue": {
+     "raw": "{ a: string; b: string; } | HTMLElement",
+     "print": [
+      "type TTest = ({",
+      "    a: string;",
+      "    b: string;",
+      "}) | HTMLElement;"
+     ]
+    }
+   }
+  }
+ }
+}
+`;
diff --git a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenComments.test.ts.snap b/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenComments.test.ts.snap
deleted file mode 100644
index b64527cf0a..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenComments.test.ts.snap
+++ /dev/null
@@ -1,202 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`docsGen:comments should convert comments 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:ITest": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "ITest",
-     "nameFull": "ITest"
-    },
-    "src": "test/test.tsx",
-    "comment": {
-     "raw": [
-      "This is an export level multiline TSDoc."
-     ]
-    },
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "ITest",
-     "print": [
-      "/**",
-      " * This is an export level multiline TSDoc.",
-      "*/",
-      "interface ITest {",
-      "    // Single line comment should be ignored",
-      "    a: number;",
-      "    /** This is property-level TSDoc */",
-      "    b: number;",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "a",
-      "name": "a",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     },
-     {
-      "uid": "b",
-      "name": "b",
-      "comment": {
-       "raw": [
-        "This is property-level TSDoc"
-       ]
-      },
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:comments should convert property-level tags 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:ITest": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "ITest",
-     "nameFull": "ITest"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "ITest",
-     "print": [
-      "interface ITest {",
-      "    /**",
-      "     * This is property \\"a\\"",
-      "     * @default true",
-      "     */",
-      "    a: boolean;",
-      "    /**",
-      "     * This is property \\"b\\"",
-      "     * @default 100",
-      "     */",
-      "    b: number;",
-      "    /**",
-      "     * This is property \\"c\\"",
-      "     * @default 'hello'",
-      "     */",
-      "    c: string;",
-      "    /**",
-      "     * This is property \\"d\\"",
-      "     * @default null",
-      "     */",
-      "    d: string;",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "a",
-      "name": "a",
-      "comment": {
-       "raw": [
-        "This is property \\"a\\"",
-        " @default true"
-       ],
-       "tags": {
-        "@default": true
-       }
-      },
-      "typeValue": {
-       "raw": "boolean"
-      },
-      "editor": {
-       "type": "bool"
-      },
-      "required": true
-     },
-     {
-      "uid": "b",
-      "name": "b",
-      "comment": {
-       "raw": [
-        "This is property \\"b\\"",
-        " @default 100"
-       ],
-       "tags": {
-        "@default": 100
-       }
-      },
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     },
-     {
-      "uid": "c",
-      "name": "c",
-      "comment": {
-       "raw": [
-        "This is property \\"c\\"",
-        " @default 'hello'"
-       ],
-       "tags": {
-        "@default": "hello"
-       }
-      },
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "required": true
-     },
-     {
-      "uid": "d",
-      "name": "d",
-      "comment": {
-       "raw": [
-        "This is property \\"d\\"",
-        " @default null"
-       ],
-       "tags": {
-        "@default": null
-       }
-      },
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  }
- }
-}
-`;
diff --git a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenComplexTypes.test.ts.snap b/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenComplexTypes.test.ts.snap
deleted file mode 100644
index ed009b6c08..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenComplexTypes.test.ts.snap
+++ /dev/null
@@ -1,803 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`docsGen:complexTypes should convert interface when it extends another interface and passes specific generic parameter to it 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:IInterface": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "IInterface",
-     "nameFull": "IInterface"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "IInterface",
-     "print": [
-      "interface IInterface extends IBaseInterface<string> {",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "value",
-      "name": "value",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "from": "test/test.tsx:IBaseInterface",
-      "required": true
-     },
-     {
-      "uid": "onValueChange",
-      "name": "onValueChange",
-      "typeValue": {
-       "raw": "(newValue: string) => void"
-      },
-      "editor": {
-       "type": "func"
-      },
-      "from": "test/test.tsx:IBaseInterface",
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "test/test.tsx:IBaseInterface": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "IBaseInterface",
-     "nameFull": "IBaseInterface<T>"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:complexTypes should convert interface which extends other interface 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:ITestA": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "ITestA",
-     "nameFull": "ITestA"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "ITestA",
-     "print": [
-      "interface ITestA extends ITestB {",
-      "    // This comment must be ignored, because it's not TSDoc",
-      "    aProp: 'black' | 'white';",
-      "    propExternalTypeTest: HTMLElement;",
-      "    /** This is PropertySignature */",
-      "    propSignatureTest: {",
-      "        name: string;",
-      "        value: any;",
-      "    }[];",
-      "    /** This is MethodSignature */",
-      "    methodSignatureTest: (a?: number, b?: number) => number | undefined;",
-      "    /** This is MethodDeclaration */",
-      "    methodDeclarationTest: (p: number) => number;",
-      "    /** This is GetAccessor */",
-      "    get someBool(): boolean;",
-      "    /** This is SetAccessor */",
-      "    set someBool(b: boolean);",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "aProp",
-      "name": "aProp",
-      "typeValue": {
-       "raw": "'black' | 'white'"
-      },
-      "editor": {
-       "type": "oneOf",
-       "options": [
-        "black",
-        "white"
-       ]
-      },
-      "required": true
-     },
-     {
-      "uid": "propExternalTypeTest",
-      "name": "propExternalTypeTest",
-      "typeValue": {
-       "raw": "HTMLElement"
-      },
-      "required": true
-     },
-     {
-      "uid": "propSignatureTest",
-      "name": "propSignatureTest",
-      "comment": {
-       "raw": [
-        "This is PropertySignature"
-       ]
-      },
-      "typeValue": {
-       "raw": "{ name: string; value: any; }[]"
-      },
-      "required": true
-     },
-     {
-      "uid": "methodSignatureTest",
-      "name": "methodSignatureTest",
-      "comment": {
-       "raw": [
-        "This is MethodSignature"
-       ]
-      },
-      "typeValue": {
-       "raw": "(a?: number | undefined, b?: number | undefined) => number | undefined"
-      },
-      "editor": {
-       "type": "func"
-      },
-      "required": true
-     },
-     {
-      "uid": "methodDeclarationTest",
-      "name": "methodDeclarationTest",
-      "comment": {
-       "raw": [
-        "This is MethodDeclaration"
-       ]
-      },
-      "typeValue": {
-       "raw": "(p: number) => number"
-      },
-      "editor": {
-       "type": "func"
-      },
-      "required": true
-     },
-     {
-      "uid": "get someBool",
-      "name": "get someBool",
-      "comment": {
-       "raw": [
-        "This is GetAccessor"
-       ]
-      },
-      "typeValue": {
-       "raw": "get someBool(): boolean"
-      },
-      "editor": {
-       "type": "bool"
-      },
-      "required": true
-     },
-     {
-      "uid": "a",
-      "name": "a",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:ITestB",
-      "required": true
-     },
-     {
-      "uid": "b",
-      "name": "b",
-      "comment": {
-       "raw": [
-        "This is inherited property TSDoc"
-       ]
-      },
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:ITestB",
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "test/test.tsx:ITestB": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "ITestB",
-     "nameFull": "ITestB"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "ITestB",
-     "print": [
-      "interface ITestB {",
-      "    a: number;",
-      "    /** This is inherited property TSDoc */",
-      "    b: number;",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "a",
-      "name": "a",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     },
-     {
-      "uid": "b",
-      "name": "b",
-      "comment": {
-       "raw": [
-        "This is inherited property TSDoc"
-       ]
-      },
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:complexTypes should convert interface with generics 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:AcceptDropParams": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "AcceptDropParams",
-     "nameFull": "AcceptDropParams<TSrcData, TDstData>"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "AcceptDropParams<TSrcData, TDstData>",
-     "print": [
-      "interface AcceptDropParams<TSrcData, TDstData> {",
-      "    srcData: TSrcData;",
-      "    dstData?: TDstData;",
-      "    offsetLeft: number;",
-      "    offsetTop: number;",
-      "    targetWidth: number;",
-      "    targetHeight: number;",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "srcData",
-      "name": "srcData",
-      "typeValue": {
-       "raw": "TSrcData"
-      },
-      "required": true
-     },
-     {
-      "uid": "dstData",
-      "name": "dstData",
-      "typeValue": {
-       "raw": "TDstData"
-      },
-      "required": false
-     },
-     {
-      "uid": "offsetLeft",
-      "name": "offsetLeft",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     },
-     {
-      "uid": "offsetTop",
-      "name": "offsetTop",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     },
-     {
-      "uid": "targetWidth",
-      "name": "targetWidth",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     },
-     {
-      "uid": "targetHeight",
-      "name": "targetHeight",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:complexTypes should convert object type with different types of props 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TPrimitives": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TPrimitives",
-     "nameFull": "TPrimitives"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "TPrimitives",
-     "print": [
-      "type TPrimitives = {",
-      "    pBool: boolean;",
-      "    pNumber: number;",
-      "    pString: string;",
-      "    pAny: any;",
-      "    pUnknown: unknown;",
-      "    pNever: never;",
-      "    pVoid: void;",
-      "    pNull: null;",
-      "    pUndefined: undefined;",
-      "    pArray: string[];",
-      "    pObject: object;",
-      "    pBigint: bigint;",
-      "    pSymbol: symbol;",
-      "    pLiteral: 'test';",
-      "    pTuple: [",
-      "        boolean,",
-      "        number,",
-      "        string,",
-      "        any,",
-      "        unknown,",
-      "        never,",
-      "        void,",
-      "        null,",
-      "        undefined,",
-      "        string[],",
-      "        object,",
-      "        bigint,",
-      "        symbol,",
-      "        'test'",
-      "    ];",
-      "    pUnion: boolean | number | string | never | void | null | undefined | string[] | object | bigint | symbol | 'test';",
-      "};"
-     ]
-    },
-    "props": [
-     {
-      "uid": "pBool",
-      "name": "pBool",
-      "typeValue": {
-       "raw": "boolean"
-      },
-      "editor": {
-       "type": "bool"
-      },
-      "required": true
-     },
-     {
-      "uid": "pNumber",
-      "name": "pNumber",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "required": true
-     },
-     {
-      "uid": "pString",
-      "name": "pString",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "required": true
-     },
-     {
-      "uid": "pAny",
-      "name": "pAny",
-      "typeValue": {
-       "raw": "any"
-      },
-      "required": true
-     },
-     {
-      "uid": "pUnknown",
-      "name": "pUnknown",
-      "typeValue": {
-       "raw": "unknown"
-      },
-      "required": true
-     },
-     {
-      "uid": "pNever",
-      "name": "pNever",
-      "typeValue": {
-       "raw": "never"
-      },
-      "required": true
-     },
-     {
-      "uid": "pVoid",
-      "name": "pVoid",
-      "typeValue": {
-       "raw": "void"
-      },
-      "required": true
-     },
-     {
-      "uid": "pNull",
-      "name": "pNull",
-      "typeValue": {
-       "raw": "null"
-      },
-      "required": true
-     },
-     {
-      "uid": "pUndefined",
-      "name": "pUndefined",
-      "typeValue": {
-       "raw": "undefined"
-      },
-      "required": true
-     },
-     {
-      "uid": "pArray",
-      "name": "pArray",
-      "typeValue": {
-       "raw": "string[]"
-      },
-      "required": true
-     },
-     {
-      "uid": "pObject",
-      "name": "pObject",
-      "typeValue": {
-       "raw": "object"
-      },
-      "required": true
-     },
-     {
-      "uid": "pBigint",
-      "name": "pBigint",
-      "typeValue": {
-       "raw": "bigint"
-      },
-      "required": true
-     },
-     {
-      "uid": "pSymbol",
-      "name": "pSymbol",
-      "typeValue": {
-       "raw": "symbol"
-      },
-      "required": true
-     },
-     {
-      "uid": "pLiteral",
-      "name": "pLiteral",
-      "typeValue": {
-       "raw": "'test'"
-      },
-      "editor": {
-       "type": "oneOf",
-       "options": [
-        "test"
-       ]
-      },
-      "required": true
-     },
-     {
-      "uid": "pTuple",
-      "name": "pTuple",
-      "typeValue": {
-       "raw": "[boolean, number, string, any, unknown, never, void, null, undefined, string[], object, bigint, symbol, 'test']"
-      },
-      "required": true
-     },
-     {
-      "uid": "pUnion",
-      "name": "pUnion",
-      "typeValue": {
-       "raw": "null | string | number | bigint | boolean | symbol | void | object | string[]"
-      },
-      "required": false
-     }
-    ],
-    "propsFromUnion": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:complexTypes should expand props if internal type is wrapped in Typescript utility type 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TTest": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TTest",
-     "nameFull": "TTest"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "TTest",
-     "print": [
-      "type TTest = Omit<TLocal, 'p1'>;"
-     ]
-    },
-    "props": [
-     {
-      "uid": "p2",
-      "name": "p2",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "from": "test/test.tsx:TLocal",
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "test/test.tsx:TLocal": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TLocal",
-     "nameFull": "TLocal"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:complexTypes should include generic type argument names in fullName of type 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:IA": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "IA",
-     "nameFull": "IA<T>"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "IA<T>",
-     "print": [
-      "interface IA<T> {",
-      "    p1: Record<string, T>;",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "p1",
-      "name": "p1",
-      "typeValue": {
-       "raw": "Record<string, T>"
-      },
-      "typeValueRef": "node_modules/typescript/lib/lib.es5.d.ts:Record",
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "test/test.tsx:TA": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TA",
-     "nameFull": "TA<S>"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "TA<S>",
-     "print": [
-      "type TA<S> = {",
-      "    p1: Record<string, S>;",
-      "};"
-     ]
-    },
-    "props": [
-     {
-      "uid": "p1",
-      "name": "p1",
-      "typeValue": {
-       "raw": "Record<string, S>"
-      },
-      "typeValueRef": "node_modules/typescript/lib/lib.es5.d.ts:Record",
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "node_modules/typescript/lib/lib.es5.d.ts:Record": {
-   "summary": {
-    "module": "node_modules/typescript/lib/lib.es5.d.ts",
-    "typeName": {
-     "name": "Record",
-     "nameFull": "Record<K, T>"
-    },
-    "src": "node_modules/typescript/lib/lib.es5.d.ts",
-    "exported": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:complexTypes should mark props as optional when type extends from Partial of another type 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:ISecondType": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "ISecondType",
-     "nameFull": "ISecondType"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "ISecondType",
-     "print": [
-      "interface ISecondType extends Partial<IFirstType> {",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "value",
-      "name": "value",
-      "typeValue": {
-       "raw": "boolean"
-      },
-      "editor": {
-       "type": "bool"
-      },
-      "from": "test/test.tsx:IFirstType",
-      "required": false
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "test/test.tsx:IFirstType": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "IFirstType",
-     "nameFull": "IFirstType"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:complexTypes should not expand props from external type 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TExternalTypeTest": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TExternalTypeTest",
-     "nameFull": "TExternalTypeTest"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "HTMLElement",
-     "print": [
-      "type TExternalTypeTest = HTMLElement;"
-     ]
-    }
-   }
-  }
- }
-}
-`;
diff --git a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenIntersection.test.ts.snap b/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenIntersection.test.ts.snap
deleted file mode 100644
index d72620c811..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenIntersection.test.ts.snap
+++ /dev/null
@@ -1,277 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`docsGen:intersection should convert intersection 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TIntersection": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TIntersection",
-     "nameFull": "TIntersection"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "TIntersection",
-     "print": [
-      "type TIntersection = TIntersectionMemberA & IIntersectionMemberB;"
-     ]
-    },
-    "props": [
-     {
-      "uid": "a1",
-      "name": "a1",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:TIntersectionMemberA",
-      "required": true
-     },
-     {
-      "uid": "a2",
-      "name": "a2",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "from": "test/test.tsx:TIntersectionMemberA",
-      "required": true
-     },
-     {
-      "uid": "b1",
-      "name": "b1",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:IIntersectionMemberB",
-      "required": true
-     },
-     {
-      "uid": "b2",
-      "name": "b2",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "from": "test/test.tsx:IIntersectionMemberB",
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "test/test.tsx:IIntersectionMemberB": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "IIntersectionMemberB",
-     "nameFull": "IIntersectionMemberB"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  },
-  "test/test.tsx:TIntersectionMemberA": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TIntersectionMemberA",
-     "nameFull": "TIntersectionMemberA"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:intersection should convert top level type with Omit 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TIntersection": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TIntersection",
-     "nameFull": "TIntersection"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "TIntersection",
-     "print": [
-      "type TIntersection = Omit<TFirst, 'f2'>;"
-     ]
-    },
-    "props": [
-     {
-      "uid": "f1",
-      "name": "f1",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:TFirst",
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "test/test.tsx:TFirst": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TFirst",
-     "nameFull": "TFirst"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:intersection should convert type intersection with Omit 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TIntersection": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TIntersection",
-     "nameFull": "TIntersection"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "TIntersection",
-     "print": [
-      "type TIntersection = Omit<TFirst, 'f2'> & TSecond;"
-     ]
-    },
-    "props": [
-     {
-      "uid": "f1",
-      "name": "f1",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:IFirstPart1",
-      "required": true
-     },
-     {
-      "uid": "f3",
-      "name": "f3",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:IFirstPart2",
-      "required": true
-     },
-     {
-      "uid": "f4",
-      "name": "f4",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:IFirstPart2",
-      "required": true
-     },
-     {
-      "uid": "s1",
-      "name": "s1",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:TSecond",
-      "required": true
-     },
-     {
-      "uid": "s2",
-      "name": "s2",
-      "typeValue": {
-       "raw": "number"
-      },
-      "editor": {
-       "type": "number"
-      },
-      "from": "test/test.tsx:TSecond",
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "test/test.tsx:IFirstPart1": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "IFirstPart1",
-     "nameFull": "IFirstPart1"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  },
-  "test/test.tsx:IFirstPart2": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "IFirstPart2",
-     "nameFull": "IFirstPart2"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  },
-  "test/test.tsx:TSecond": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TSecond",
-     "nameFull": "TSecond"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  }
- }
-}
-`;
diff --git a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenMappedType.test.ts.snap b/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenMappedType.test.ts.snap
deleted file mode 100644
index fac8a99072..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenMappedType.test.ts.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`docsGen:mappedType should convert mapped type 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TLocal": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TLocal",
-     "nameFull": "TLocal"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "TLocal",
-     "print": [
-      "type TLocal = {",
-      "    [key: number]: string;",
-      "};"
-     ]
-    },
-    "props": [
-     {
-      "uid": "[key: number]",
-      "name": "[key: number]",
-      "typeValue": {
-       "raw": "string"
-      },
-      "required": true
-     }
-    ],
-    "propsFromUnion": false
-   }
-  }
- }
-}
-`;
diff --git a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenPropEditor.test.ts.snap b/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenPropEditor.test.ts.snap
deleted file mode 100644
index fce2505e5b..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenPropEditor.test.ts.snap
+++ /dev/null
@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`docsGen:propEditor should convert prop editor for optional icon prop 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TTest": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TTest",
-     "nameFull": "TTest"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "TTest",
-     "print": [
-      "interface TTest {",
-      "    icon?: Icon;",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "icon",
-      "name": "icon",
-      "typeValue": {
-       "raw": "Icon"
-      },
-      "editor": {
-       "type": "component"
-      },
-      "required": false
-     }
-    ],
-    "propsFromUnion": false
-   }
-  }
- }
-}
-`;
diff --git a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenUnion.test.ts.snap b/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenUnion.test.ts.snap
deleted file mode 100644
index b25190a68e..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/__snapshots__/docsGenUnion.test.ts.snap
+++ /dev/null
@@ -1,313 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`docsGen:union should convert union of simple types 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TUnionTest": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TUnionTest",
-     "nameFull": "TUnionTest"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "boolean | 'one' | 'two' | 'three' | 'four'",
-     "print": [
-      "type TUnionTest = 'one' | 'two' | 'three' | 'four' | boolean;"
-     ]
-    }
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:union should convert union of two anonymous object types 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TTest": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TTest",
-     "nameFull": "TTest"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "{ sameProp: string; n1Prop: string; } | { sameProp: string; n2Prop: string; }",
-     "print": [
-      "type TTest = ({",
-      "    sameProp: string;",
-      "    n1Prop: string;",
-      "}) | ({",
-      "    sameProp: string;",
-      "    n2Prop: string;",
-      "});"
-     ]
-    },
-    "props": [
-     {
-      "uid": "sameProp",
-      "name": "sameProp",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "required": true
-     },
-     {
-      "uid": "n1Prop",
-      "name": "n1Prop",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "required": true
-     },
-     {
-      "uid": "n2Prop",
-      "name": "n2Prop",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "required": true
-     }
-    ],
-    "propsFromUnion": true
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:union should convert union of two object types 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TTest": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TTest",
-     "nameFull": "TTest"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "N1 | N2",
-     "print": [
-      "type TTest = N1 | N2;"
-     ]
-    },
-    "props": [
-     {
-      "uid": "sameProp",
-      "name": "sameProp",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "from": "test/test.tsx:N1",
-      "required": true
-     },
-     {
-      "uid": "n1Prop",
-      "name": "n1Prop",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "from": "test/test.tsx:N1",
-      "required": true
-     },
-     {
-      "uid": "sameProp_2",
-      "name": "sameProp",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "from": "test/test.tsx:N2",
-      "required": true
-     },
-     {
-      "uid": "n2Prop",
-      "name": "n2Prop",
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "from": "test/test.tsx:N2",
-      "required": true
-     }
-    ],
-    "propsFromUnion": true
-   }
-  },
-  "test/test.tsx:N1": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "N1",
-     "nameFull": "N1"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  },
-  "test/test.tsx:N2": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "N2",
-     "nameFull": "N2"
-    },
-    "src": "test/test.tsx",
-    "exported": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:union should not expand ReactNode type of property 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TTestOptional": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TTestOptional",
-     "nameFull": "TTestOptional"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "TTestOptional",
-     "print": [
-      "interface TTestOptional {",
-      "    testProp?: React.ReactNode;",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "testProp",
-      "name": "testProp",
-      "typeValue": {
-       "raw": "React.ReactNode"
-      },
-      "typeValueRef": "@types/react:ReactNode",
-      "required": false
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "test/test.tsx:TTestRequired": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TTestRequired",
-     "nameFull": "TTestRequired"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 264,
-    "typeValue": {
-     "raw": "TTestRequired",
-     "print": [
-      "interface TTestRequired {",
-      "    testProp: React.ReactNode;",
-      "}"
-     ]
-    },
-    "props": [
-     {
-      "uid": "testProp",
-      "name": "testProp",
-      "typeValue": {
-       "raw": "React.ReactNode"
-      },
-      "typeValueRef": "@types/react:ReactNode",
-      "required": false
-     }
-    ],
-    "propsFromUnion": false
-   }
-  },
-  "@types/react:ReactNode": {
-   "summary": {
-    "module": "@types/react",
-    "typeName": {
-     "name": "ReactNode",
-     "nameFull": "ReactNode"
-    },
-    "src": "node_modules/@types/react/index.d.ts",
-    "exported": false
-   }
-  }
- }
-}
-`;
-
-exports[`docsGen:union should not try to expand props if union contains an external type 1`] = `
-{
- "docsGenTypes": {
-  "test/test.tsx:TTest": {
-   "summary": {
-    "module": "test/test.tsx",
-    "typeName": {
-     "name": "TTest",
-     "nameFull": "TTest"
-    },
-    "src": "test/test.tsx",
-    "exported": true
-   },
-   "details": {
-    "kind": 265,
-    "typeValue": {
-     "raw": "{ a: string; b: string; } | HTMLElement",
-     "print": [
-      "type TTest = ({",
-      "    a: string;",
-      "    b: string;",
-      "}) | HTMLElement;"
-     ]
-    }
-   }
-  }
- }
-}
-`;
diff --git a/uui-build/ts/tasks/docsGen/__tests__/all.test.ts b/uui-build/ts/tasks/docsGen/__tests__/all.test.ts
new file mode 100644
index 0000000000..f4f690e852
--- /dev/null
+++ b/uui-build/ts/tasks/docsGen/__tests__/all.test.ts
@@ -0,0 +1,276 @@
+import { generateDocs } from './utils/test-utils';
+
+describe('docsGen:all', () => {
+    describe('docsGen:comments', () => {
+        test('should convert comments', () => {
+            const input = `
+            /**
+             * This is an export level multiline TSDoc.
+            */
+            export interface ITest {
+                // Single line comment should be ignored
+                a: number;
+                /** This is property-level TSDoc */
+                b: number;
+            }
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+        test('should convert property-level tags', () => {
+            const input = `
+            export interface ITest {
+                /** 
+                 * This is property "a"
+                 * @default true
+                 */
+                a: boolean;
+                /** 
+                 * This is property "b"
+                 * @default 100
+                 */
+                b: number;
+                /** 
+                 * This is property "c"
+                 * @default 'hello'
+                 */
+                c: string;
+                /** 
+                 * This is property "d"
+                 * @default null
+                 */
+                d: string;
+            }
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+    });
+    describe('docsGen:complexTypes', () => {
+        test('should convert object type with different types of props', () => {
+            const input = `
+            export type TPrimitives = {
+                pBool: boolean;
+                pNumber: number;
+                pString: string;
+                pAny: any;
+                pUnknown: unknown;
+                pNever: never;
+                pVoid: void;
+                pNull: null;
+                pUndefined: undefined;
+                pArray: string[];
+                pObject: object;
+                pBigint: bigint;
+                pSymbol: symbol;
+                pLiteral: 'test'
+                pTuple: [boolean, number, string, any, unknown, never, void, null, undefined, string[], object, bigint, symbol, 'test'];
+                pUnion: boolean | number | string | never | void | null | undefined | string[] | object | bigint | symbol | 'test';
+            }
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should convert interface which extends other interface', () => {
+            const input = `
+            export interface ITestB {
+                a: number;
+                /** This is inherited property TSDoc */
+                b: number;
+            }
+            export interface ITestA extends ITestB {
+                // This comment must be ignored, because it's not TSDoc
+                aProp: 'black' | 'white';
+
+                propExternalTypeTest: HTMLElement;
+
+                /** This is PropertySignature */
+                propSignatureTest: { name: string; value: any }[];
+
+                /** This is MethodSignature */
+                methodSignatureTest: (a?: number, b?: number) => number | undefined;
+
+                /** This is MethodDeclaration */
+                methodDeclarationTest: (p: number) => number;
+
+                /** This is GetAccessor */
+                get someBool(): boolean;
+
+                /** This is SetAccessor */
+                set someBool(b: boolean);
+            }
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should not expand props from external type', () => {
+            const input = 'export type TExternalTypeTest = HTMLElement;';
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should expand props if internal type is wrapped in Typescript utility type', () => {
+            const input = `
+            type TLocal = {
+                p1: number;
+                p2: string;
+            }
+            export type TTest = Omit<TLocal, 'p1'>;
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should include generic type argument names in fullName of type', () => {
+            const input = `
+            export interface IA<T> {
+                p1: Record<string, T>;
+            }
+            export type TA<S> = {
+                p1: Record<string, S>;
+            }
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should convert interface with generics', () => {
+            const input = `
+        export interface AcceptDropParams<TSrcData, TDstData> {
+            srcData: TSrcData;
+            dstData?: TDstData;
+            offsetLeft: number;
+            offsetTop: number;
+            targetWidth: number;
+            targetHeight: number;
+        }
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should convert interface when it extends another interface and passes specific generic parameter to it', () => {
+            const input = `
+            interface IBaseInterface<T> {
+                value: T;
+                onValueChange(newValue: T): void;
+            }            
+            export interface IInterface extends IBaseInterface<string> {};
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should mark props as optional when type extends from Partial of another type', () => {
+            const input = `
+            interface IFirstType {
+                value: boolean;
+            }
+            
+            export interface ISecondType extends Partial<IFirstType> {};
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+    });
+    describe('docsGen:intersection', () => {
+        test('should convert intersection', () => {
+            const input = `
+            type TIntersectionMemberA = {
+                a1: number;
+                a2: string;
+            }
+            interface IIntersectionMemberB {
+                b1: number;
+                b2: string;
+            }
+            export type TIntersection = TIntersectionMemberA & IIntersectionMemberB;
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+        test('should convert top level type with Omit', () => {
+            const input = `
+            interface TFirst {
+                f1: number;
+                f2: number;
+            }
+            export type TIntersection = Omit<TFirst, 'f2'>;
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+        test('should convert type intersection with Omit', () => {
+            const input = `
+            interface IFirstPart1 {
+                f1: number;
+                f2: number;
+            }
+            interface IFirstPart2 {
+                f3: number;
+                f4: number;
+            }
+            type TFirst = IFirstPart1 & IFirstPart2;
+            type TSecond = {
+                s1: number;
+                s2: number;
+            }
+            export type TIntersection = Omit<TFirst, 'f2'> & TSecond;
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+    });
+    describe('docsGen:mappedType', () => {
+        test('should convert mapped type', () => {
+            const input = `
+            export type TLocal = {
+                [key: number]: string;
+            }
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+    });
+    describe('docsGen:propEditor', () => {
+        test('should convert prop editor for optional icon prop', () => {
+            const input = `
+            type Icon = React.FC<any>;
+            export interface TTest {
+                icon?: Icon;
+            };
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+    });
+    describe('docsGen:union', () => {
+        test('should convert union of simple types', () => {
+            const input = `
+            export type TUnionTest = 'one' | 'two' | 'three' | 'four' | boolean;
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+        test('should convert union of two object types', () => {
+            const input = `
+            type N1 = ({ sameProp: string, n1Prop: string });
+            type N2 = ({ sameProp: string, n2Prop: string });
+            export type TTest = N1 | N2;
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should convert union of two anonymous object types', () => {
+            const input = `
+            export type TTest = ({ sameProp: string, n1Prop: string }) | ({ sameProp: string, n2Prop: string });
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should not try to expand props if union contains an external type', () => {
+            const input = `
+            export type TTest = ({ a: string, b: string }) | HTMLElement;
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+
+        test('should not expand ReactNode type of property', () => {
+            const input = `
+            export interface TTestOptional {
+                testProp?: React.ReactNode;
+            };
+            export interface TTestRequired {
+                testProp: React.ReactNode;
+            };
+        `;
+            expect(generateDocs(input)).toMatchSnapshot();
+        });
+    });
+});
diff --git a/uui-build/ts/tasks/docsGen/__tests__/docsGenComments.test.ts b/uui-build/ts/tasks/docsGen/__tests__/docsGenComments.test.ts
deleted file mode 100644
index d7fc8224cb..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/docsGenComments.test.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { generateDocs } from './utils/test-utils';
-
-describe('docsGen:comments', () => {
-    test('should convert comments', () => {
-        const input = `
-            /**
-             * This is an export level multiline TSDoc.
-            */
-            export interface ITest {
-                // Single line comment should be ignored
-                a: number;
-                /** This is property-level TSDoc */
-                b: number;
-            }
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-    test('should convert property-level tags', () => {
-        const input = `
-            export interface ITest {
-                /** 
-                 * This is property "a"
-                 * @default true
-                 */
-                a: boolean;
-                /** 
-                 * This is property "b"
-                 * @default 100
-                 */
-                b: number;
-                /** 
-                 * This is property "c"
-                 * @default 'hello'
-                 */
-                c: string;
-                /** 
-                 * This is property "d"
-                 * @default null
-                 */
-                d: string;
-            }
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-});
diff --git a/uui-build/ts/tasks/docsGen/__tests__/docsGenComplexTypes.test.ts b/uui-build/ts/tasks/docsGen/__tests__/docsGenComplexTypes.test.ts
deleted file mode 100644
index 9b10b19d4c..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/docsGenComplexTypes.test.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { generateDocs } from './utils/test-utils';
-
-describe('docsGen:complexTypes', () => {
-    test('should convert object type with different types of props', () => {
-        const input = `
-            export type TPrimitives = {
-                pBool: boolean;
-                pNumber: number;
-                pString: string;
-                pAny: any;
-                pUnknown: unknown;
-                pNever: never;
-                pVoid: void;
-                pNull: null;
-                pUndefined: undefined;
-                pArray: string[];
-                pObject: object;
-                pBigint: bigint;
-                pSymbol: symbol;
-                pLiteral: 'test'
-                pTuple: [boolean, number, string, any, unknown, never, void, null, undefined, string[], object, bigint, symbol, 'test'];
-                pUnion: boolean | number | string | never | void | null | undefined | string[] | object | bigint | symbol | 'test';
-            }
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should convert interface which extends other interface', () => {
-        const input = `
-            export interface ITestB {
-                a: number;
-                /** This is inherited property TSDoc */
-                b: number;
-            }
-            export interface ITestA extends ITestB {
-                // This comment must be ignored, because it's not TSDoc
-                aProp: 'black' | 'white';
-
-                propExternalTypeTest: HTMLElement;
-
-                /** This is PropertySignature */
-                propSignatureTest: { name: string; value: any }[];
-
-                /** This is MethodSignature */
-                methodSignatureTest: (a?: number, b?: number) => number | undefined;
-
-                /** This is MethodDeclaration */
-                methodDeclarationTest: (p: number) => number;
-
-                /** This is GetAccessor */
-                get someBool(): boolean;
-
-                /** This is SetAccessor */
-                set someBool(b: boolean);
-            }
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should not expand props from external type', () => {
-        const input = 'export type TExternalTypeTest = HTMLElement;';
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should expand props if internal type is wrapped in Typescript utility type', () => {
-        const input = `
-            type TLocal = {
-                p1: number;
-                p2: string;
-            }
-            export type TTest = Omit<TLocal, 'p1'>;
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should include generic type argument names in fullName of type', () => {
-        const input = `
-            export interface IA<T> {
-                p1: Record<string, T>;
-            }
-            export type TA<S> = {
-                p1: Record<string, S>;
-            }
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should convert interface with generics', () => {
-        const input = `
-        export interface AcceptDropParams<TSrcData, TDstData> {
-            srcData: TSrcData;
-            dstData?: TDstData;
-            offsetLeft: number;
-            offsetTop: number;
-            targetWidth: number;
-            targetHeight: number;
-        }
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should convert interface when it extends another interface and passes specific generic parameter to it', () => {
-        const input = `
-            interface IBaseInterface<T> {
-                value: T;
-                onValueChange(newValue: T): void;
-            }            
-            export interface IInterface extends IBaseInterface<string> {};
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should mark props as optional when type extends from Partial of another type', () => {
-        const input = `
-            interface IFirstType {
-                value: boolean;
-            }
-            
-            export interface ISecondType extends Partial<IFirstType> {};
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-});
diff --git a/uui-build/ts/tasks/docsGen/__tests__/docsGenIntersection.test.ts b/uui-build/ts/tasks/docsGen/__tests__/docsGenIntersection.test.ts
deleted file mode 100644
index ec0a85214b..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/docsGenIntersection.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { generateDocs } from './utils/test-utils';
-
-describe('docsGen:intersection', () => {
-    test('should convert intersection', () => {
-        const input = `
-            type TIntersectionMemberA = {
-                a1: number;
-                a2: string;
-            }
-            interface IIntersectionMemberB {
-                b1: number;
-                b2: string;
-            }
-            export type TIntersection = TIntersectionMemberA & IIntersectionMemberB;
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-    test('should convert top level type with Omit', () => {
-        const input = `
-            interface TFirst {
-                f1: number;
-                f2: number;
-            }
-            export type TIntersection = Omit<TFirst, 'f2'>;
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-    test('should convert type intersection with Omit', () => {
-        const input = `
-            interface IFirstPart1 {
-                f1: number;
-                f2: number;
-            }
-            interface IFirstPart2 {
-                f3: number;
-                f4: number;
-            }
-            type TFirst = IFirstPart1 & IFirstPart2;
-            type TSecond = {
-                s1: number;
-                s2: number;
-            }
-            export type TIntersection = Omit<TFirst, 'f2'> & TSecond;
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-});
diff --git a/uui-build/ts/tasks/docsGen/__tests__/docsGenMappedType.test.ts b/uui-build/ts/tasks/docsGen/__tests__/docsGenMappedType.test.ts
deleted file mode 100644
index 4cc58e33f1..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/docsGenMappedType.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { generateDocs } from './utils/test-utils';
-
-describe('docsGen:mappedType', () => {
-    test('should convert mapped type', () => {
-        const input = `
-            export type TLocal = {
-                [key: number]: string;
-            }
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-});
diff --git a/uui-build/ts/tasks/docsGen/__tests__/docsGenPropEditor.test.ts b/uui-build/ts/tasks/docsGen/__tests__/docsGenPropEditor.test.ts
deleted file mode 100644
index d9552b8bef..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/docsGenPropEditor.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { generateDocs } from './utils/test-utils';
-
-describe('docsGen:propEditor', () => {
-    test('should convert prop editor for optional icon prop', () => {
-        const input = `
-            type Icon = React.FC<any>;
-            export interface TTest {
-                icon?: Icon;
-            };
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-});
diff --git a/uui-build/ts/tasks/docsGen/__tests__/docsGenUnion.test.ts b/uui-build/ts/tasks/docsGen/__tests__/docsGenUnion.test.ts
deleted file mode 100644
index a3363ac0ca..0000000000
--- a/uui-build/ts/tasks/docsGen/__tests__/docsGenUnion.test.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { generateDocs } from './utils/test-utils';
-
-describe('docsGen:union', () => {
-    test('should convert union of simple types', () => {
-        const input = `
-            export type TUnionTest = 'one' | 'two' | 'three' | 'four' | boolean;
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-    test('should convert union of two object types', () => {
-        const input = `
-            type N1 = ({ sameProp: string, n1Prop: string });
-            type N2 = ({ sameProp: string, n2Prop: string });
-            export type TTest = N1 | N2;
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should convert union of two anonymous object types', () => {
-        const input = `
-            export type TTest = ({ sameProp: string, n1Prop: string }) | ({ sameProp: string, n2Prop: string });
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should not try to expand props if union contains an external type', () => {
-        const input = `
-            export type TTest = ({ a: string, b: string }) | HTMLElement;
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-
-    test('should not expand ReactNode type of property', () => {
-        const input = `
-            export interface TTestOptional {
-                testProp?: React.ReactNode;
-            };
-            export interface TTestRequired {
-                testProp: React.ReactNode;
-            };
-        `;
-        expect(generateDocs(input)).toMatchSnapshot();
-    });
-});
diff --git a/uui-build/ts/tasks/docsGen/__tests__/utils/test-utils.ts b/uui-build/ts/tasks/docsGen/__tests__/utils/test-utils.ts
index 7788dcaf0c..f59a3cae24 100644
--- a/uui-build/ts/tasks/docsGen/__tests__/utils/test-utils.ts
+++ b/uui-build/ts/tasks/docsGen/__tests__/utils/test-utils.ts
@@ -9,8 +9,12 @@ import { uuiRoot } from '../../../../constants';
 
 const TEST_MAIN_FILE_PATH = path.join(uuiRoot, 'test/test.tsx');
 const TEST_DEFAULT_MODULE_NAME = '@epam/test-module';
+let testProject: tsMorph.Project;
 
 function initTestProject() {
+    if (testProject) {
+        return testProject;
+    }
     const p = path.resolve(uuiRoot, './tsconfig.json');
     const txt = fs.readFileSync(p, 'utf8').toString();
     const json = JSON.parse(txt);
@@ -22,11 +26,12 @@ function initTestProject() {
         moduleResolution: tsMorph.ModuleResolutionKind.Node16,
         skipFileDependencyResolution: true,
     };
-    return new tsMorph.Project({
+    testProject = new tsMorph.Project({
         compilerOptions,
         skipAddingFilesFromTsConfig: true,
         // Note: "useInMemoryFileSystem: true" isn't used here, because it doesn't resolve any "@types/*" from the node_modules.
     });
+    return testProject;
 }
 
 export function generateDocs(fileContent: string): Pick<TApiReferenceJson, 'docsGenTypes'> {

From 7efa03abf59f4e32830c7ee0a4e410ab0dae98df Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Tue, 2 Apr 2024 12:29:15 +0300
Subject: [PATCH 14/25] Adjust docs. Rename some tasks related to e2e.

---
 package.json               |  3 ++
 uui-e2e-tests/package.json |  7 ++--
 uui-e2e-tests/readme.md    | 68 ++++++++++++++++++++------------------
 3 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 2b6db11cb8..3c82c822e9 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,9 @@
     "test-report": "yarn test --collectCoverage",
     "test-typecheck": "tsc --project ./tsconfig.test.json",
     "test-update": "yarn test --updateSnapshot",
+    "test-e2e": "yarn --cwd uui-e2e-tests test-e2e",
+    "test-e2e-update": "yarn --cwd uui-e2e-tests test-e2e-update",
+    "test-e2e-report": "yarn --cwd uui-e2e-tests test-e2e-report",
     "track-bundle-size": "yarn --cwd uui-build track-bundle-size",
     "track-bundle-size-override": "yarn track-bundle-size --override-baseline"
   },
diff --git a/uui-e2e-tests/package.json b/uui-e2e-tests/package.json
index 70764f97fd..c4660cd39b 100644
--- a/uui-e2e-tests/package.json
+++ b/uui-e2e-tests/package.json
@@ -11,10 +11,9 @@
     "docker-test-e2e-update": "yarn docker-test-e2e --update-snapshots",
     "ci-test-e2e-deps-install": "npx ../node_modules/playwright install --with-deps chromium webkit",
     "ci-test-e2e": "yarn typecheck && cross-env UUI_REPORT_OBSOLETE_SCREENSHOTS=true npx ../node_modules/playwright test",
-    "local-pw-cli": "ts-node scripts/cmd/cmdRunPwDocker.ts",
-    "local-test-e2e-report-show": "npx ../node_modules/playwright show-report ./tests/.report/report",
-    "local-test-e2e": "yarn local-pw-cli",
-    "local-test-e2e-update": "yarn local-pw-cli --update-snapshots",
+    "test-e2e": "ts-node scripts/cmd/cmdRunPwDocker.ts",
+    "test-e2e-update": "yarn test-e2e --update-snapshots",
+    "test-e2e-report": "npx ../node_modules/playwright show-report ./tests/.report/report",
     "start-server": "yarn --cwd ../app server"
   },
   "dependencies": {
diff --git a/uui-e2e-tests/readme.md b/uui-e2e-tests/readme.md
index 85f7fd22c7..669b5b1d81 100644
--- a/uui-e2e-tests/readme.md
+++ b/uui-e2e-tests/readme.md
@@ -1,50 +1,53 @@
-### Podman installation
-#### Windows
-1. Install Podman from here: https://github.com/containers/podman/releases/tag/v5.0.0 Note: you might need to restart computer after that.
-2. Run next commands:
-    ```bash
-    podman machine init
-    podman machine set --rootful=false
-    podman machine set --user-mode-networking
-    podman machine start
-    ```
-
-#### MacOS
-1. Install Podman with command below. Note: you might need to restart computer after that.
-    ```shell
-    brew install podman
-    ```
-2. Run next commands:
-    ```shell
-    podman machine init
-    podman machine set --rootful=false
-    podman machine set --user-mode-networking
-    podman machine start
-    ```
+### Install Podman v5.x (tested on v5.0.1)
+**Windows**:
+Install Podman v5.x from here: https://github.com/containers/podman/releases 
+You might need to restart computer after that.
+
+**MacOS**:
+Install Podman with the command below. Please make sure that Podman version is at least ```5.0.1``` or newer. 
+You might need to restart computer after that. 
+```shell 
+brew install podman
+```
+
+### Init Podman
+```shell
+podman machine init
+podman machine set --user-mode-networking
+podman machine start
+```
 
 ### Running tests in local environment
 #### Prerequisites
 1. Podman is installed
-2. Start local dev server
-3. [Optional step] Change ```./.env.local``` file in order to set non-standard UUI_APP_BASE_URL
+2. Server is started. Possible options:
+   * Local dev server (default option)
+     * Pros: Convenient when you make changes to e2e tests and want to see results right away
+     * Cons: Slower than other options. Occasionally dev server may stop responding which leads to test failures.
+   * Local prod server
+     * Pros: Good performance. Please be aware that port 5000 might be occupied on macOS by some system utilities.
+     * Cons: Requires full build
+   * Any external UUI server
+     * Pros: Good performance (though it depends on network speed).
+3. [Optional step] Change ```.env.local``` file to set non-standard UUI_APP_BASE_URL
 
 #### NPM tasks to use
 Note: If the tasks are run for the very first time, it might take some time to download necessary docker images (about 10 min).
 ```shell
 # Run tests in docker container
-yarn local-test-e2e
+yarn test-e2e
 
 # Run tests in docker container and update all screenshots
-yarn local-test-e2e-update
+yarn test-e2e-update
 
 # Show report located in "uui-e2e-tests/tests/.report/report" folder
-yarn local-test-e2e-report-show
+yarn test-e2e-report
 ```
 
 ### Useful Podman commands
-The image for UUI e2e test requires about ```2.2 Gb``` of free disk space.
+The image for UUI e2e test requires about ```2.4 Gb``` of free disk space.
 The following commands can help you to check how much disk space is being used.
-```
+```shell
 # Show podman disk usage
 podman system df
 
@@ -55,7 +58,8 @@ podman images --all
 # It's a preferrable way to clean up unused images.
 podman image prune --all
 
-# Delete all images. Usually it should not be used. 
-# When the e2e tests are run after deleting all images, all necessary dependencies will download again which will take some time.
+# Delete all images. Use it only when other methods to free up space don't help.
+# When the e2e tests are run after deleting all images, all necessary dependencies will download again which takes some time.
 podman rmi --all --force
 ```
+

From 59587d980312f568ae34b7ae3f7f571fd065e2fc Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Tue, 2 Apr 2024 17:04:24 +0300
Subject: [PATCH 15/25] Use new port for local dev server

---
 app/package.json                   | 2 +-
 uui-e2e-tests/.env.local           | 2 +-
 uui-e2e-tests/playwright.config.ts | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/package.json b/app/package.json
index 89ab224c3c..0a8d9fb4b1 100644
--- a/app/package.json
+++ b/app/package.json
@@ -6,7 +6,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "start": "craco start",
+    "start": "cross-env PORT=3793 craco start",
     "start-sd": "cross-env isWrapUuiAppInShadowDom=true craco start",
     "build": "craco build",
     "build-dev": "craco build --app-dev",
diff --git a/uui-e2e-tests/.env.local b/uui-e2e-tests/.env.local
index 332cbb6b95..ab4368e9dc 100644
--- a/uui-e2e-tests/.env.local
+++ b/uui-e2e-tests/.env.local
@@ -2,4 +2,4 @@
 # If the {{HOST_NAME}} placeholder is specified, then it is replaced by the real IP address of the host machine
 # (it is needed for docker containers to be able to access server on the host machine)
 #
-UUI_APP_BASE_URL=http://{{HOST_NAME}}:3000
+UUI_APP_BASE_URL=http://{{HOST_NAME}}:3793
diff --git a/uui-e2e-tests/playwright.config.ts b/uui-e2e-tests/playwright.config.ts
index b5c12d07a8..e6e2180468 100644
--- a/uui-e2e-tests/playwright.config.ts
+++ b/uui-e2e-tests/playwright.config.ts
@@ -7,8 +7,8 @@ import path from 'node:path';
 const { isDocker, isCi } = readEnvParams();
 const { UUI_APP_BASE_URL } = readEnvFile();
 
-const maxFailures = isCi ? 10 : undefined;
-const retries = isCi ? 1 : 1;
+const maxFailures = isCi ? 10 : 20;
+const retries = isCi ? 1 : 0;
 const workers = isCi ? 1 : 1;
 const forbidOnly = isCi;
 const trace = (isCi ? 'retry-with-trace' : 'retain-on-failure') as TraceMode;

From 22b558650f45e2d24e79b42fcf7c76bbecfe30c1 Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Tue, 2 Apr 2024 17:45:46 +0300
Subject: [PATCH 16/25] Allow to run test with other tools. Podman will be used
 as a fallback.

---
 uui-e2e-tests/package.json                  |  2 +-
 uui-e2e-tests/scripts/cliUtils.ts           | 13 +++++++++----
 uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts | 19 +++++++++++--------
 uui-e2e-tests/scripts/constants.ts          |  2 +-
 uui-e2e-tests/src/fixtures/index.ts         |  1 +
 uui-e2e-tests/src/utils/logger.ts           |  4 ++++
 6 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/uui-e2e-tests/package.json b/uui-e2e-tests/package.json
index c4660cd39b..59dd121c19 100644
--- a/uui-e2e-tests/package.json
+++ b/uui-e2e-tests/package.json
@@ -11,7 +11,7 @@
     "docker-test-e2e-update": "yarn docker-test-e2e --update-snapshots",
     "ci-test-e2e-deps-install": "npx ../node_modules/playwright install --with-deps chromium webkit",
     "ci-test-e2e": "yarn typecheck && cross-env UUI_REPORT_OBSOLETE_SCREENSHOTS=true npx ../node_modules/playwright test",
-    "test-e2e": "ts-node scripts/cmd/cmdRunPwDocker.ts",
+    "test-e2e": "cross-env UUI_DOCKER_CONTAINER_MGMT=podman ts-node scripts/cmd/cmdRunPwDocker.ts",
     "test-e2e-update": "yarn test-e2e --update-snapshots",
     "test-e2e-report": "npx ../node_modules/playwright show-report ./tests/.report/report",
     "start-server": "yarn --cwd ../app server"
diff --git a/uui-e2e-tests/scripts/cliUtils.ts b/uui-e2e-tests/scripts/cliUtils.ts
index bf334309c0..dc5921814a 100644
--- a/uui-e2e-tests/scripts/cliUtils.ts
+++ b/uui-e2e-tests/scripts/cliUtils.ts
@@ -18,8 +18,8 @@ export function hasCliArg(arg: typeof CLI_ARGS[keyof typeof CLI_ARGS]) {
     return args.indexOf(arg) !== -1;
 }
 
-export function spawnProcessSync(params: { cmd: string, args: string[], cwd: string }) {
-    const { cwd, args, cmd } = params;
+export function spawnProcessSync(params: { cmd: string, args: string[], cwd: string, exitOnErr: boolean }) {
+    const { cwd, args, cmd, exitOnErr } = params;
     const cmdInfoAsStr = `${cmd} ${args.join(' ')}`;
 
     Logger.info(cmdInfoAsStr);
@@ -30,8 +30,13 @@ export function spawnProcessSync(params: { cmd: string, args: string[], cwd: str
         { stdio: 'inherit', cwd },
     );
 
-    if (result.error) {
-        Logger.error(`Failed to run: ${cmdInfoAsStr}: ${result.error.message}`);
+    if (result.status !== 0) {
+        const msgFromCmd = result.error?.message || '';
+        const msg = `Error returned from "${cmdInfoAsStr}" ${msgFromCmd}`;
+        if (exitOnErr) {
+            Logger.error(msg);
+            process.exit(1);
+        }
     }
 }
 
diff --git a/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts b/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts
index b0ada7361a..5b94d9ad41 100644
--- a/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts
+++ b/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts
@@ -1,7 +1,7 @@
 import { spawnProcessSync, hasCliArg } from '../cliUtils';
 import {
     CLI_ARGS,
-    CONTAINER_MGMT,
+    UUI_DOCKER_CONTAINER_MGMT,
     DOCKER_CONTAINER_NAME,
     DOCKER_FILES,
     DOCKER_IMAGE_TAGS,
@@ -12,35 +12,37 @@ import { currentMachineIpv4 } from '../ipUtils';
 main();
 
 function main() {
-    const updateSnapshots = hasCliArg(CLI_ARGS.PW_DOCKER_UPDATE_SNAPSHOTS);
-
     spawnProcessSync({
-        cmd: CONTAINER_MGMT,
+        cmd: UUI_DOCKER_CONTAINER_MGMT,
         args: [
             'build',
             '-t',
             DOCKER_IMAGE_TAGS.TEST,
             '-f',
             DOCKER_FILES.DOCKER_FILE,
+            '.',
         ],
         cwd: process.cwd(),
+        exitOnErr: true,
     });
     spawnProcessSync({
-        cmd: CONTAINER_MGMT,
+        cmd: UUI_DOCKER_CONTAINER_MGMT,
         args: [
             'rm',
-            'container',
             DOCKER_CONTAINER_NAME,
-            '--ignore',
         ],
         cwd: process.cwd(),
+        exitOnErr: false,
     });
+    const updateSnapshots = hasCliArg(CLI_ARGS.PW_DOCKER_UPDATE_SNAPSHOTS);
     spawnProcessSync({
-        cmd: CONTAINER_MGMT,
+        cmd: UUI_DOCKER_CONTAINER_MGMT,
         args: [
             'run',
             '--name',
             DOCKER_CONTAINER_NAME,
+            '--cap-add',
+            'SYS_ADMIN',
             '-it',
             '--network',
             'host',
@@ -56,6 +58,7 @@ function main() {
             updateSnapshots ? YARN_TASKS.DOCKER_TEST_E2E_UPDATE : YARN_TASKS.DOCKER_TEST_E2E,
         ],
         cwd: process.cwd(),
+        exitOnErr: true,
     });
 }
 
diff --git a/uui-e2e-tests/scripts/constants.ts b/uui-e2e-tests/scripts/constants.ts
index 1161f62f5d..1f2c15056a 100644
--- a/uui-e2e-tests/scripts/constants.ts
+++ b/uui-e2e-tests/scripts/constants.ts
@@ -20,4 +20,4 @@ export const ENV_FILES = {
     LOCAL: '.env.local',
 };
 
-export const CONTAINER_MGMT = 'podman';
+export const UUI_DOCKER_CONTAINER_MGMT = process.env['UUI_DOCKER_CONTAINER_MGMT'] || 'podman';
diff --git a/uui-e2e-tests/src/fixtures/index.ts b/uui-e2e-tests/src/fixtures/index.ts
index b4ace1af94..cee0ee2573 100644
--- a/uui-e2e-tests/src/fixtures/index.ts
+++ b/uui-e2e-tests/src/fixtures/index.ts
@@ -13,6 +13,7 @@ const test = baseTest.extend<{}, { previewPage: PreviewPage }>({
                 const pePage = new PreviewPage(page);
                 await pePage.goto();
                 await page.addStyleTag({ path: stylePath });
+                await page.waitForTimeout(50);
                 await use(pePage);
             } finally {
                 await context.close();
diff --git a/uui-e2e-tests/src/utils/logger.ts b/uui-e2e-tests/src/utils/logger.ts
index 06a40ecf9c..5d22022bb6 100644
--- a/uui-e2e-tests/src/utils/logger.ts
+++ b/uui-e2e-tests/src/utils/logger.ts
@@ -1,4 +1,8 @@
 export class Logger {
+    static warn(...args: any[]) {
+        console.error('\x1b[33m%s\x1b[0m', ...args);
+    }
+
     static error(...args: any[]) {
         console.error('\x1b[41m\x1b[37m%s\x1b[0m', ...args);
     }

From c4ac59587440a08005d2bdd46a07ed07613e20e3 Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Tue, 2 Apr 2024 17:48:06 +0300
Subject: [PATCH 17/25] Use retry 1 on local

---
 uui-e2e-tests/playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/uui-e2e-tests/playwright.config.ts b/uui-e2e-tests/playwright.config.ts
index e6e2180468..2fd19fb6a1 100644
--- a/uui-e2e-tests/playwright.config.ts
+++ b/uui-e2e-tests/playwright.config.ts
@@ -8,7 +8,7 @@ const { isDocker, isCi } = readEnvParams();
 const { UUI_APP_BASE_URL } = readEnvFile();
 
 const maxFailures = isCi ? 10 : 20;
-const retries = isCi ? 1 : 0;
+const retries = isCi ? 1 : 1;
 const workers = isCi ? 1 : 1;
 const forbidOnly = isCi;
 const trace = (isCi ? 'retry-with-trace' : 'retain-on-failure') as TraceMode;

From 33d40e7c19420462d90d0add37e958348487a837 Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Tue, 2 Apr 2024 17:49:26 +0300
Subject: [PATCH 18/25] Use retry 1 on local

---
 uui-e2e-tests/src/pages/previewPage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/uui-e2e-tests/src/pages/previewPage.ts b/uui-e2e-tests/src/pages/previewPage.ts
index 6077e3cafc..7fbfc76f37 100644
--- a/uui-e2e-tests/src/pages/previewPage.ts
+++ b/uui-e2e-tests/src/pages/previewPage.ts
@@ -23,7 +23,7 @@ export class PreviewPage {
 
     async getScreenshotOptions(): Promise<{ fullPage?: boolean; clip: TClip }> {
         // in some very rare cases, the content is not fully ready, this small timeout solves the issue.
-        await this.page.waitForTimeout(10);
+        await this.page.waitForTimeout(30);
         const clip = await this.locators.regionScreenshotContent.boundingBox() as TClip;
         return { fullPage: true, clip };
     }

From cc441c6eacd069b715a4d6482eb29cfea2d289a8 Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Tue, 2 Apr 2024 18:04:55 +0300
Subject: [PATCH 19/25] Allow to run test with other tools. Podman will be used
 as a fallback.

---
 uui-e2e-tests/.env.local                    | 3 +++
 uui-e2e-tests/package.json                  | 2 +-
 uui-e2e-tests/readme.md                     | 5 +++++
 uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts | 5 ++++-
 uui-e2e-tests/scripts/constants.ts          | 2 --
 uui-e2e-tests/scripts/envFileUtils.ts       | 2 +-
 6 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/uui-e2e-tests/.env.local b/uui-e2e-tests/.env.local
index ab4368e9dc..b252abb3a9 100644
--- a/uui-e2e-tests/.env.local
+++ b/uui-e2e-tests/.env.local
@@ -3,3 +3,6 @@
 # (it is needed for docker containers to be able to access server on the host machine)
 #
 UUI_APP_BASE_URL=http://{{HOST_NAME}}:3793
+
+# Change to some other tool which has CLI compatible with Docker's CLI (docker, podman, etc.)
+UUI_DOCKER_CONTAINER_MGMT=podman
diff --git a/uui-e2e-tests/package.json b/uui-e2e-tests/package.json
index 59dd121c19..c4660cd39b 100644
--- a/uui-e2e-tests/package.json
+++ b/uui-e2e-tests/package.json
@@ -11,7 +11,7 @@
     "docker-test-e2e-update": "yarn docker-test-e2e --update-snapshots",
     "ci-test-e2e-deps-install": "npx ../node_modules/playwright install --with-deps chromium webkit",
     "ci-test-e2e": "yarn typecheck && cross-env UUI_REPORT_OBSOLETE_SCREENSHOTS=true npx ../node_modules/playwright test",
-    "test-e2e": "cross-env UUI_DOCKER_CONTAINER_MGMT=podman ts-node scripts/cmd/cmdRunPwDocker.ts",
+    "test-e2e": "ts-node scripts/cmd/cmdRunPwDocker.ts",
     "test-e2e-update": "yarn test-e2e --update-snapshots",
     "test-e2e-report": "npx ../node_modules/playwright show-report ./tests/.report/report",
     "start-server": "yarn --cwd ../app server"
diff --git a/uui-e2e-tests/readme.md b/uui-e2e-tests/readme.md
index 669b5b1d81..5b80c9fc14 100644
--- a/uui-e2e-tests/readme.md
+++ b/uui-e2e-tests/readme.md
@@ -63,3 +63,8 @@ podman image prune --all
 podman rmi --all --force
 ```
 
+### Usage of alternative tools to build/run the Docker images
+By default, Podman is used to run e2e tests. 
+But it's possible to specify some alternative tool via ```.env.local``` file using ```UUI_DOCKER_CONTAINER_MGMT=<alternative_tool>``` option. 
+Please make sure that this tool is compatible with Docker's CLI.
+
diff --git a/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts b/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts
index 5b94d9ad41..18356b4789 100644
--- a/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts
+++ b/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts
@@ -1,13 +1,16 @@
 import { spawnProcessSync, hasCliArg } from '../cliUtils';
 import {
     CLI_ARGS,
-    UUI_DOCKER_CONTAINER_MGMT,
     DOCKER_CONTAINER_NAME,
     DOCKER_FILES,
     DOCKER_IMAGE_TAGS,
     YARN_TASKS,
 } from '../constants';
 import { currentMachineIpv4 } from '../ipUtils';
+import { readEnvFile } from '../envFileUtils';
+
+const envFile = readEnvFile();
+const UUI_DOCKER_CONTAINER_MGMT = envFile.UUI_DOCKER_CONTAINER_MGMT || 'podman';
 
 main();
 
diff --git a/uui-e2e-tests/scripts/constants.ts b/uui-e2e-tests/scripts/constants.ts
index 1f2c15056a..5c4dbf1b6c 100644
--- a/uui-e2e-tests/scripts/constants.ts
+++ b/uui-e2e-tests/scripts/constants.ts
@@ -19,5 +19,3 @@ export const ENV_FILES = {
     CI: '.env.ci',
     LOCAL: '.env.local',
 };
-
-export const UUI_DOCKER_CONTAINER_MGMT = process.env['UUI_DOCKER_CONTAINER_MGMT'] || 'podman';
diff --git a/uui-e2e-tests/scripts/envFileUtils.ts b/uui-e2e-tests/scripts/envFileUtils.ts
index 0d2559c250..56a1477b65 100644
--- a/uui-e2e-tests/scripts/envFileUtils.ts
+++ b/uui-e2e-tests/scripts/envFileUtils.ts
@@ -7,7 +7,7 @@ const { isCi, UUI_DOCKER_HOST_MACHINE_IP = 'localhost' } = readEnvParams();
 
 const envFileName = isCi ? ENV_FILES.CI : ENV_FILES.LOCAL;
 
-type TEnvParams = { UUI_APP_BASE_URL: string };
+type TEnvParams = { UUI_APP_BASE_URL: string, UUI_DOCKER_CONTAINER_MGMT: string };
 
 export function readEnvFile(): TEnvParams {
     const processEnv = {} as TEnvParams;

From 2adfae7e106a1f5cf6159d8e180ac870951585eb Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Tue, 2 Apr 2024 18:21:34 +0300
Subject: [PATCH 20/25] Fix redundant logging

---
 .../preview/componentPreview/utils/previewLinkUtils.ts    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/src/preview/componentPreview/utils/previewLinkUtils.ts b/app/src/preview/componentPreview/utils/previewLinkUtils.ts
index 8f95659a1e..75cbdac12a 100644
--- a/app/src/preview/componentPreview/utils/previewLinkUtils.ts
+++ b/app/src/preview/componentPreview/utils/previewLinkUtils.ts
@@ -37,7 +37,13 @@ export function buildPreviewRef(params: TBuildPreviewLinkParams): TPreviewRef {
                     });
                 }
             } else {
-                console.error(`Unable to find example of property=${name} by exampleId=${exampleId}. The property will be ignored.`);
+                const msg = `[buildPreviewRef] Unable to find example of property=${name} by exampleId=${exampleId}. The property will be ignored.`;
+                if (name === 'onValueChange') {
+                    // TODO: need find a way to convert such callback-based examples to plain array
+                    // console.debug(msg);
+                } else {
+                    console.error(msg);
+                }
             }
         } else if (value !== undefined) {
             if (['string', 'boolean', 'number'].indexOf(typeof value) !== -1) {

From 8c07b3ed731fc57876fab91ff5d4a5da4421d222 Mon Sep 17 00:00:00 2001
From: Yakov Zhmurov <zhmurov@ya.ru>
Date: Wed, 3 Apr 2024 01:08:01 +0300
Subject: [PATCH 21/25] Tokens page - documentation update

---
 .../themes/implementation/TokensPageConfig.ts | 24 +++++++++----------
 public/docs/content/Tokens-intro.json         | 22 +++++++++++++++--
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/app/src/docs/themes/implementation/TokensPageConfig.ts b/app/src/docs/themes/implementation/TokensPageConfig.ts
index 0a80aa4ef6..50bfd51e97 100644
--- a/app/src/docs/themes/implementation/TokensPageConfig.ts
+++ b/app/src/docs/themes/implementation/TokensPageConfig.ts
@@ -3,9 +3,9 @@ import { TTokensDocGroupCfg } from './types';
 export const TOKENS_DOC_CONFIG: TTokensDocGroupCfg[] = [
     {
         title: 'Semantic',
-        description: 'The theme default semantic palette tokens. These tokens reuses in all components and can be used for custom content, following their roles.',
+        description: 'Defines semantic palette. These tokens are used widely in many UUI components, to apply colors according their role. These tokens can also be utilized directly in application code, in accordance with their designated roles.',
         subgroupsHeader: [
-            'light highlights and backgrounds mostly',
+            'light highlights and backgrounds',
             'light component backgrounds',
             'light component backgrounds hover',
             'solid component backgrounds, active states and borders',
@@ -15,42 +15,42 @@ export const TOKENS_DOC_CONFIG: TTokensDocGroupCfg[] = [
         subgroups: [
             {
                 title: 'Primary',
-                description: 'Uses for primary actions and component states. It\'s primary theme color.',
+                description: 'For primary actions and component states. It\'s a primary theme color.',
                 items: ('core/semantic/primary-'),
             },
             {
                 title: 'Secondary',
-                description: 'Uses for secondary actions, component states, that are should not attract user attention.',
+                description: 'For secondary actions, component states, that should not attract user attention.',
                 items: ('core/semantic/secondary-'),
             },
             {
                 title: 'Accent',
-                description: 'Use for accents, call to actions in addition to primary color. Can be used instead of primary.',
+                description: 'For accents, call to actions, in addition to primary color. Can be used in place of primary.',
                 items: ('core/semantic/accent-'),
             },
             {
                 title: 'Info',
-                description: 'Uses in components to deliver information in a calm, normal way. Can be the same as primary.',
+                description: 'Used to deliver information in a calm, normal way.',
                 items: ('core/semantic/info-'),
             },
             {
                 title: 'Success',
-                description: 'Uses in components to deliver success message, give positive feedback.',
+                description: 'Used to deliver success message, or give positive feedback.',
                 items: ('core/semantic/success-'),
             },
             {
                 title: 'Warning',
-                description: 'Uses in components to deliver middle critical message, draw user attention from the system.',
+                description: 'Used to deliver non-critical message, draw user attention.',
                 items: ('core/semantic/warning-'),
             },
             {
                 title: 'Error',
-                description: 'Uses in components to deliver highly critical message, barrier or error, draw user attention from the system.',
+                description: 'Used to deliver critical message, barrier or error, draw user attention.',
                 items: ('core/semantic/error-'),
             },
             {
                 title: 'Critical',
-                description: 'Uses in components for destructive, critical actions or deliver critically important information.',
+                description: 'Used for destructive, critical actions or deliver critically important information.',
                 items: ('core/semantic/critical-'),
             },
 
@@ -58,7 +58,7 @@ export const TOKENS_DOC_CONFIG: TTokensDocGroupCfg[] = [
     },
     {
         title: 'Neutral',
-        description: 'The greyscale, uses most often to define different levels of surfaces, text colors and some components.',
+        description: 'Grey scale palette. Used for different levels of surfaces, text colors, borders, neutral-colored component\'s parts',
         items: ('core/neutral/'),
     },
     {
@@ -88,7 +88,7 @@ export const TOKENS_DOC_CONFIG: TTokensDocGroupCfg[] = [
     },
     {
         title: 'Controls',
-        description: 'Tokens for control components, like TextInput, PickerInput, Checkboxes and etc.',
+        description: 'Defines common part of controls like Input borders.',
         items: ('core/controls/'),
     },
 ];
diff --git a/public/docs/content/Tokens-intro.json b/public/docs/content/Tokens-intro.json
index ab11099203..d5449c3ec3 100644
--- a/public/docs/content/Tokens-intro.json
+++ b/public/docs/content/Tokens-intro.json
@@ -3,7 +3,7 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "Core tokens is a required part of each theme, this tokens is a foundation for low-level components variable and color classes."
+        "text": "Tokens are reusable variables that can represent design properties like colors, fonts, or spacing. In CSS, tokens are represented with CSS Custom Properties (aka CSS Variables)."
       }
     ],
     "data": {}
@@ -13,7 +13,25 @@
     "data": {},
     "children": [
       {
-        "text": "This part of tokens assumed as a stable theme API, so you can use them for styling your app parts and components."
+        "text": "UUI visuals are based on a set of tokens, named \"Core Tokens\", described below."
+      }
+    ]
+  },
+  {
+    "type": "paragraph",
+    "data": {},
+    "children": [
+      {
+        "text": "Each Theme defines its own values for all Core Tokens."
+      }
+    ]
+  },
+  {
+    "type": "paragraph",
+    "data": {},
+    "children": [
+      {
+        "text": "Core Tokens are not just for customizing UUI - we recommend apps built on UUI to utilize these tokens for styling their own components. This practice facilitates support for multiple themes, aids in crafting more readable and semantic CSS code, and enables quick reaction to changes in brand guidelines."
       }
     ]
   }

From 5e466a878b0f18b39c9299b2770e38f425b03c56 Mon Sep 17 00:00:00 2001
From: Yakov Zhmurov <zhmurov@ya.ru>
Date: Wed, 3 Apr 2024 02:07:06 +0300
Subject: [PATCH 22/25] Minor fixes and improvements in components
 documentation

---
 .../content/adaptivePanel-descriptions.json   |  22 +-
 public/docs/content/coreConcepts.json         |   2 +-
 .../content/countIndicator-descriptions.json  |   2 +-
 .../content/dropdownMenu-descriptions.json    | 398 ++++++------------
 .../content/examples-controlGroup-Prefix.json |  11 +-
 .../examples-dropdown-CloseOpenModifiers.json |   2 +-
 .../content/examples-tables-ArrayTable.json   |   2 +-
 .../content/examples-tables-TreeTable.json    |  68 +--
 public/docs/content/gettingStarted-intro.json |   2 +-
 .../content/labeledInput-descriptions.json    |  79 ++--
 public/docs/content/overview.json             |   2 +-
 .../content/tables-overview-descriptions.json |  29 +-
 public/docs/content/text-descriptions.json    |  67 ++-
 .../content/virtual-list-descriptions.json    | 260 ++++--------
 uui-components/src/adaptivePanel/types.ts     |   8 +-
 15 files changed, 345 insertions(+), 609 deletions(-)

diff --git a/public/docs/content/adaptivePanel-descriptions.json b/public/docs/content/adaptivePanel-descriptions.json
index 84ba32ced9..36a99f962c 100644
--- a/public/docs/content/adaptivePanel-descriptions.json
+++ b/public/docs/content/adaptivePanel-descriptions.json
@@ -1,21 +1,11 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "An adaptive panel component is used to layout items inside some adaptive panel. It measures the item's width and tries to fit them inside a container. If some items can't fit, they will be hidden according to their priorities. Hidden items can then be shown inside a drop-down menu, or other container.",
-            "marks": []
-          }
-        ]
+        "text": "An adaptive panel component adjusts the set of its children according to its width. It measures each item's width and tries to fit as many items as possible. If some items can't fit, they will be hidden according to their priorities. Hidden items can then be collapsed to a drop-down menu, or other container."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/coreConcepts.json b/public/docs/content/coreConcepts.json
index 780ec2d9c3..917974feae 100644
--- a/public/docs/content/coreConcepts.json
+++ b/public/docs/content/coreConcepts.json
@@ -800,7 +800,7 @@
                 ]
               },
               {
-                "text": " / svc.uuiApi — makes API calls gently, handling common HTTP errors, can re-login user if session is lost w/o loosing his work."
+                "text": " / svc.uuiApi — makes API calls gently, handling common HTTP errors, can re-login user if session is lost w/o losing his work."
               }
             ]
           }
diff --git a/public/docs/content/countIndicator-descriptions.json b/public/docs/content/countIndicator-descriptions.json
index 95b79023a4..6b9815bcb1 100644
--- a/public/docs/content/countIndicator-descriptions.json
+++ b/public/docs/content/countIndicator-descriptions.json
@@ -3,7 +3,7 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "The count indicator notifies users about the number of unread messages, notifications, or updates they have. They help users be aware of new activities or events within an application. Count indicators are also used to represent the number of items. Use the Count Indicator when you want to provide users with specific, quantifiable information about updates or changes. Displaying the number can help users quickly understand how many important updates they have missed:"
+        "text": "The count indicator notifies users about the number of unread messages, notifications, or updates they have. They help users be aware of new activities or events within an application. Count indicators are also used to represent the number of items. Use the Count Indicator when you want to provide users with specific, quantifiable information about updates or changes. Displaying the number can help users quickly understand how many important updates they have missed."
       }
     ]
   }
diff --git a/public/docs/content/dropdownMenu-descriptions.json b/public/docs/content/dropdownMenu-descriptions.json
index c6d481e020..e878205d2f 100644
--- a/public/docs/content/dropdownMenu-descriptions.json
+++ b/public/docs/content/dropdownMenu-descriptions.json
@@ -1,305 +1,177 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "DropdownMenu allows you to create vertical menus with a nested structure that pops up on hover or click (default is on hover).  ",
-            "marks": []
-          }
-        ]
+        "text": "DropdownMenu, and related set of components, allows to create vertical menus with a nested structure that pops up on hover or click (default is on hover).  "
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "You can use UUI "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "You can use UUI ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "DropdownMenuButton",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " or your custom component as a menu item. ",
-            "marks": []
-          }
-        ]
+        "text": "DropdownMenuButton",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "\r",
-            "marks": []
-          }
-        ]
+        "text": " or your custom component as a menu item. "
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "\r"
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "With the "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "With the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "DropdownMenuButton",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ", you can: ",
-            "marks": []
-          }
-        ]
+        "text": "DropdownMenuButton",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "unordered-list",
+        "text": ", you can: "
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "unordered-list",
+    "children": [
+      {
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "block",
-            "type": "list-item",
             "data": {},
-            "nodes": [
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "Render a menu item with an icon in the left or right position ('left' as default).",
-                    "marks": []
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "object": "block",
-            "type": "list-item",
-            "data": {},
-            "nodes": [
-              {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "Highlight a menu item as selected, passing the ",
-                    "marks": []
-                  },
-                  {
-                    "object": "text",
-                    "text": "isActive",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-code",
-                        "data": {}
-                      }
-                    ]
-                  },
-                  {
-                    "object": "text",
-                    "text": " prop.",
-                    "marks": []
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "object": "block",
-            "type": "list-item",
-            "data": {},
-            "nodes": [
-              {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "Mark a menu item as checked, passing the ",
-                    "marks": []
-                  },
-                  {
-                    "object": "text",
-                    "text": "isChecked",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-code",
-                        "data": {}
-                      }
-                    ]
-                  },
-                  {
-                    "object": "text",
-                    "text": " prop.\r",
-                    "marks": []
-                  }
-                ]
+                "text": "Render a menu item with an icon in the left or right position ('left' as default)."
               }
             ]
           }
         ]
       },
       {
-        "object": "block",
-        "type": "paragraph",
         "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "By ",
-            "marks": []
-          },
+        "type": "list-item",
+        "children": [
           {
-            "object": "text",
-            "text": "MenuSplitter",
-            "marks": [
+            "data": {},
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ", you can divide menu item groups. ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "MenuHeader",
-            "marks": [
+                "text": "Highlight a menu item as selected, passing the "
+              },
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
+                "text": "isActive",
+                "uui-richTextEditor-code": true
+              },
+              {
+                "text": " prop."
               }
             ]
-          },
-          {
-            "object": "text",
-            "text": " sets a header for a group.",
-            "marks": []
           }
         ]
       },
       {
-        "object": "block",
-        "type": "paragraph",
         "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "With ",
-            "marks": []
-          },
+        "type": "list-item",
+        "children": [
           {
-            "object": "text",
-            "text": "DropdownMenuSwitchButton",
-            "marks": [
+            "data": {},
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ", you can render a menu item with a switch. The ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "isSelected",
-            "marks": [
+                "text": "Mark a menu item as checked, passing the "
+              },
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop is used as the switch value, and the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "onValueChange",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " callback prop is used to change the switch value. ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "DropdownMenuSwitchButton",
-            "marks": [
+                "text": "isChecked",
+                "uui-richTextEditor-code": true
+              },
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
+                "text": " prop.\r"
               }
             ]
-          },
-          {
-            "object": "text",
-            "text": " can also receive an icon.",
-            "marks": []
           }
         ]
       }
     ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "With "
+      },
+      {
+        "text": "MenuSplitter",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": ", you can divide menu item groups. "
+      },
+      {
+        "text": "MenuHeader",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " provides a header for a group."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "With "
+      },
+      {
+        "text": "DropdownMenuSwitchButton",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": ", you can render a menu item with a switch. The "
+      },
+      {
+        "text": "isSelected",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " prop is used as the switch value, and the "
+      },
+      {
+        "text": "onValueChange",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " callback prop is used to change the switch value. "
+      },
+      {
+        "text": "DropdownMenuSwitchButton",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " can also receive an icon."
+      }
+    ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-controlGroup-Prefix.json b/public/docs/content/examples-controlGroup-Prefix.json
index d0a9085237..0421fa64ed 100644
--- a/public/docs/content/examples-controlGroup-Prefix.json
+++ b/public/docs/content/examples-controlGroup-Prefix.json
@@ -8,14 +8,21 @@
         "uui-richTextEditor-code": true
       },
       {
-        "text": " can help you create a prefix for input. To do this, you need to wrap components in a "
+        "text": " can allow to add a prefix of suffix for inputs. To do this, you need to wrap input component, and "
+      },
+      {
+        "text": "InputAddon",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " in a "
       },
       {
         "text": "ControlGroup",
         "uui-richTextEditor-code": true
       },
       {
-        "text": "."
+        "text": ".  "
       }
     ]
   }
diff --git a/public/docs/content/examples-dropdown-CloseOpenModifiers.json b/public/docs/content/examples-dropdown-CloseOpenModifiers.json
index 655327493d..00c3997d22 100644
--- a/public/docs/content/examples-dropdown-CloseOpenModifiers.json
+++ b/public/docs/content/examples-dropdown-CloseOpenModifiers.json
@@ -4,7 +4,7 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "Dropdown has may ways to customization open/close logic:"
+        "text": "Dropdown has several options to customize how it gets open and closed:"
       }
     ]
   },
diff --git a/public/docs/content/examples-tables-ArrayTable.json b/public/docs/content/examples-tables-ArrayTable.json
index ac733d540c..1af3e9817a 100644
--- a/public/docs/content/examples-tables-ArrayTable.json
+++ b/public/docs/content/examples-tables-ArrayTable.json
@@ -17,7 +17,7 @@
         ]
       },
       {
-        "text": " -  just getting items from an array."
+        "text": " -  getting items from a plain array."
       }
     ]
   }
diff --git a/public/docs/content/examples-tables-TreeTable.json b/public/docs/content/examples-tables-TreeTable.json
index 88a85af8fc..e79dfe57dc 100644
--- a/public/docs/content/examples-tables-TreeTable.json
+++ b/public/docs/content/examples-tables-TreeTable.json
@@ -1,53 +1,25 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "To make a Tree structure into your table, you should add ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "parentId",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " property to your items. Or declare which field will contain parent id value via ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "getParentId",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop in DataSource.",
-            "marks": []
-          }
-        ]
+        "text": "To add a Tree structure into your table, you should add "
+      },
+      {
+        "text": "parentId",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " property to your items. You can change which field will contain parent id value via "
+      },
+      {
+        "text": "getParentId",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " prop in DataSource."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/gettingStarted-intro.json b/public/docs/content/gettingStarted-intro.json
index d767d8f968..35d4645f65 100644
--- a/public/docs/content/gettingStarted-intro.json
+++ b/public/docs/content/gettingStarted-intro.json
@@ -30,7 +30,7 @@
         ]
       },
       {
-        "text": " 16 or higher."
+        "text": " 17 or higher."
       }
     ]
   }
diff --git a/public/docs/content/labeledInput-descriptions.json b/public/docs/content/labeledInput-descriptions.json
index 8003e77663..8104d6fcf0 100644
--- a/public/docs/content/labeledInput-descriptions.json
+++ b/public/docs/content/labeledInput-descriptions.json
@@ -1,61 +1,36 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "LabeledInput adds a label and validation messages to input components.",
-            "marks": []
-          }
-        ]
+        "text": "LabeledInput wraps input components to add label, validation messages, info-tips, footnotes, char counters."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "It works great with the Form and Lenses as it automatically gets and displays an invalid component's state."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "In case you don't use the Form component, you can pass the "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "It works great with the Form and Lenses as it automatically gets and displays an invalid component's state.",
-            "marks": []
-          }
-        ]
+        "text": "validationMessage",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "In case you don't use the Form component, you can pass the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "validationMessage",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "  to show the validation message.",
-            "marks": []
-          }
-        ]
+        "text": "  to show the validation message."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/overview.json b/public/docs/content/overview.json
index 0787d8ebb9..8e21ab0bb7 100644
--- a/public/docs/content/overview.json
+++ b/public/docs/content/overview.json
@@ -305,7 +305,7 @@
         ]
       },
       {
-        "text": " to get an overview of the use-cases we support."
+        "text": " to get an overview of use-cases we support."
       }
     ]
   },
diff --git a/public/docs/content/tables-overview-descriptions.json b/public/docs/content/tables-overview-descriptions.json
index bc3c8e9ed2..0d01d395fd 100644
--- a/public/docs/content/tables-overview-descriptions.json
+++ b/public/docs/content/tables-overview-descriptions.json
@@ -4,14 +4,35 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "UUI has a widely configurable solution for displaying data as a table. We have already built components like "
+        "text": "UUI has a widely configurable solution for displaying data as a table. The "
       },
       {
         "text": "DataTable",
         "uui-richTextEditor-code": true
       },
       {
-        "text": " as well as a set of  separate table components from which you can create your custom table."
+        "text": " component provides a complete table, including ith header, rows, and built-in virtualized scrolling. We also provide a set it's parts, like "
+      },
+      {
+        "text": "DataTableHeader",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": ", "
+      },
+      {
+        "text": "DataTableRow",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": ", "
+      },
+      {
+        "text": "VirtualList",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": ", and more, to allow deep customization and building custom Table-like experiences."
       }
     ]
   },
@@ -67,7 +88,7 @@
             "type": "list-item-child",
             "children": [
               {
-                "text": "Sorting, filtering."
+                "text": "Sorting, filtering, search"
               }
             ]
           }
@@ -187,7 +208,7 @@
                 ]
               },
               {
-                "text": " column value."
+                "text": " cell values."
               }
             ]
           }
diff --git a/public/docs/content/text-descriptions.json b/public/docs/content/text-descriptions.json
index 3585f8ef9a..f0958ed5b5 100644
--- a/public/docs/content/text-descriptions.json
+++ b/public/docs/content/text-descriptions.json
@@ -1,52 +1,35 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "The Text component displays a single-line text with various configurations. Due to its standard set of sizes like in our other components(e.g., TextInput, Button), use it to place text on the same baseline with a component.",
-            "marks": []
-          }
-        ]
+        "text": "The Text component displays a single-line text with various configurations. Due to its standard set of sizes are aligned to other components (e.g., TextInput, Button), it can be used it to place text next to other components, and get it aligned correctly."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "For multiline text, it's better to use "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "For multiline text, it's better to use ",
-            "marks": []
-          },
-          {
-            "object": "inline",
-            "type": "link",
-            "data": {
-              "url": "https://uui.epam.com/documents?id=richTextView&mode=doc&skin=UUI4_promo&category=components"
-            },
-            "nodes": [
-              {
-                "object": "text",
-                "text": "RichTextView",
-                "marks": []
-              }
-            ]
-          },
+        "data": {
+          "url": "https://uui.epam.com/documents?id=richTextView&mode=doc&skin=UUI4_promo&category=components"
+        },
+        "type": "link",
+        "url": "https://uui.epam.com/documents?id=richTextView&mode=doc&skin=UUI4_promo&category=components",
+        "children": [
           {
-            "object": "text",
-            "text": " component.",
-            "marks": []
+            "text": "RichTextView"
           }
         ]
+      },
+      {
+        "text": " component."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/virtual-list-descriptions.json b/public/docs/content/virtual-list-descriptions.json
index 8afb6c2d52..5d6a648e24 100644
--- a/public/docs/content/virtual-list-descriptions.json
+++ b/public/docs/content/virtual-list-descriptions.json
@@ -1,184 +1,96 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
-      {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "VirtualList provides a scrollable container, which only renders a visible part of a list of components. It automatically measures the height of items to detect the position of the visible portion and adjusts scroll values and container height.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "VirtualList provides a scrollable container, which renders only a visible part of a list of components. It automatically measures the height of items to detect the position of the visible portion and adjusts scroll values and container height.",
+        "font-size": "12pt",
+        "font-family": null,
+        "color": "#303240",
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Internally, we use this component in "
+      },
+      {
+        "text": "DataTable",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " and "
+      },
+      {
+        "text": "PickerInputBody",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " ",
+        "uui-richTextEditor-bold": true
+      },
+      {
+        "text": "to display arbitrary sized lists of "
+      },
+      {
+        "text": "DataTableRows",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": "."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "As the height of an item is unknown until it's rendered, the items which are not yet rendered are estimated to have an average height of the rendered items."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "You can also estimate initial "
+      },
+      {
+        "text": "visibleCount",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": ", to avoid initial re-render. "
+      },
+      {
+        "text": "visibleCount ",
+        "uui-richTextEditor-italic": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Internally, we use this component in ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "DataTable",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " and ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "PickerInputBody",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-bold",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "to display arbitrary sized lists of ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "DataTableRows",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ".",
-            "marks": []
-          }
-        ]
+        "text": "will be updated automatically if "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "As the height of an item is unknown until it's rendered, the items which are not yet rendered are estimated to have an average height of the rendered items.",
-            "marks": []
-          }
-        ]
+        "text": "VirtualList",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "You can also estimate initial ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "visibleCount",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ", to avoid initial re-render. ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "visibleCount ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-italic",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "will be updated automatically if ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "VirtualList",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " detects, that there's enough space for more items.",
-            "marks": []
-          }
-        ]
+        "text": " detects, that there's enough space for more items."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/uui-components/src/adaptivePanel/types.ts b/uui-components/src/adaptivePanel/types.ts
index fe722ccd18..d185298bef 100644
--- a/uui-components/src/adaptivePanel/types.ts
+++ b/uui-components/src/adaptivePanel/types.ts
@@ -1,11 +1,15 @@
 import { IHasCX, IHasRawProps } from '@epam/uui-core';
 
 export type AdaptiveItemProps<T = unknown> = T & {
-    /** Render callback of the item. It renders items inside the panel and measures their width.
+    /**
+     * Render callback of the item. It renders items inside the panel and measures their width.
      * Pay attention that we can't measure margins. If you need to have margins, please make a wrapper and add margins inside
      * */
     render: (item: AdaptiveItemProps<T>, hiddenItems?: AdaptiveItemProps<T>[], displayedItems?: AdaptiveItemProps<T>[]) => any;
-    /** Item collapsed priority. An item with lower priority will be hidden first, and so on. If several items have the same priority, all of them will be hidden; */
+    /**
+     * Item collapsing priority. Items with lower priority will be hidden first.
+     * If several items have the same priority, they will be hidden together, even if there's a place for one of them.
+     * */
     priority: number;
     /** If true, this item will be shown when some other items was hidden; for example, you can use it to render dropdowns with hidden items.
      * You can provide more than one collapsedContainer item, but will be shown only those which has minimal priority, but this priority can't be less than the last hidden item’s priority. */

From 3e9e7f90df93e0038a6b92a973ad5e714bf34537 Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Wed, 3 Apr 2024 10:58:00 +0300
Subject: [PATCH 23/25] Update e2e docs

---
 uui-e2e-tests/readme.md | 106 +++++++++++++++++++++++-----------------
 1 file changed, 60 insertions(+), 46 deletions(-)

diff --git a/uui-e2e-tests/readme.md b/uui-e2e-tests/readme.md
index 5b80c9fc14..32adbe5b72 100644
--- a/uui-e2e-tests/readme.md
+++ b/uui-e2e-tests/readme.md
@@ -1,38 +1,73 @@
-### Install Podman v5.x (tested on v5.0.1)
-**Windows**:
-Install Podman v5.x from here: https://github.com/containers/podman/releases 
+# Install container management tool
+## Windows
+#### Option 1: Podman v5.x
+1. Install Podman v5.x from here: https://github.com/containers/podman/releases 
 You might need to restart computer after that.
+2. Init Podman
+    ```shell
+    podman machine init
+    podman machine set --user-mode-networking
+    podman machine start
+    ```
+3. Open ```.env.local``` and set ```UUI_DOCKER_CONTAINER_MGMT=podman```
+4. Useful Podman commands. The image for UUI e2e test requires about ```2.4 Gb``` of free disk space. The following commands can help you to check how much disk space is being used.
+    ```shell
+    # Show podman disk usage
+    podman system df
+    
+    # List all images and their sizes
+    podman images --all
+    
+    # Remove all images without at least one container associated with them
+    # It's a preferrable way to clean up unused images.
+    podman image prune --all
+    
+    # Delete all images. Use it only when other methods to free up space don't help.
+    # When the e2e tests are run after deleting all images, all necessary dependencies will download again which takes some time.
+    podman rmi --all --force
+    ```
 
-**MacOS**:
-Install Podman with the command below. Please make sure that Podman version is at least ```5.0.1``` or newer. 
-You might need to restart computer after that. 
-```shell 
-brew install podman
-```
+## macOS
+#### Option 1: Colima
+1. Install Colima via CLI:
+    ```shell 
+    # Install "docker" because Colima needs it
+    brew install docker
+    
+    # Install Colima itself
+    brew install colima
+    
+    # Start
+    colima start
+    ```
+2. Open ```.env.local``` and set ```UUI_DOCKER_CONTAINER_MGMT=docker```
 
-### Init Podman
-```shell
-podman machine init
-podman machine set --user-mode-networking
-podman machine start
-```
+#### Option 2: Podman v5.x (works only on ARM processors due to Playwrite-specific behavior)
+1. Install Podman with the command below. Please make sure that Podman version is at least ```5.0.1``` or newer. You might need to restart computer after that.
+    ```shell 
+    brew install podman
+    ```
+2. Other steps are the same as for Windows (see above)
+
+## Usage of alternative tools not mentioned in this guide
+It is possible to specify some alternative tool via ```.env.local``` file using ```UUI_DOCKER_CONTAINER_MGMT=<cmd>``` option.
+Please make sure that this tool is compatible with Docker's CLI.
 
-### Running tests in local environment
-#### Prerequisites
-1. Podman is installed
-2. Server is started. Possible options:
-   * Local dev server (default option)
+# Running tests in local environment
+## Prerequisites
+1. Server is started. Possible options:
+   * Local dev server **(this is default option)**
      * Pros: Convenient when you make changes to e2e tests and want to see results right away
      * Cons: Slower than other options. Occasionally dev server may stop responding which leads to test failures.
    * Local prod server
-     * Pros: Good performance. Please be aware that port 5000 might be occupied on macOS by some system utilities.
-     * Cons: Requires full build
+     * Pros: Good performance.
+     * Cons: Requires full build. Port ```5000``` might be occupied on macOS by some system utilities.
    * Any external UUI server
      * Pros: Good performance (though it depends on network speed).
-3. [Optional step] Change ```.env.local``` file to set non-standard UUI_APP_BASE_URL
+2. [Optional step] Change ```.env.local``` file to set non-standard ```UUI_APP_BASE_URL```
 
-#### NPM tasks to use
-Note: If the tasks are run for the very first time, it might take some time to download necessary docker images (about 10 min).
+## NPM tasks to use
+Note: If the tasks are run for the very first time, it might take some time to download necessary docker images (up to 10 min, depends on network speed).
 ```shell
 # Run tests in docker container
 yarn test-e2e
@@ -44,27 +79,6 @@ yarn test-e2e-update
 yarn test-e2e-report
 ```
 
-### Useful Podman commands
-The image for UUI e2e test requires about ```2.4 Gb``` of free disk space.
-The following commands can help you to check how much disk space is being used.
-```shell
-# Show podman disk usage
-podman system df
-
-# List all images and their sizes
-podman images --all
 
-# Remove all images without at least one container associated with them
-# It's a preferrable way to clean up unused images.
-podman image prune --all
 
-# Delete all images. Use it only when other methods to free up space don't help.
-# When the e2e tests are run after deleting all images, all necessary dependencies will download again which takes some time.
-podman rmi --all --force
-```
-
-### Usage of alternative tools to build/run the Docker images
-By default, Podman is used to run e2e tests. 
-But it's possible to specify some alternative tool via ```.env.local``` file using ```UUI_DOCKER_CONTAINER_MGMT=<alternative_tool>``` option. 
-Please make sure that this tool is compatible with Docker's CLI.
 

From a78b94f4b01bbfe5f0ce1e12ccc93835445dba3b Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Wed, 3 Apr 2024 16:49:46 +0300
Subject: [PATCH 24/25] [StatusIndicator]: fixed table border in example.
 [RangeDatePicker]: fixed footer background

---
 .../statusIndicator/WithTable.example.tsx     |  6 +-
 .../rangeDatePickerExamples.module.scss       |  1 -
 ...ples-rangeDatePicker-PresetsAndFooter.json | 68 ++++++-------------
 3 files changed, 23 insertions(+), 52 deletions(-)

diff --git a/app/src/docs/_examples/statusIndicator/WithTable.example.tsx b/app/src/docs/_examples/statusIndicator/WithTable.example.tsx
index 621aad573b..c8c9b19f18 100644
--- a/app/src/docs/_examples/statusIndicator/WithTable.example.tsx
+++ b/app/src/docs/_examples/statusIndicator/WithTable.example.tsx
@@ -42,13 +42,13 @@ const personColumns: DataColumnProps<Person, number>[] = [
         key: 'jobTitle',
         caption: 'Title',
         render: (r) => <Text>{r.jobTitle}</Text>,
-        width: 200,
+        width: 220,
     },
     {
         key: 'productionCategory',
         caption: 'Is Production',
         render: (r) => <Text>{r.productionCategory ? 'Yes' : 'No' }</Text>,
-        width: 100,
+        width: 150,
     },
 ];
 
@@ -70,7 +70,7 @@ export default function WithTableExample() {
     const view = dataSource.useView(tableState, setTableState);
 
     return (
-        <Panel background="surface-main" style={ { height: '400px' } }>
+        <Panel background="surface-main" style={ { height: '400px' } } shadow={ true }>
             <DataTable getRows={ view.getVisibleRows } columns={ personColumns } value={ tableState } onValueChange={ setTableState } { ...view.getListProps() } />
         </Panel>
     );
diff --git a/app/src/docs/rangeDatePicker/rangeDatePickerExamples.module.scss b/app/src/docs/rangeDatePicker/rangeDatePickerExamples.module.scss
index 732607a58a..3fd693ed95 100644
--- a/app/src/docs/rangeDatePicker/rangeDatePickerExamples.module.scss
+++ b/app/src/docs/rangeDatePicker/rangeDatePickerExamples.module.scss
@@ -5,7 +5,6 @@
     justify-content: center;
     align-items: center;
     border-top: 1px solid var(--uui-control-border);
-    background-color: var(--white);
 }
 
 .dot {
diff --git a/public/docs/content/examples-rangeDatePicker-PresetsAndFooter.json b/public/docs/content/examples-rangeDatePicker-PresetsAndFooter.json
index ddb34cbfd3..3d17d521f4 100644
--- a/public/docs/content/examples-rangeDatePicker-PresetsAndFooter.json
+++ b/public/docs/content/examples-rangeDatePicker-PresetsAndFooter.json
@@ -1,53 +1,25 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "You can define range presets via the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "presets",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop and a footer via the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "renderFooter",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop.",
-            "marks": []
-          }
-        ]
+        "text": "You can define range presets via the "
+      },
+      {
+        "text": "presets",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " prop and a footer via the "
+      },
+      {
+        "text": "renderFooter",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " prop."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file

From ba8da41c29eb21219895be5595bc072f69593da9 Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Wed, 3 Apr 2024 17:09:41 +0300
Subject: [PATCH 25/25] [PickerTogglerTag]: fixed renderItem interface.

---
 .../examples-pickerInput-PickerTogglerTagDemo.json       | 9 ++++++++-
 uui-components/src/pickers/PickerToggler.tsx             | 4 ++--
 uui/components/pickers/PickerInput.tsx                   | 5 ++---
 uui/components/pickers/PickerTogglerTag.tsx              | 4 ++--
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
index c7dba0cc5e..7cf6e175bd 100644
--- a/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
+++ b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
@@ -10,7 +10,14 @@
         "uui-richTextEditor-code": true
       },
       {
-        "text": " component."
+        "text": " component using the "
+      },
+      {
+        "text": "renderTag",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " property to customize it."
       }
     ]
   }
diff --git a/uui-components/src/pickers/PickerToggler.tsx b/uui-components/src/pickers/PickerToggler.tsx
index 27889a5d7f..6555fdda7f 100644
--- a/uui-components/src/pickers/PickerToggler.tsx
+++ b/uui-components/src/pickers/PickerToggler.tsx
@@ -5,7 +5,7 @@ import css from './PickerToggler.module.scss';
 import { i18n } from '../i18n';
 import { getMaxItems } from './helpers';
 
-export interface IRenderItemProps<TItem, TId> extends IHasCaption, IDisableable {
+export interface PickerTogglerRenderItemParams<TItem, TId> extends IHasCaption, IDisableable {
     /** Key for the component */
     key: string;
     /** DataRowProps object of the rendered item */
@@ -21,7 +21,7 @@ export interface PickerTogglerProps<TItem = any, TId = any>
     cancelIcon?: Icon;
     dropdownIcon?: Icon;
     autoFocus?: boolean;
-    renderItem?(props: IRenderItemProps<TItem, TId>): React.ReactNode;
+    renderItem?(props: PickerTogglerRenderItemParams<TItem, TId>): React.ReactNode;
     getName?: (item: TItem) => string;
     entityName?: string;
     maxItems?: number;
diff --git a/uui/components/pickers/PickerInput.tsx b/uui/components/pickers/PickerInput.tsx
index 809bceea46..0c2dfa22c8 100644
--- a/uui/components/pickers/PickerInput.tsx
+++ b/uui/components/pickers/PickerInput.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { PickerBodyBaseProps, PickerInputBaseProps, PickerTogglerProps, usePickerInput } from '@epam/uui-components';
+import { PickerTogglerRenderItemParams, PickerBodyBaseProps, PickerInputBaseProps, PickerTogglerProps, usePickerInput } from '@epam/uui-components';
 import { Dropdown } from '../overlays/Dropdown';
 import { EditMode, IHasEditMode, SizeMod } from '../types';
 import { DataRowProps, DataSourceListProps, DataSourceState, DropdownBodyProps, IDropdownToggler, IEditableDebouncer, isMobile } from '@epam/uui-core';
@@ -10,7 +10,6 @@ import { DataPickerBody } from './DataPickerBody';
 import { DataPickerRow } from './DataPickerRow';
 import { DataPickerFooter } from './DataPickerFooter';
 import { PickerItem } from './PickerItem';
-import { PickerTogglerTagProps } from './PickerTogglerTag';
 
 const pickerHeight = 300;
 const pickerWidth = 360;
@@ -20,7 +19,7 @@ export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputB
      * Render callback for picker toggler selection tag
      * If omitted, default `PickerTogglerTag` component will be rendered
      */
-    renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;
+    renderTag?: (props: PickerTogglerRenderItemParams<TItem, TId>) => JSX.Element;
 };
 
 function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...props }: PickerInputProps<TItem, TId>, ref: React.ForwardedRef<HTMLElement>) {
diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
index 65361a6aec..2a1a07a5c7 100644
--- a/uui/components/pickers/PickerTogglerTag.tsx
+++ b/uui/components/pickers/PickerTogglerTag.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as types from '../types';
 import { Tag, TagProps } from '../widgets';
-import { IRenderItemProps } from '@epam/uui-components';
+import { PickerTogglerRenderItemParams } from '@epam/uui-components';
 
-export interface PickerTogglerTagProps<TItem, TId> extends IRenderItemProps<TItem, TId>, TagProps {
+export interface PickerTogglerTagProps<TItem, TId> extends PickerTogglerRenderItemParams<TItem, TId>, TagProps {
     /** Defines component size */
     size?: types.ControlSize;
 }