@octanejs/dnd-kit 0.1.1 → 0.1.5

package/README.md

@@ -40,5 +40,12 @@ The public entry points mirror `@dnd-kit/react@0.5.0`:
 - `@octanejs/dnd-kit/sortable`
 - `@octanejs/dnd-kit/utilities`
 
+Octane's default `useSortable` plugins retain dnd-kit's keyboard mechanics but
+omit `OptimisticSortingPlugin`. That upstream plugin reparents the single host
+element before application state commits; doing so can split an Octane keyed
+item's owned DOM range. Update list state from the drag events as in the example
+above and Octane performs the visible keyed move. An explicit `plugins` array is
+still used exactly as supplied.
+
 This package targets the modern dnd-kit API. The legacy `@dnd-kit/core` 6.x
 API is not included.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/dnd-kit",
-  "version": "0.1.1",
+  "version": "0.1.5",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -46,7 +46,7 @@
     "@dnd-kit/state": "0.5.0"
   },
   "peerDependencies": {
-    "octane": "0.1.6"
+    "octane": "0.1.10"
   },
   "devDependencies": {
     "@dnd-kit/helpers": "0.5.0",
@@ -57,7 +57,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "vitest": "^4.1.9",
-    "octane": "0.1.6"
+    "octane": "0.1.10"
   },
   "scripts": {
     "test": "vitest run --root ../.. --project dnd-kit",

package/src/sortable/useSortable.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'octane';
-import type { Data } from '@dnd-kit/abstract';
-import { Sortable, defaultSortableTransition } from '@dnd-kit/dom/sortable';
+import type { Customizable, Data, Plugins } from '@dnd-kit/abstract';
+import { Sortable, SortableKeyboardPlugin, defaultSortableTransition } from '@dnd-kit/dom/sortable';
 import type { SortableInput } from '@dnd-kit/dom/sortable';
 import { batch, deepEqual } from '@dnd-kit/state';
 import { useInstance } from '../core/hooks/useInstance';
@@ -21,6 +21,19 @@ export interface UseSortableInput<T extends Data = Data> extends Omit<
 	target?: RefOrValue<Element>;
 }
 
+// The DOM core's other default sortable plugin optimistically reparents only
+// the referenced host Element. Octane keyed items can own a wider marker range,
+// so that move splits the framework-owned range before application state has
+// committed and makes the subsequent keyed reconciliation unsafe. Keep the
+// keyboard mechanics by default and let Octane perform the visible move from
+// the consumer's drag handler. Explicit plugin arrays remain authoritative.
+const OCTANE_SORTABLE_DEFAULT_PLUGINS: Plugins = [SortableKeyboardPlugin];
+
+function resolveSortablePlugins(value: Customizable<Plugins> | undefined): Plugins {
+	if (value === undefined) return OCTANE_SORTABLE_DEFAULT_PLUGINS;
+	return typeof value === 'function' ? value([...OCTANE_SORTABLE_DEFAULT_PLUGINS]) : value;
+}
+
 export function useSortable<T extends Data = Data>(input: UseSortableInput<T>, slot?: symbol) {
 	const {
 		accept,
@@ -39,12 +52,14 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>, s
 		type,
 		plugins,
 	} = input;
+	const resolvedPlugins = resolveSortablePlugins(plugins);
 	const transition = { ...defaultSortableTransition, ...input.transition };
 	const sortable = useInstance(
 		(manager) =>
 			new Sortable(
 				{
 					...input,
+					plugins: resolvedPlugins,
 					transition,
 					register: false,
 					handle: currentValue(handle),
@@ -116,8 +131,8 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>, s
 		subSlot(slot, 'priority'),
 	);
 	useOnValueChange(
-		plugins,
-		() => (sortable.plugins = plugins),
+		resolvedPlugins,
+		() => (sortable.plugins = resolvedPlugins),
 		undefined,
 		deepEqual,
 		subSlot(slot, 'plugins'),