@contember/react-repeater-dnd-kit 2.1.0-beta.2 → 2.2.0-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-repeater-dnd-kit",
   "license": "Apache-2.0",
-  "version": "2.1.0-beta.2",
+  "version": "2.2.0-alpha.2",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -29,9 +29,9 @@
     "ae:test": "api-extractor run"
   },
   "dependencies": {
-    "@contember/react-binding": "2.1.0-beta.1",
-    "@contember/react-repeater": "2.1.0-beta.1",
-    "@contember/react-utils": "2.1.0-beta.1",
+    "@contember/react-binding": "2.1.0-beta.2",
+    "@contember/react-repeater": "2.1.0-beta.2",
+    "@contember/react-utils": "2.1.0-beta.2",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@radix-ui/react-portal": "^1.1.10",

package/src/components/RepeaterSortable.tsx

@@ -14,7 +14,7 @@ import {
 	useSensor,
 	useSensors,
 } from '@dnd-kit/core'
-import { RepeaterActiveEntityContext } from '../contexts'
+import { RepeaterActiveEntityContext } from '../contexts.js'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { useRepeaterMethods, useRepeaterSortedEntities } from '@contember/react-repeater'
 

package/src/components/RepeaterSortableDragOverlay.tsx

@@ -1,8 +1,9 @@
 import React, { ReactNode } from 'react'
-import { useRepeaterActiveEntity } from '../contexts'
+import { RepeaterSortableItemContext, useRepeaterActiveEntity } from '../contexts.js'
 import { Portal } from '@radix-ui/react-portal'
 import { DragOverlay } from '@dnd-kit/core'
-import { AccessorTree, Entity, useAccessorTreeState } from '@contember/react-binding'
+import { useSortable } from '@dnd-kit/sortable'
+import { AccessorTree, Entity, EntityAccessor, useAccessorTreeState } from '@contember/react-binding'
 import { RepeaterCurrentEntityContext } from '@contember/react-repeater'
 
 /**
@@ -22,7 +23,9 @@ export const RepeaterSortableDragOverlay = ({ children }: {
 				<AccessorTree state={accessorTreeState}>
 					<Entity accessor={activeItem}>
 						<RepeaterCurrentEntityContext.Provider value={activeItem}>
-							{children}
+							<RepeaterSortableDragOverlayItemContext activeItem={activeItem}>
+								{children}
+							</RepeaterSortableDragOverlayItemContext>
 						</RepeaterCurrentEntityContext.Provider>
 					</Entity>
 				</AccessorTree>
@@ -30,3 +33,17 @@ export const RepeaterSortableDragOverlay = ({ children }: {
 		</Portal>
 	)
 }
+
+const RepeaterSortableDragOverlayItemContext = ({ activeItem, children }: {
+	activeItem: EntityAccessor
+	children: ReactNode
+}) => {
+	const sortable = useSortable({
+		id: activeItem.id,
+	})
+	return (
+		<RepeaterSortableItemContext.Provider value={sortable}>
+			{children}
+		</RepeaterSortableItemContext.Provider>
+	)
+}

package/src/components/RepeaterSortableDropIndicator.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react'
-import { useRepeaterSortableItem } from '../contexts'
+import { useRepeaterSortableItem } from '../contexts.js'
 
 /**
  * Renders a child element when the repeater item is being dragged over the drop indicator.

package/src/components/RepeaterSortableEachItem.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { RepeaterEachItem, useRepeaterSortedEntities } from '@contember/react-repeater'
-import { RepeaterSortableItemContext } from '../contexts'
+import { RepeaterSortableItemContext } from '../contexts.js'
 import { useEntity } from '@contember/react-binding'
 
 /**

package/src/components/RepeaterSortableItemActivator.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, ReactElement, ReactNode } from 'react'
-import { useRepeaterSortableItem } from '../contexts'
+import { useRepeaterSortableItem } from '../contexts.js'
 import { Slot } from '@radix-ui/react-slot'
 import { useComposeRef } from '@contember/react-utils'
 

package/src/components/RepeaterSortableItemNode.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { useRepeaterSortableItem } from '../contexts'
+import { useRepeaterSortableItem } from '../contexts.js'
 import { Slot } from '@radix-ui/react-slot'
 
 /**

package/src/components/index.ts

@@ -1,6 +1,6 @@
-export * from './RepeaterSortable'
-export * from './RepeaterSortableDragOverlay'
-export * from './RepeaterSortableDropIndicator'
-export * from './RepeaterSortableItemActivator'
-export * from './RepeaterSortableItemNode'
-export * from './RepeaterSortableEachItem'
+export * from './RepeaterSortable.js'
+export * from './RepeaterSortableDragOverlay.js'
+export * from './RepeaterSortableDropIndicator.js'
+export * from './RepeaterSortableItemActivator.js'
+export * from './RepeaterSortableItemNode.js'
+export * from './RepeaterSortableEachItem.js'

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from './components'
-export * from './contexts'
+export * from './components/index.js'
+export * from './contexts.js'
 
 export * from '@contember/react-repeater'