diff --git a/src/components/BaseDraggableRow/BaseDraggableRow.tsx b/src/components/BaseDraggableRow/BaseDraggableRow.tsx index 9261021..9590596 100644 --- a/src/components/BaseDraggableRow/BaseDraggableRow.tsx +++ b/src/components/BaseDraggableRow/BaseDraggableRow.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import {useSortable} from '@dnd-kit/sortable'; import {useForkRef} from '@gravity-ui/uikit'; import type {Row as RowType} from '@tanstack/react-table'; @@ -25,15 +24,25 @@ export const BaseDraggableRow = React.forwardRef( }: BaseDraggableRowProps, ref: React.Ref, ) => { - const {setNodeRef, transform, transition, isDragging} = useSortable({ - id: row.id, - }); - const { isChildMode, activeItemKey, targetItemIndex = -1, + // The `useSortable` hook is provided by `@dnd-kit/sortable` library and imported via `SortableListContext`. + // This is a temporary solution to prevent importing the entire `@dnd-kit` library + // when the user doesn't use the reordering feature. + useSortable, } = React.useContext(SortableListContext) ?? {}; + + const { + setNodeRef, + transform = null, + transition, + isDragging = false, + } = useSortable?.({ + id: row.id, + }) || {}; + const {enableNesting} = React.useContext(TableContext); const isDragActive = Boolean(activeItemKey); diff --git a/src/components/SortableList/SortableList.tsx b/src/components/SortableList/SortableList.tsx index a4493b3..c3951eb 100644 --- a/src/components/SortableList/SortableList.tsx +++ b/src/components/SortableList/SortableList.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable'; +import {SortableContext, useSortable, verticalListSortingStrategy} from '@dnd-kit/sortable'; import type {UseSortableListParams} from '../../hooks'; import {useSortableList} from '../../hooks'; @@ -39,6 +39,7 @@ export const SortableList = ({ isNextChildMode, isParentMode, targetItemIndex, + useSortable, }), // eslint-disable-next-line react-hooks/exhaustive-deps [activeItemKey, isChildMode, isNextChildMode, isParentMode, targetItemIndex], diff --git a/src/components/SortableListContext/SortableListContext.tsx b/src/components/SortableListContext/SortableListContext.tsx index 4ca2a94..19af919 100644 --- a/src/components/SortableListContext/SortableListContext.tsx +++ b/src/components/SortableListContext/SortableListContext.tsx @@ -1,8 +1,12 @@ import React from 'react'; +import type {useSortable} from '@dnd-kit/sortable'; + import type {useSortableList} from '../../hooks'; -type SortableListContextValue = ReturnType; +type SortableListContextValue = ReturnType & { + useSortable?: typeof useSortable; +}; export const SortableListContext = React.createContext( undefined,