From 30ce055986929e71f9b7b63db914cf5361caf0c8 Mon Sep 17 00:00:00 2001
From: GermanVor <vorotnikov.german@yandex.ru>
Date: Fri, 9 Feb 2024 13:11:07 +0100
Subject: [PATCH] chore: add useUniqId

---
 src/components/TreeSelect/DndTreeSelect.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/TreeSelect/DndTreeSelect.tsx b/src/components/TreeSelect/DndTreeSelect.tsx
index 71e375b682..1c2111d193 100644
--- a/src/components/TreeSelect/DndTreeSelect.tsx
+++ b/src/components/TreeSelect/DndTreeSelect.tsx
@@ -4,6 +4,7 @@ import {Grip} from '@gravity-ui/icons';
 import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
 import type {OnDragEndResponder} from 'react-beautiful-dnd';
 
+import {useUniqId} from '../../hooks';
 import {Icon} from '../Icon';
 import {ListContainerView} from '../useList';
 import {reorderArray} from '../useList/__stories__/utils/reorderArray';
@@ -24,8 +25,6 @@ export type RenderDndContainer = (container: {
 
 const DEFAULT_RENDER_CONTAINER: RenderDndContainer = ({renderList}) => renderList();
 
-let dndTreeSelectCount = 0;
-
 export type DndTreeSelectProps<T extends DndTreeSelectItem> = Omit<
     TreeSelectProps<T>,
     'items' | 'renderContainer' | 'renderItem'
@@ -43,9 +42,7 @@ export function DndTreeSelect<T extends DndTreeSelectItem>({
     renderContainer: propsRenderContainer = DEFAULT_RENDER_CONTAINER,
     ...treeSelectNativeProps
 }: DndTreeSelectProps<T>) {
-    const [droppableId] = React.useState(
-        () => initialDroppableId || `default-droppable-id-${dndTreeSelectCount++}`,
-    );
+    const uniqId = useUniqId();
 
     const renderContainer = React.useCallback<RenderContainerType<DndTreeSelectItem>>(
         ({renderItem, visibleFlattenIds, items: _items, containerRef, id}) => {
@@ -64,7 +61,7 @@ export function DndTreeSelect<T extends DndTreeSelectItem>({
             const renderList = () => (
                 <ListContainerView ref={containerRef} id={id}>
                     <DragDropContext onDragEnd={handleDrugEnd}>
-                        <Droppable droppableId={droppableId}>
+                        <Droppable droppableId={initialDroppableId ?? uniqId}>
                             {(droppableProvided) => {
                                 return (
                                     <div
@@ -83,7 +80,7 @@ export function DndTreeSelect<T extends DndTreeSelectItem>({
 
             return propsRenderContainer({renderList});
         },
-        [items, setItems, propsRenderContainer, droppableId],
+        [items, setItems, propsRenderContainer],
     );
 
     const renderDndItem = React.useCallback<RenderItem<DndTreeSelectItem>>(