@mk-drag-and-drop/react 0.1.0

package/dist/drag-overlay.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useLayoutEffect, useRef, } from "react";
+export const DragOverlayHost = memo(function DragOverlayHost({ dragState, children, contentId, onHostReady, onOverlayRectChange, }) {
+    const overlayWrapperRef = useRef(null);
+    useLayoutEffect(() => {
+        const wrapper = overlayWrapperRef.current;
+        if (!wrapper) {
+            onHostReady?.(null);
+            return;
+        }
+        const host = {
+            move: (nextDragState) => {
+                moveOverlayWrapper(wrapper, nextDragState);
+            },
+        };
+        onHostReady?.(host);
+        host.move(dragState);
+        return () => {
+            onHostReady?.(null);
+        };
+    }, [dragState, onHostReady]);
+    useLayoutEffect(() => {
+        const wrapper = overlayWrapperRef.current;
+        if (!wrapper) {
+            onOverlayRectChange?.(null);
+            return;
+        }
+        const measuredElement = wrapper.firstElementChild ?? wrapper;
+        const measureOverlayElement = () => {
+            if (!measuredElement.isConnected) {
+                return;
+            }
+            onOverlayRectChange?.(domRectToDragRect(measuredElement.getBoundingClientRect()));
+        };
+        measureOverlayElement();
+        if (typeof ResizeObserver === "undefined") {
+            return () => {
+                onOverlayRectChange?.(null);
+            };
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            measureOverlayElement();
+        });
+        resizeObserver.observe(measuredElement);
+        return () => {
+            resizeObserver.disconnect();
+            onOverlayRectChange?.(null);
+        };
+    }, [contentId, onOverlayRectChange]);
+    return (_jsx("div", { ref: overlayWrapperRef, style: {
+            position: "fixed",
+            left: dragState.sourceRect.left,
+            top: dragState.sourceRect.top,
+            width: dragState.sourceRect.width,
+            height: dragState.sourceRect.height,
+            pointerEvents: "none",
+            zIndex: 9999,
+            transform: getOverlayTransform(dragState),
+        }, children: children }));
+});
+function moveOverlayWrapper(wrapper, dragState) {
+    wrapper.style.transform = getOverlayTransform(dragState);
+}
+function getOverlayTransform(dragState) {
+    const x = dragState.pointerPosition.x - dragState.startPointerPosition.x;
+    const y = dragState.pointerPosition.y - dragState.startPointerPosition.y;
+    return `translate3d(${x}px, ${y}px, 0)`;
+}
+function domRectToDragRect(rect) {
+    return {
+        x: rect.x,
+        y: rect.y,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+    };
+}

package/dist/drag-provider.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { type DragEndEvent, type DragLifecycleCallbacks, type DragModifierInput, type DragStartEvent, type DragUpdateEvent, type DropEvent, type KeyboardConfiguration, type PointerConfiguration, type TargetingAlgorithm, type TargetingConstraint } from "@mk-drag-and-drop/dom";
+import { type DragOverlayInput } from "./drag-overlay.js";
+export type DragAnnouncements = {
+    onDragStart?: (event: DragStartEvent) => string | null;
+    onDragUpdate?: (event: DragUpdateEvent) => string | null;
+    onDragEnd?: (event: DragEndEvent) => string | null;
+    onDrop?: (event: DropEvent) => string | null;
+};
+export type DragProviderProps = {
+    children: ReactNode;
+    announcements?: DragAnnouncements;
+    dragOverlay?: (overlay: DragOverlayInput) => ReactNode;
+    keyboardConfiguration?: KeyboardConfiguration;
+    keepOverlayOnDrop?: boolean;
+    modifiers?: readonly DragModifierInput[];
+    pointerConfiguration?: PointerConfiguration;
+    targetingAlgorithm?: TargetingAlgorithm;
+    targetingConstraint?: TargetingConstraint;
+} & DragLifecycleCallbacks;
+export declare function DragProvider({ children, announcements, dragOverlay, keyboardConfiguration, keepOverlayOnDrop, modifiers, pointerConfiguration, targetingAlgorithm, targetingConstraint, onDragStart, onDragUpdate, onDragEnd, onDrop, }: DragProviderProps): import("react").JSX.Element;

package/dist/drag-provider.js

@@ -0,0 +1,293 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { pointerToCenter, } from "@mk-drag-and-drop/dom";
+import { createDragRuntimeHandle, } from "@mk-drag-and-drop/dom/integration";
+import { DragContext } from "./drag-context.js";
+import { DragOverlayHost, } from "./drag-overlay.js";
+const visuallyHiddenStyle = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    whiteSpace: "nowrap",
+    border: 0,
+};
+export function DragProvider({ children, announcements, dragOverlay, keyboardConfiguration, keepOverlayOnDrop = false, modifiers, pointerConfiguration, targetingAlgorithm = pointerToCenter, targetingConstraint, onDragStart, onDragUpdate, onDragEnd, onDrop, }) {
+    const [overlayRequest, setOverlayRequest] = useState(null);
+    const [announcementState, setAnnouncementState] = useState({
+        id: 0,
+        message: "",
+    });
+    const lastAnnouncementRef = useRef(null);
+    const runtimeRef = useRef(null);
+    const dragOverlayRef = useRef(dragOverlay);
+    const overlayHostRef = useRef(null);
+    const overlayContentIdRef = useRef(0);
+    const overlaySnapshotRef = useRef(null);
+    const pendingOverlayDragStateRef = useRef(null);
+    const latestLifecyclePropsRef = useRef({
+        announcements,
+        onDragStart,
+        onDragUpdate,
+        onDragEnd,
+        onDrop,
+    });
+    const lifecycleCallbacksRef = useRef(null);
+    const runtimeConfigurationSnapshotRef = useRef(null);
+    const keyboardDragEnabled = isKeyboardDragEnabledFromConfiguration(keyboardConfiguration);
+    const finishOverlay = useCallback(() => {
+        pendingOverlayDragStateRef.current = null;
+        overlayHostRef.current = null;
+        overlaySnapshotRef.current = null;
+        setOverlayRequest(null);
+        runtimeRef.current?.setOverlayRect(null);
+    }, []);
+    if (lifecycleCallbacksRef.current === null) {
+        lifecycleCallbacksRef.current = {
+            onDragStart: (event, helpers) => {
+                const { announcements, onDragStart } = latestLifecyclePropsRef.current;
+                onDragStart?.(event, helpers);
+                announce(announcements?.onDragStart?.(event));
+            },
+            onDragUpdate: (event, helpers) => {
+                const { announcements, onDragUpdate } = latestLifecyclePropsRef.current;
+                onDragUpdate?.(event, helpers);
+                if (event.activeDropTargetId !== event.previousDropTargetId) {
+                    announce(announcements?.onDragUpdate?.(event));
+                }
+            },
+            onDragEnd: (event, helpers) => {
+                const { announcements, onDragEnd } = latestLifecyclePropsRef.current;
+                onDragEnd?.(event, helpers);
+                announce(announcements?.onDragEnd?.(event));
+            },
+            onDrop: (event, helpers) => {
+                const { announcements, onDrop } = latestLifecyclePropsRef.current;
+                onDrop?.(event, helpers);
+                announce(announcements?.onDrop?.(event));
+            },
+        };
+    }
+    if (runtimeRef.current === null) {
+        runtimeRef.current = createDragRuntimeHandle({
+            updateOverlayHost: handleOverlayHostUpdate,
+        });
+    }
+    const runtime = runtimeRef.current;
+    const contextValue = useMemo(() => ({
+        runtime,
+        keyboardDragEnabled,
+    }), [keyboardDragEnabled, runtime]);
+    const nextRuntimeConfiguration = {
+        targetingAlgorithm,
+        targetingConstraint,
+        hasDragOverlay: dragOverlay !== undefined,
+        keepOverlayOnDrop,
+        lifecycleCallbacks: lifecycleCallbacksRef.current,
+        keyboardConfiguration,
+        modifiers,
+        pointerConfiguration,
+    };
+    useLayoutEffect(() => {
+        dragOverlayRef.current = dragOverlay;
+        latestLifecyclePropsRef.current = {
+            announcements,
+            onDragStart,
+            onDragUpdate,
+            onDragEnd,
+            onDrop,
+        };
+    });
+    useLayoutEffect(() => {
+        if (areRuntimeConfigurationSnapshotsEqual(runtimeConfigurationSnapshotRef.current, nextRuntimeConfiguration)) {
+            return;
+        }
+        runtime.configure(nextRuntimeConfiguration);
+        runtimeConfigurationSnapshotRef.current =
+            createRuntimeConfigurationSnapshot(nextRuntimeConfiguration);
+    });
+    useEffect(() => {
+        return () => {
+            runtime.dispose();
+        };
+    }, [runtime]);
+    useEffect(() => {
+        if (!dragOverlay) {
+            finishOverlay();
+        }
+    }, [dragOverlay, finishOverlay]);
+    useEffect(() => {
+        if (!announcements) {
+            lastAnnouncementRef.current = null;
+        }
+    }, [announcements]);
+    function announce(message) {
+        if (!message || message === lastAnnouncementRef.current) {
+            return;
+        }
+        lastAnnouncementRef.current = message;
+        setAnnouncementState((currentAnnouncementState) => ({
+            id: currentAnnouncementState.id + 1,
+            message,
+        }));
+    }
+    const handleOverlayRectChange = useCallback((overlayRect) => {
+        runtimeRef.current?.setOverlayRect(overlayRect);
+    }, []);
+    const handleOverlayHostReady = useCallback((host) => {
+        overlayHostRef.current = host;
+        if (host && pendingOverlayDragStateRef.current) {
+            host.move(pendingOverlayDragStateRef.current);
+        }
+    }, []);
+    const overlaySnapshot = getOverlaySnapshot();
+    return (_jsxs(DragContext, { value: contextValue, children: [children, overlaySnapshot ? (_jsx(DragOverlayHost, { contentId: overlaySnapshot.id, dragState: overlaySnapshot.state.dragState, onHostReady: handleOverlayHostReady, onOverlayRectChange: handleOverlayRectChange, children: overlaySnapshot.content })) : null, announcements ? (_jsx("div", { "aria-atomic": "true", "aria-live": "polite", style: visuallyHiddenStyle, children: announcementState.message ? (_jsx("span", { children: announcementState.message }, announcementState.id)) : null })) : null] }));
+    function handleOverlayHostUpdate(update) {
+        if (update.type === "mount" || update.type === "release") {
+            mountOverlay(update.state);
+            return;
+        }
+        if (update.type === "move") {
+            moveOverlay(update.dragState);
+            return;
+        }
+        finishOverlay();
+    }
+    function mountOverlay(state) {
+        pendingOverlayDragStateRef.current = state.dragState;
+        overlayHostRef.current?.move(state.dragState);
+        if (!dragOverlayRef.current) {
+            finishOverlay();
+            return;
+        }
+        overlayContentIdRef.current += 1;
+        setOverlayRequest({
+            id: overlayContentIdRef.current,
+            state,
+        });
+    }
+    function moveOverlay(dragState) {
+        pendingOverlayDragStateRef.current = dragState;
+        overlayHostRef.current?.move(dragState);
+    }
+    function getOverlaySnapshot() {
+        if (!overlayRequest || !dragOverlay) {
+            overlaySnapshotRef.current = null;
+            return null;
+        }
+        if (overlaySnapshotRef.current?.id === overlayRequest.id) {
+            return overlaySnapshotRef.current;
+        }
+        overlaySnapshotRef.current = {
+            id: overlayRequest.id,
+            state: overlayRequest.state,
+            content: dragOverlay({
+                dragState: overlayRequest.state.dragState,
+                phase: overlayRequest.state.phase,
+                finish: finishOverlay,
+            }),
+        };
+        return overlaySnapshotRef.current;
+    }
+}
+function createRuntimeConfigurationSnapshot(input) {
+    return {
+        targetingAlgorithm: input.targetingAlgorithm,
+        targetingConstraint: input.targetingConstraint,
+        hasDragOverlay: input.hasDragOverlay,
+        keepOverlayOnDrop: input.keepOverlayOnDrop,
+        keyboardConfiguration: cloneKeyboardConfiguration(input.keyboardConfiguration),
+        modifiers: input.modifiers ? Array.from(input.modifiers) : undefined,
+        pointerConfiguration: input.pointerConfiguration
+            ? { ...input.pointerConfiguration }
+            : undefined,
+    };
+}
+function areRuntimeConfigurationSnapshotsEqual(previous, next) {
+    return (previous !== null &&
+        previous.targetingAlgorithm === next.targetingAlgorithm &&
+        previous.targetingConstraint === next.targetingConstraint &&
+        previous.hasDragOverlay === next.hasDragOverlay &&
+        previous.keepOverlayOnDrop === next.keepOverlayOnDrop &&
+        areKeyboardConfigurationsEqual(previous.keyboardConfiguration, next.keyboardConfiguration) &&
+        arePointerConfigurationsEqual(previous.pointerConfiguration, next.pointerConfiguration) &&
+        areModifierInputsEqual(previous.modifiers, next.modifiers));
+}
+function cloneKeyboardConfiguration(keyboardConfiguration) {
+    if (!keyboardConfiguration) {
+        return undefined;
+    }
+    return {
+        enabled: keyboardConfiguration.enabled,
+        start: cloneKeyboardCommand(keyboardConfiguration.start),
+        drop: cloneKeyboardCommand(keyboardConfiguration.drop),
+        cancel: cloneKeyboardCommand(keyboardConfiguration.cancel),
+        moveUp: cloneKeyboardCommand(keyboardConfiguration.moveUp),
+        moveDown: cloneKeyboardCommand(keyboardConfiguration.moveDown),
+        moveLeft: cloneKeyboardCommand(keyboardConfiguration.moveLeft),
+        moveRight: cloneKeyboardCommand(keyboardConfiguration.moveRight),
+        moveDistance: keyboardConfiguration.moveDistance,
+    };
+}
+function cloneKeyboardCommand(command) {
+    return Array.isArray(command) ? Array.from(command) : command;
+}
+function areKeyboardConfigurationsEqual(previous, next) {
+    if (previous === next) {
+        return true;
+    }
+    if (!previous || !next) {
+        return false;
+    }
+    return (previous.enabled === next.enabled &&
+        previous.moveDistance === next.moveDistance &&
+        areKeyboardCommandsEqual(previous.start, next.start) &&
+        areKeyboardCommandsEqual(previous.drop, next.drop) &&
+        areKeyboardCommandsEqual(previous.cancel, next.cancel) &&
+        areKeyboardCommandsEqual(previous.moveUp, next.moveUp) &&
+        areKeyboardCommandsEqual(previous.moveDown, next.moveDown) &&
+        areKeyboardCommandsEqual(previous.moveLeft, next.moveLeft) &&
+        areKeyboardCommandsEqual(previous.moveRight, next.moveRight));
+}
+function areKeyboardCommandsEqual(previous, next) {
+    if (previous === next) {
+        return true;
+    }
+    if (previous === undefined || next === undefined) {
+        return false;
+    }
+    if (typeof previous === "string" || typeof next === "string") {
+        return (typeof previous === "string" &&
+            typeof next === "string" &&
+            normalizeKeyboardKey(previous) === normalizeKeyboardKey(next));
+    }
+    if (previous.length !== next.length) {
+        return false;
+    }
+    return previous.every((key, index) => normalizeKeyboardKey(key) === normalizeKeyboardKey(next[index]));
+}
+function normalizeKeyboardKey(key) {
+    return key === " " ? "Space" : key;
+}
+function arePointerConfigurationsEqual(previous, next) {
+    return (previous === next ||
+        (previous !== undefined &&
+            next !== undefined &&
+            previous.activationDelay === next.activationDelay &&
+            previous.activationDistance === next.activationDistance));
+}
+function areModifierInputsEqual(previous, next) {
+    if (previous === next) {
+        return true;
+    }
+    if (!previous || !next || previous.length !== next.length) {
+        return false;
+    }
+    return previous.every((modifier, index) => modifier === next[index]);
+}
+function isKeyboardDragEnabledFromConfiguration(keyboardConfiguration) {
+    return keyboardConfiguration?.enabled ?? true;
+}

package/dist/hooks/use-drag-handle.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "react";
+export type UseDragHandleResult<ElementType extends HTMLElement = HTMLElement> = HTMLAttributes<ElementType> & {
+    "data-dnd-drag-handle": string;
+};
+export declare function useDragHandle<ElementType extends HTMLElement = HTMLElement>(): UseDragHandleResult<ElementType>;

package/dist/hooks/use-drag-handle.js

@@ -0,0 +1,7 @@
+import { domDragHandleAttribute } from "@mk-drag-and-drop/dom/integration";
+const dragHandleProps = {
+    [domDragHandleAttribute]: "true",
+};
+export function useDragHandle() {
+    return dragHandleProps;
+}

package/dist/hooks/use-draggable.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type RefCallback } from "react";
+export type UseDraggableOptions = {
+    draggableId: string;
+    group?: string;
+};
+export type UseDraggableResult<ElementType extends HTMLElement = HTMLElement> = HTMLAttributes<ElementType> & {
+    ref: RefCallback<ElementType>;
+};
+export declare function useDraggable<ElementType extends HTMLElement = HTMLElement>({ draggableId, group, }: UseDraggableOptions): UseDraggableResult<ElementType>;

package/dist/hooks/use-draggable.js

@@ -0,0 +1,36 @@
+import { useCallback, useContext, useMemo, useRef, } from "react";
+import { createDomDraggable } from "@mk-drag-and-drop/dom/integration";
+import { DragContext } from "../drag-context.js";
+const defaultDraggableGroup = "default";
+export function useDraggable({ draggableId, group = defaultDraggableGroup, }) {
+    const context = useContext(DragContext);
+    const nodeRef = useRef(null);
+    if (!context) {
+        throw new Error("useDraggable must be used inside DragProvider");
+    }
+    const { runtime, keyboardDragEnabled } = context;
+    const setNodeRef = useCallback((node) => {
+        nodeRef.current = node;
+    }, []);
+    const getNode = useCallback(() => nodeRef.current, []);
+    const behavior = useMemo(() => createDomDraggable({
+        draggableId,
+        group,
+        runtime,
+        getElement: getNode,
+        keyboardDragEnabled,
+    }), [getNode, group, draggableId, keyboardDragEnabled, runtime]);
+    return useMemo(() => {
+        const dragProps = {
+            ref: setNodeRef,
+            onPointerDown: behavior.onPointerDown,
+        };
+        return behavior.tabIndex !== undefined
+            ? {
+                ...dragProps,
+                tabIndex: behavior.tabIndex,
+                onKeyDown: behavior.onKeyDown,
+            }
+            : dragProps;
+    }, [behavior, setNodeRef]);
+}

package/dist/hooks/use-drop-container.d.ts

@@ -0,0 +1,9 @@
+import { type RefCallback } from "react";
+export type UseDropContainerOptions = {
+    containerId: string;
+    group?: string;
+};
+export type UseDropContainerResult<ElementType extends HTMLElement = HTMLElement> = {
+    ref: RefCallback<ElementType>;
+};
+export declare function useDropContainer<ElementType extends HTMLElement = HTMLElement>({ containerId, group, }: UseDropContainerOptions): UseDropContainerResult<ElementType>;

package/dist/hooks/use-drop-container.js

@@ -0,0 +1,56 @@
+import { useCallback, useContext, useEffect, useMemo, useRef, } from "react";
+import { createDomDropContainer, } from "@mk-drag-and-drop/dom/integration";
+import { DragContext } from "../drag-context.js";
+const defaultDropContainerGroup = "default";
+export function useDropContainer({ containerId, group = defaultDropContainerGroup, }) {
+    const context = useContext(DragContext);
+    const nodeRef = useRef(null);
+    const behaviorRef = useRef(null);
+    if (!context) {
+        throw new Error("useDropContainer must be used inside DragProvider");
+    }
+    const { runtime } = context;
+    const getElement = useCallback(() => nodeRef.current, []);
+    const getBehavior = useCallback(() => {
+        const existingBehavior = behaviorRef.current;
+        if (existingBehavior &&
+            existingBehavior.runtime === runtime &&
+            existingBehavior.containerId === containerId &&
+            existingBehavior.group === group) {
+            return existingBehavior.behavior;
+        }
+        existingBehavior?.behavior.cleanup();
+        const behavior = createDomDropContainer({
+            runtime,
+            containerId,
+            group,
+            getElement,
+        });
+        behaviorRef.current = {
+            runtime,
+            containerId,
+            group,
+            behavior,
+        };
+        return behavior;
+    }, [containerId, getElement, group, runtime]);
+    const setNodeRef = useCallback((node) => {
+        nodeRef.current = node;
+        getBehavior().setElement(node);
+    }, [getBehavior]);
+    useEffect(() => {
+        const behavior = getBehavior();
+        if (nodeRef.current) {
+            behavior.setElement(nodeRef.current);
+        }
+        return () => {
+            behavior.cleanup();
+            if (behaviorRef.current?.behavior === behavior) {
+                behaviorRef.current = null;
+            }
+        };
+    }, [getBehavior]);
+    return useMemo(() => ({
+        ref: setNodeRef,
+    }), [setNodeRef]);
+}

package/dist/hooks/use-droppable.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type RefCallback } from "react";
+export type UseDroppableOptions = {
+    dropTargetId: string;
+    group?: string;
+    containerId?: string | null;
+};
+export type UseDroppableResult<ElementType extends HTMLElement = HTMLElement> = HTMLAttributes<ElementType> & {
+    ref: RefCallback<ElementType>;
+};
+export declare function useDroppable<ElementType extends HTMLElement = HTMLElement>({ dropTargetId, group, containerId, }: UseDroppableOptions): UseDroppableResult<ElementType>;

package/dist/hooks/use-droppable.js

@@ -0,0 +1,23 @@
+import { useCallback, useContext, useMemo, } from "react";
+import { createDomDroppable } from "@mk-drag-and-drop/dom/integration";
+import { DragContext } from "../drag-context.js";
+const defaultDroppableGroup = "default";
+export function useDroppable({ dropTargetId, group = defaultDroppableGroup, containerId = null, }) {
+    const context = useContext(DragContext);
+    if (!context) {
+        throw new Error("useDroppable must be used inside DragProvider");
+    }
+    const { runtime } = context;
+    const behavior = useMemo(() => createDomDroppable({
+        runtime,
+        dropTargetId,
+        group,
+        containerId,
+    }), [containerId, dropTargetId, group, runtime]);
+    const setNodeRef = useCallback((node) => {
+        behavior.setElement(node);
+    }, [behavior]);
+    return useMemo(() => ({
+        ref: setNodeRef,
+    }), [setNodeRef]);
+}

package/dist/hooks/use-remeasure-drop-targets.d.ts

@@ -0,0 +1,2 @@
+import type { RemeasureDropTargetsInput } from "@mk-drag-and-drop/dom";
+export declare function useRemeasureDropTargets(): (input?: RemeasureDropTargetsInput) => void;

package/dist/hooks/use-remeasure-drop-targets.js

@@ -0,0 +1,12 @@
+import { useCallback, useContext } from "react";
+import { DragContext } from "../drag-context.js";
+export function useRemeasureDropTargets() {
+    const context = useContext(DragContext);
+    if (!context) {
+        throw new Error("useRemeasureDropTargets must be used inside DragProvider");
+    }
+    const { runtime } = context;
+    return useCallback((input) => {
+        runtime.remeasureDropTargets(input);
+    }, [runtime]);
+}

package/dist/hooks/use-sortable.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type RefCallback } from "react";
+import { type SortableAxis, type SortablePlacementBoundary } from "@mk-drag-and-drop/dom/integration";
+export type UseSortableOptions = {
+    draggableId: string;
+    group?: string;
+    containerId?: string | null;
+    axis?: SortableAxis;
+    placementBoundary?: SortablePlacementBoundary;
+};
+export type UseSortableResult<ElementType extends HTMLElement = HTMLElement> = HTMLAttributes<ElementType> & {
+    ref: RefCallback<ElementType>;
+};
+export declare function useSortable<ElementType extends HTMLElement = HTMLElement>({ draggableId, group, containerId, axis, placementBoundary, }: UseSortableOptions): UseSortableResult<ElementType>;

package/dist/hooks/use-sortable.js

@@ -0,0 +1,49 @@
+import { useCallback, useContext, useMemo, useRef, } from "react";
+import { createDomSortable, } from "@mk-drag-and-drop/dom/integration";
+import { DragContext } from "../drag-context.js";
+const defaultSortableGroup = "default";
+export function useSortable({ draggableId, group = defaultSortableGroup, containerId = null, axis, placementBoundary, }) {
+    const context = useContext(DragContext);
+    const nodeRef = useRef(null);
+    if (!context) {
+        throw new Error("useSortable must be used inside DragProvider");
+    }
+    const { runtime, keyboardDragEnabled } = context;
+    const getElement = useCallback(() => nodeRef.current, []);
+    const behavior = useMemo(() => createDomSortable({
+        runtime,
+        draggableId,
+        group,
+        containerId,
+        axis,
+        placementBoundary,
+        getElement,
+        keyboardDragEnabled,
+    }), [
+        axis,
+        containerId,
+        getElement,
+        group,
+        draggableId,
+        keyboardDragEnabled,
+        placementBoundary,
+        runtime,
+    ]);
+    const setNodeRef = useCallback((node) => {
+        nodeRef.current = node;
+        behavior.setElement(node);
+    }, [behavior]);
+    return useMemo(() => {
+        const sortableProps = {
+            ref: setNodeRef,
+            onPointerDown: behavior.onPointerDown,
+        };
+        return behavior.tabIndex === undefined
+            ? sortableProps
+            : {
+                ...sortableProps,
+                tabIndex: behavior.tabIndex,
+                onKeyDown: behavior.onKeyDown,
+            };
+    }, [behavior, setNodeRef]);
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { DragProvider, type DragAnnouncements, type DragProviderProps, } from "./drag-provider.js";
+export type { DragOverlayInput } from "./drag-overlay.js";
+export { centerToCenter, getDistanceToRect, lockToXAxis, lockToYAxis, maxOverlayCenterDistanceToRect, maxPointerDistanceToRect, pointerToCenter, pointerToRectDistance, type DragEndResult, type DragEndEvent, type DragLifecycleCallbacks, type DragLifecycleHelpers, type DragModifier, type DragModifierInput, type DragModifierSetupInput, type DragModifierTransformInput, type DragPoint, type DragRect, type DragSource, type DragStartEvent, type DragUpdateEvent, type DropEvent, type DropTarget, type KeyboardCommand, type KeyboardConfiguration, type PointerConfiguration, type RemeasureDropTargetsInput, type SortableAxis, type SortableDropPlacement, type SortablePlacementBoundary, type TargetingAlgorithm, type TargetingAlgorithmInput, type TargetingConstraint, type TargetingConstraintInput, } from "@mk-drag-and-drop/dom";
+export { restrictToContainer, type ReactRestrictToContainerInput, } from "./modifiers/restrict-to-container.js";
+export type { DragOverlayPhase, DragState, } from "@mk-drag-and-drop/dom/integration";
+export { useDragHandle, type UseDragHandleResult, } from "./hooks/use-drag-handle.js";
+export { useDraggable, type UseDraggableOptions, type UseDraggableResult, } from "./hooks/use-draggable.js";
+export { useDropContainer, type UseDropContainerOptions, type UseDropContainerResult, } from "./hooks/use-drop-container.js";
+export { useDroppable, type UseDroppableOptions, type UseDroppableResult, } from "./hooks/use-droppable.js";
+export { useRemeasureDropTargets } from "./hooks/use-remeasure-drop-targets.js";
+export { useSortable, type UseSortableOptions, type UseSortableResult, } from "./hooks/use-sortable.js";
+export { composeRefs } from "./utils/compose-refs.js";

package/dist/index.js

@@ -0,0 +1,10 @@
+export { DragProvider, } from "./drag-provider.js";
+export { centerToCenter, getDistanceToRect, lockToXAxis, lockToYAxis, maxOverlayCenterDistanceToRect, maxPointerDistanceToRect, pointerToCenter, pointerToRectDistance, } from "@mk-drag-and-drop/dom";
+export { restrictToContainer, } from "./modifiers/restrict-to-container.js";
+export { useDragHandle, } from "./hooks/use-drag-handle.js";
+export { useDraggable, } from "./hooks/use-draggable.js";
+export { useDropContainer, } from "./hooks/use-drop-container.js";
+export { useDroppable, } from "./hooks/use-droppable.js";
+export { useRemeasureDropTargets } from "./hooks/use-remeasure-drop-targets.js";
+export { useSortable, } from "./hooks/use-sortable.js";
+export { composeRefs } from "./utils/compose-refs.js";