@dnd-kit/react 0.0.2-beta-20240607020259 → 0.0.2-beta-20240610023542

package/index.cjs

@@ -170,6 +170,7 @@ function useDraggable(input) {
     () => draggable.feedback = input.feedback ?? "default"
   );
   return {
+    draggable,
     get isDragSource() {
       return isDragSource.value;
     },
@@ -203,7 +204,6 @@ function useDroppable(input) {
       manager
     )
   );
-  const isDisabled = hooks.useComputed(() => droppable.disabled);
   const isDropTarget = hooks.useComputed(() => droppable.isDropTarget);
   hooks.useOnValueChange(id, () => droppable.id = id);
   hooks.useOnValueChange(accept, () => droppable.id = id, void 0, state.deepEqual);
@@ -212,9 +212,6 @@ function useDroppable(input) {
   hooks.useOnValueChange(element, () => droppable.element = element);
   hooks.useOnValueChange(type, () => droppable.id = id);
   return {
-    get isDisabled() {
-      return isDisabled.value;
-    },
     get isDropTarget() {
       return isDropTarget.value;
     },
@@ -223,7 +220,8 @@ function useDroppable(input) {
         droppable.element = element2 ?? void 0;
       },
       [droppable]
-    )
+    ),
+    droppable
   };
 }
 function useDragOperation() {

package/index.d.ts

@@ -23,6 +23,7 @@ interface UseDraggableInput<T extends Data = Data> extends Omit<DraggableInput<T
     element?: RefOrValue<Element>;
 }
 declare function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>): {
+    draggable: Draggable<T>;
     readonly isDragSource: boolean;
     handleRef: (element: Element | null) => void;
     ref: (element: Element | null) => void;
@@ -32,9 +33,9 @@ interface UseDroppableInput<T extends Data = Data> extends Omit<DroppableInput<T
     element?: RefOrValue<Element>;
 }
 declare function useDroppable<T extends Data = Data>(input: UseDroppableInput<T>): {
-    readonly isDisabled: boolean;
     readonly isDropTarget: boolean;
     ref: (element: Element | null) => void;
+    droppable: Droppable<T>;
 };
 
 declare function useDragDropManager(): _dnd_kit_dom.DragDropManager<_dnd_kit_dom.Draggable<_dnd_kit_abstract.Data>, _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data>>;

package/index.js

@@ -168,6 +168,7 @@ function useDraggable(input) {
     () => draggable.feedback = input.feedback ?? "default"
   );
   return {
+    draggable,
     get isDragSource() {
       return isDragSource.value;
     },
@@ -201,7 +202,6 @@ function useDroppable(input) {
       manager
     )
   );
-  const isDisabled = useComputed(() => droppable.disabled);
   const isDropTarget = useComputed(() => droppable.isDropTarget);
   useOnValueChange(id, () => droppable.id = id);
   useOnValueChange(accept, () => droppable.id = id, void 0, deepEqual);
@@ -210,9 +210,6 @@ function useDroppable(input) {
   useOnValueChange(element, () => droppable.element = element);
   useOnValueChange(type, () => droppable.id = id);
   return {
-    get isDisabled() {
-      return isDisabled.value;
-    },
     get isDropTarget() {
       return isDropTarget.value;
     },
@@ -221,7 +218,8 @@ function useDroppable(input) {
         droppable.element = element2 ?? void 0;
       },
       [droppable]
-    )
+    ),
+    droppable
   };
 }
 function useDragOperation() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.2-beta-20240607020259",
+  "version": "0.0.2-beta-20240610023542",
   "main": "./index.cjs",
   "module": "./index.js",
   "type": "module",
@@ -56,8 +56,8 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
-    "@dnd-kit/abstract": "0.0.2-beta-20240607020259",
-    "@dnd-kit/dom": "0.0.2-beta-20240607020259",
+    "@dnd-kit/abstract": "0.0.2-beta-20240610023542",
+    "@dnd-kit/dom": "0.0.2-beta-20240610023542",
     "@dnd-kit/state": "*",
     "tslib": "^2.6.2"
   },

package/sortable.cjs

@@ -26,12 +26,14 @@ function useSortable(input) {
   const manager = react.useDragDropManager();
   const handle = utilities.currentValue(input.handle);
   const element = utilities.currentValue(input.element);
+  const target = utilities.currentValue(input.target);
   const sortable$1 = hooks.useConstant(() => {
     return new sortable.Sortable(
       {
         ...input,
         handle,
         element,
+        target,
         feedback,
         options: {
           ...input.options,
@@ -49,7 +51,6 @@ function useSortable(input) {
       manager.registry.unregister(sortable$1.droppable);
     };
   }, [sortable$1, manager]);
-  const isDisabled = hooks.useComputed(() => sortable$1.disabled);
   const isDropTarget = hooks.useComputed(() => sortable$1.isDropTarget);
   const isDragSource = hooks.useComputed(() => sortable$1.isDragSource);
   hooks.useOnValueChange(id, () => sortable$1.id = id);
@@ -74,6 +75,7 @@ function useSortable(input) {
   );
   hooks.useOnValueChange(handle, () => sortable$1.handle = handle);
   hooks.useOnValueChange(element, () => sortable$1.element = element);
+  hooks.useOnValueChange(target, () => sortable$1.target = target);
   hooks.useOnValueChange(disabled, () => sortable$1.disabled = disabled === true);
   hooks.useOnValueChange(sensors, () => sortable$1.sensors = sensors);
   hooks.useOnValueChange(
@@ -87,9 +89,6 @@ function useSortable(input) {
   hooks.useOnValueChange(feedback, () => sortable$1.feedback = feedback ?? "default");
   hooks.useOnValueChange(transition, () => sortable$1.transition = transition);
   return {
-    get isDisabled() {
-      return isDisabled.value;
-    },
     get isDragSource() {
       return isDragSource.value;
     },

package/sortable.d.ts

@@ -2,12 +2,12 @@ import { Data } from '@dnd-kit/abstract';
 import { SortableInput } from '@dnd-kit/dom/sortable';
 import { RefOrValue } from '@dnd-kit/react/utilities';
 
-interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>, 'handle' | 'element'> {
+interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>, 'handle' | 'element' | 'target'> {
     handle?: RefOrValue<Element>;
     element?: RefOrValue<Element>;
+    target?: RefOrValue<Element>;
 }
 declare function useSortable<T extends Data = Data>(input: UseSortableInput<T>): {
-    readonly isDisabled: boolean;
     readonly isDragSource: boolean;
     readonly isDropTarget: boolean;
     handleRef: (element: Element | null) => void;

package/sortable.js

@@ -24,12 +24,14 @@ function useSortable(input) {
   const manager = useDragDropManager();
   const handle = currentValue(input.handle);
   const element = currentValue(input.element);
+  const target = currentValue(input.target);
   const sortable = useConstant(() => {
     return new Sortable(
       {
         ...input,
         handle,
         element,
+        target,
         feedback,
         options: {
           ...input.options,
@@ -47,7 +49,6 @@ function useSortable(input) {
       manager.registry.unregister(sortable.droppable);
     };
   }, [sortable, manager]);
-  const isDisabled = useComputed(() => sortable.disabled);
   const isDropTarget = useComputed(() => sortable.isDropTarget);
   const isDragSource = useComputed(() => sortable.isDragSource);
   useOnValueChange(id, () => sortable.id = id);
@@ -72,6 +73,7 @@ function useSortable(input) {
   );
   useOnValueChange(handle, () => sortable.handle = handle);
   useOnValueChange(element, () => sortable.element = element);
+  useOnValueChange(target, () => sortable.target = target);
   useOnValueChange(disabled, () => sortable.disabled = disabled === true);
   useOnValueChange(sensors, () => sortable.sensors = sensors);
   useOnValueChange(
@@ -85,9 +87,6 @@ function useSortable(input) {
   useOnValueChange(feedback, () => sortable.feedback = feedback ?? "default");
   useOnValueChange(transition, () => sortable.transition = transition);
   return {
-    get isDisabled() {
-      return isDisabled.value;
-    },
     get isDragSource() {
       return isDragSource.value;
     },