@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/drag-drop/drop-list.d.ts

@@ -0,0 +1,19 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import type { StyleObject } from "@rivetjs/runtime/style";
+import { type GlobalDOMAttributes } from "@rivetjs/cdk/dom-props";
+import type { DropListInputs } from "./directives/drop-list.js";
+/** Preload the drag-drop handlers when a list scrolls into view (first press runs synchronously). */
+export declare const preload = "visible";
+export interface DropListProps<T = any> extends DropListInputs<T>, GlobalDOMAttributes<HTMLElement> {
+    /** Element to render. @default "div" */
+    elementType?: "div" | "ul" | "ol" | "tbody" | "section";
+    /** Unique ID for the drop zone. Can be used as a reference in the `connectedTo` of another `DropList`. */
+    id?: string;
+    /** @default "rv-DropList" (always with Angular's `cdk-drop-list`) */
+    class?: string;
+    /** Inline style of the element. */
+    style?: StyleObject;
+    children?: Content;
+}
+/** Container that wraps a set of draggable items (Angular `cdkDropList`). */
+export declare function DropList<T = any>(props: DropListProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/drag-drop/drop-list.jsx

@@ -0,0 +1,87 @@
+// Ported from Angular Components (src/cdk/drag-drop/directives/drop-list.ts — host bindings), MIT, © Google LLC.
+// Rivet: `cdkDropList` as a component rendering its element (`elementType`, default `div`) with
+// `class="cdk-drop-list"` (+ `rv-DropList` when `class` is omitted), its `id` (default
+// `cdk-drop-list-<id>`), `data-rv-drop-list` and `data-orientation`. Its handlers create the
+// `DropListInstance` (directives/drop-list.ts) — when an item inside is pressed (`mousedown` /
+// `touchstart` reach it too, so a cold press loads both chunks) or when another list wakes it
+// (connected lists, groups). Inputs are props (`cdkDropListData` → `data`, …), outputs `on*`.
+import { effect, onCleanup, useContext } from "@rivetjs/reactivity";
+import { ref } from "@rivetjs/runtime/dom";
+import { createId } from "@rivetjs/cdk/id";
+import { globalDOMProps } from "@rivetjs/cdk/dom-props";
+import { DirectionalityContext } from "../bidi/index.js";
+import { DragDropConfigContext } from "./directives/config.js";
+import { read } from "./directives/registry.js";
+import { dropListDestroyed, dropListHostEvent } from "./lazy-refs.js";
+/** Global DOM events DropList handles itself; the user's handlers run after its own. */
+const OWNED = ["onMouseDown", "onTouchStart"];
+/** Preload the drag-drop handlers when a list scrolls into view (first press runs synchronously). */
+export const preload = "visible";
+/** Container that wraps a set of draggable items (Angular `cdkDropList`). */
+export function DropList(props) {
+    const config = useContext(DragDropConfigContext);
+    const dir = useContext(DirectionalityContext);
+    const inputs = {
+        connectedTo: props.connectedTo,
+        data: props.data,
+        orientation: props.orientation,
+        lockAxis: props.lockAxis,
+        disabled: props.disabled,
+        sortingDisabled: props.sortingDisabled,
+        enterPredicate: props.enterPredicate,
+        sortPredicate: props.sortPredicate,
+        autoScrollDisabled: props.autoScrollDisabled,
+        autoScrollStep: props.autoScrollStep,
+        elementContainerSelector: props.elementContainerSelector,
+        hasAnchor: props.hasAnchor,
+        onDropped: props.onDropped,
+        onEntered: props.onEntered,
+        onExited: props.onExited,
+        onSorted: props.onSorted,
+    };
+    const setup = { inputs, config, dir };
+    // Read every prop up front: an element with a spread resumes as one binding over all its
+    // attributes, and reading `props` there would capture the whole props object (children included).
+    const dom = globalDOMProps(props, OWNED);
+    const { onMouseDown, onTouchStart, elementType, style, children } = props;
+    const id = props.id ?? "cdk-drop-list-" + createId();
+    const disabled = props.disabled;
+    const orientation = props.orientation;
+    const className = "cdk-drop-list " + (props.class ?? "rv-DropList");
+    const isDisabled = () => !!(read(disabled) ?? config?.draggingDisabled);
+    const listOrientation = () => read(orientation) ?? config?.listOrientation ?? "vertical";
+    const host = (event) => dropListHostEvent(event, setup);
+    const mouseDown = (event) => {
+        dropListHostEvent(event, setup);
+        onMouseDown?.(event);
+    };
+    const touchStart = (event) => {
+        dropListHostEvent(event, setup);
+        onTouchStart?.(event);
+    };
+    // Client render only: on the server the ref stays empty.
+    const element = ref();
+    const node = elementType === "ul" ? (<ul {...dom} ref={element} id={id} class={className} class:cdk-drop-list-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-orientation={listOrientation()} data-rv-drop-list="" style={style} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </ul>) : elementType === "ol" ? (<ol {...dom} ref={element} id={id} class={className} class:cdk-drop-list-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-orientation={listOrientation()} data-rv-drop-list="" style={style} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </ol>) : elementType === "tbody" ? (<tbody {...dom} ref={element} id={id} class={className} class:cdk-drop-list-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-orientation={listOrientation()} data-rv-drop-list="" style={style} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </tbody>) : elementType === "section" ? (<section {...dom} ref={element} id={id} class={className} class:cdk-drop-list-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-orientation={listOrientation()} data-rv-drop-list="" style={style} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </section>) : (<div {...dom} ref={element} id={id} class={className} class:cdk-drop-list-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-orientation={listOrientation()} data-rv-drop-list="" style={style} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </div>);
+    // Client-rendered lists are destroyed with their element (`ngOnDestroy`).
+    // (`getOwner()` is set on the server too: the element ref is what tells a client render apart.)
+    // The ref is reset by its own cleanup: keep the element seen last.
+    let rendered;
+    effect(() => {
+        rendered = element() ?? rendered;
+    });
+    onCleanup(() => {
+        if (rendered)
+            dropListDestroyed(rendered);
+    });
+    return node;
+}

package/drag-drop/index.d.ts

@@ -0,0 +1 @@
+export * from "./cdk-index.jsx";

package/drag-drop/index.jsx

@@ -0,0 +1,4 @@
+// Rivet: `@rivetjs/cdk/drag-drop` — drag and drop. Today the Angular CDK engine (`./cdk-index.tsx`,
+// also `@rivetjs/cdk/drag-drop/cdk`); the React Aria engine (`@rivetjs/cdk/drag-drop/aria`) joins this
+// barrel in a later phase. Array helpers alone: `@rivetjs/cdk/drag-drop/utils` (server-safe).
+export * from "./cdk-index.jsx";

package/drag-drop/lazy-refs.d.ts

@@ -0,0 +1,28 @@
+import { DragInstance, type DragSetup } from "./directives/drag.js";
+import { DropListInstance, type DropListSetup } from "./directives/drop-list.js";
+/** Handler of a `<Drag>` element (`mousedown`, `touchstart`, `dragstart` + the wake event). */
+export declare function dragHostEvent<T>(event: Event, setup: DragSetup<T>): void;
+/** Handler of a `<DropList>` element (`mousedown`, `touchstart` and the wake event): creates its instance. */
+export declare function dropListHostEvent<T>(event: Event, setup: DropListSetup<T>): void;
+/**
+ * The `Drag` instance of a `<Drag>` element (Angular: the `CdkDrag` directive instance, e.g. from
+ * `@ViewChild(CdkDrag)`), created on first use. `null` while the element's code is still loading on
+ * a resumed page (it then registers on its own) or when `element` is not a `<Drag>`.
+ */
+export declare function dragInstance<T = any>(element: Element): DragInstance<T> | null;
+/** The `DropList` instance of a `<DropList>` element, created on first use (see `dragInstance`). */
+export declare function dropListInstance<T = any>(element: Element): DropListInstance<T> | null;
+/** Mounted (client-rendered) `<Drag>`: join a list that is being dragged over right away (Angular `addItem`). */
+export declare function dragMounted(element: HTMLElement): void;
+/** Removed client-rendered `<Drag>` (Angular `ngOnDestroy`). */
+export declare function dragDestroyed(element: HTMLElement): void;
+/** Removed client-rendered `<DropList>` (Angular `ngOnDestroy`). */
+export declare function dropListDestroyed(element: HTMLElement): void;
+/** Client-rendered `<Drag>` with `rootElementSelector`: a press inside its root creates the instance. */
+export declare function watchRoot(element: () => HTMLElement | undefined, selector: () => string | undefined): void;
+/** `toggleNativeDragInteractions` on a drag's handles for its disabled state (before its ref exists). */
+export declare function syncHandleInteractions(element: HTMLElement, dragDisabled: boolean): void;
+/** The `<Drag>` element a handle belongs to. */
+export declare function handleOwner(element: HTMLElement): HTMLElement | null;
+/** A client-rendered `<DragHandle>` appeared / went away / changed: re-sync its drag item's handles. */
+export declare function handleChanged(dragElement: HTMLElement | null): void;

package/drag-drop/lazy-refs.js

@@ -0,0 +1,144 @@
+// Rivet: the handlers of the drag-drop components (drag.tsx, drop-list.tsx) and the public instance
+// lookups. A component element's handler creates its directive instance (directives/*.ts) from the
+// props it captured — on a resumed page that happens on the first press (or the wake event, see
+// directives/registry.ts), on a client-rendered one too, so both paths are the same.
+//
+// Cold presses: the loader replays a `mousedown` / `touchstart` once the component chunks are in
+// (async). The replayed event is forwarded with its age: the ref counts the drag-start delay from the
+// original press and cancels the pending sequence when the press was released meanwhile
+// (`DragRef._pointerDownFromHost`). A replay is a press handled after its dispatch ended
+// (`eventPhase` NONE), however soon: preloaded / merged chunks replay it within a few ms, and its
+// `mouseup` / `touchend` (no resumed handler, so never held by the loader) reached no listener.
+// An item whose `<DropList>` chunk is still loading waits for the list to register before it
+// handles the press (so it never starts in standalone mode).
+import { DragInstance } from "./directives/drag.js";
+import { DropListInstance } from "./directives/drop-list.js";
+import { DRAG_ATTR, closestDropListElement, dragOf, dropListOf, drags, dropLists, isWake, wake, whenRegistered } from "./directives/registry.js";
+import { handleElements } from "./directives/drag-handle.js";
+import { toggleNativeDragInteractions } from "./dom/styling.js";
+/** A press handled this much later than it happened (ms) is treated as replayed even during its dispatch. */
+const REPLAYED_AFTER = 50;
+/** Handler of a `<Drag>` element (`mousedown`, `touchstart`, `dragstart` + the wake event). */
+export function dragHostEvent(event, setup) {
+    const element = event.currentTarget;
+    // The item's list must exist first: the item joins it while being created.
+    const list = closestDropListElement(element);
+    if (list && !dropLists.has(list)) {
+        wake(list);
+        if (!dropLists.has(list)) {
+            if (!isWake(event) && event.type !== "dragstart")
+                whenRegistered(list, () => dropLists.has(list), () => dragHostEvent(event, setup));
+            return;
+        }
+    }
+    const instance = drags.get(element);
+    if (instance)
+        instance._setInputs(setup);
+    const drag = instance ?? new DragInstance(element, setup);
+    // Dies with its element's `ref()` (a resumed row dropped, a client unmount): see `DragInstance._releaseWith`.
+    if (!drag._releaseWith(setup.element))
+        return;
+    // The wake event, or a native `dragstart`: the ref's own listener prevents it when needed, except
+    // for the `dragstart` that created the ref (its listener was added during the dispatch).
+    if (event.type === "dragstart") {
+        if (!instance && !isWake(event))
+            drag._dragRef._nativeDragStartFromHost(event);
+        return;
+    }
+    drag._beforePointerDown();
+    const age = performance.now() - event.timeStamp;
+    // Replayed: its dispatch is over (the loader's replay, `whenRegistered` above), or handled late. Age alone missed a
+    // replay faster than REPLAYED_AFTER: the press released before the code loaded then kept its sequence, and the next
+    // move started a drag of an element the replayed click may already have removed (KANBAN-BUILD 2026-10-19: ui-docs
+    // `showcase-kanban`, "Cannot read properties of null (reading 'insertBefore')" in `_startDragSequence`).
+    const replayed = event.eventPhase === Event.NONE || age > REPLAYED_AFTER;
+    drag._dragRef._pointerDownFromHost(event, replayed ? Math.max(age, Number.MIN_VALUE) : 0);
+}
+/** Handler of a `<DropList>` element (`mousedown`, `touchstart` and the wake event): creates its instance. */
+export function dropListHostEvent(event, setup) {
+    const element = event.currentTarget;
+    const instance = dropLists.get(element);
+    if (instance)
+        instance._setInputs(setup);
+    else
+        new DropListInstance(element, setup);
+}
+/**
+ * The `Drag` instance of a `<Drag>` element (Angular: the `CdkDrag` directive instance, e.g. from
+ * `@ViewChild(CdkDrag)`), created on first use. `null` while the element's code is still loading on
+ * a resumed page (it then registers on its own) or when `element` is not a `<Drag>`.
+ */
+export function dragInstance(element) {
+    return dragOf(element);
+}
+/** The `DropList` instance of a `<DropList>` element, created on first use (see `dragInstance`). */
+export function dropListInstance(element) {
+    return dropListOf(element);
+}
+/** Mounted (client-rendered) `<Drag>`: join a list that is being dragged over right away (Angular `addItem`). */
+export function dragMounted(element) {
+    const list = element.isConnected ? closestDropListElement(element) : null;
+    const instance = list ? dropLists.get(list) : undefined;
+    if (instance && (instance._dropListRef.isDragging() || instance._dropListRef.isReceiving()))
+        dragOf(element);
+}
+/** Removed client-rendered `<Drag>` (Angular `ngOnDestroy`). */
+export function dragDestroyed(element) {
+    drags.get(element)?.destroy();
+}
+/** Removed client-rendered `<DropList>` (Angular `ngOnDestroy`). */
+export function dropListDestroyed(element) {
+    dropLists.get(element)?.destroy();
+}
+/** Drag elements (refs: set once rendered) with an alternate root and no instance yet, per document. */
+const watchedRoots = new Map();
+let rootListener = false;
+/** Client-rendered `<Drag>` with `rootElementSelector`: a press inside its root creates the instance. */
+export function watchRoot(element, selector) {
+    watchedRoots.set(element, selector);
+    if (rootListener)
+        return;
+    rootListener = true;
+    // Capturing on the document runs before the press reaches the root, so the ref's root listener
+    // (added while the instance is created) still sees this very event.
+    const wakeRoots = (event) => {
+        const target = event.target;
+        watchedRoots.forEach((selectorOf, get) => {
+            const el = get();
+            if (!el)
+                return;
+            if (!el.isConnected || drags.has(el)) {
+                if (drags.has(el))
+                    watchedRoots.delete(get);
+                return;
+            }
+            const selector = selectorOf();
+            const root = selector ? el.closest(selector) : null;
+            if (!root || !target || !root.contains(target))
+                return;
+            // The ref listens on its root from creation on (`withRootElement`); handles are synced first,
+            // like the drag element's own handler does.
+            const instance = dragOf(el);
+            if (!instance)
+                return;
+            watchedRoots.delete(get);
+            instance._beforePointerDown();
+        });
+    };
+    document.addEventListener("mousedown", wakeRoots, true);
+    document.addEventListener("touchstart", wakeRoots, { capture: true, passive: true });
+}
+/** `toggleNativeDragInteractions` on a drag's handles for its disabled state (before its ref exists). */
+export function syncHandleInteractions(element, dragDisabled) {
+    for (const handle of handleElements(element, DRAG_ATTR))
+        toggleNativeDragInteractions(handle, dragDisabled || handle.hasAttribute("data-disabled"));
+}
+/** The `<Drag>` element a handle belongs to. */
+export function handleOwner(element) {
+    return element.closest("[data-rv-drag]");
+}
+/** A client-rendered `<DragHandle>` appeared / went away / changed: re-sync its drag item's handles. */
+export function handleChanged(dragElement) {
+    const instance = dragElement ? drags.get(dragElement) : undefined;
+    instance?._syncHandles();
+}

package/drag-drop/preview-ref.d.ts

@@ -0,0 +1,38 @@
+import type { Direction } from "../bidi/index.js";
+import { type DragTemplateFactory } from "./dom/root-node.js";
+/** Template that can be used to create a drag preview element. */
+export interface DragPreviewTemplate<T = any> {
+    matchSize?: boolean;
+    /** View factory, or a host element whose content is cloned (Angular: `TemplateRef`). */
+    template: DragTemplateFactory | HTMLElement | null;
+    context?: T;
+}
+export declare class PreviewRef {
+    /** Reference to the view of the preview element. */
+    private _previewEmbeddedView;
+    /** Reference to the preview element. */
+    private _preview;
+    get element(): HTMLElement;
+    private _document;
+    private _rootElement;
+    private _direction;
+    private _initialDomRect;
+    private _previewTemplate;
+    private _previewClass;
+    private _pickupPositionOnPage;
+    private _initialTransform;
+    private _zIndex;
+    constructor(_document: Document, _rootElement: HTMLElement, _direction: Direction, _initialDomRect: DOMRect, _previewTemplate: DragPreviewTemplate | null, _previewClass: string | string[] | null, _pickupPositionOnPage: {
+        x: number;
+        y: number;
+    }, _initialTransform: string | null, _zIndex: number);
+    /** `inheritFrom` (Rivet): the element whose inherited text styles the preview keeps (global previews). */
+    attach(parent: HTMLElement, inheritFrom?: Element | null): void;
+    destroy(): void;
+    setTransform(value: string): void;
+    getBoundingClientRect(): DOMRect;
+    addClass(className: string): void;
+    getTransitionDuration(): number;
+    addEventListener(name: string, handler: (event: any) => void): () => void;
+    private _createPreview;
+}

package/drag-drop/preview-ref.js

@@ -0,0 +1,132 @@
+import { extendStyles, getTransform, matchElementSize, toggleNativeDragInteractions } from "./dom/styling.js";
+import { deepCloneNode } from "./dom/clone-node.js";
+import { getRootNode, stampTemplate } from "./dom/root-node.js";
+import { getTransformTransitionDurationInMs } from "./dom/transition-duration.js";
+import { carryInheritedText } from "./dom/inherited-text.js";
+/** Inline styles to be set as `!important` while dragging. */
+const importantProperties = new Set([
+    // Needs to be important, because some `mat-table` sets `position: sticky !important`. See #22781.
+    "position",
+]);
+export class PreviewRef {
+    /** Reference to the view of the preview element. */
+    _previewEmbeddedView = null;
+    /** Reference to the preview element. */
+    _preview;
+    get element() {
+        return this._preview;
+    }
+    _document;
+    _rootElement;
+    _direction;
+    _initialDomRect;
+    _previewTemplate;
+    _previewClass;
+    _pickupPositionOnPage;
+    _initialTransform;
+    _zIndex;
+    constructor(_document, _rootElement, _direction, _initialDomRect, _previewTemplate, _previewClass, _pickupPositionOnPage, _initialTransform, _zIndex) {
+        this._document = _document;
+        this._rootElement = _rootElement;
+        this._direction = _direction;
+        this._initialDomRect = _initialDomRect;
+        this._previewTemplate = _previewTemplate;
+        this._previewClass = _previewClass;
+        this._pickupPositionOnPage = _pickupPositionOnPage;
+        this._initialTransform = _initialTransform;
+        this._zIndex = _zIndex;
+    }
+    /** `inheritFrom` (Rivet): the element whose inherited text styles the preview keeps (global previews). */
+    attach(parent, inheritFrom) {
+        this._preview = this._createPreview();
+        if (inheritFrom)
+            carryInheritedText(this._preview, inheritFrom);
+        parent.appendChild(this._preview);
+        // The null check is necessary for browsers that don't support the popover API.
+        // Note that we use a string access for compatibility with Closure.
+        if (supportsPopover(this._preview)) {
+            this._preview["showPopover"]();
+        }
+    }
+    destroy() {
+        this._preview.remove();
+        this._previewEmbeddedView?.destroy();
+        this._preview = this._previewEmbeddedView = null;
+    }
+    setTransform(value) {
+        this._preview.style.transform = value;
+    }
+    getBoundingClientRect() {
+        return this._preview.getBoundingClientRect();
+    }
+    addClass(className) {
+        this._preview.classList.add(className);
+    }
+    getTransitionDuration() {
+        return getTransformTransitionDurationInMs(this._preview);
+    }
+    addEventListener(name, handler) {
+        const preview = this._preview;
+        preview.addEventListener(name, handler);
+        return () => preview.removeEventListener(name, handler);
+    }
+    _createPreview() {
+        const previewConfig = this._previewTemplate;
+        const previewClass = this._previewClass;
+        const previewTemplate = previewConfig ? previewConfig.template : null;
+        let preview;
+        if (previewTemplate && previewConfig) {
+            // Measure the element before we've inserted the preview
+            // since the insertion could throw off the measurement.
+            const rootRect = previewConfig.matchSize ? this._initialDomRect : null;
+            const viewRef = stampTemplate(previewTemplate);
+            preview = getRootNode(viewRef, this._document);
+            this._previewEmbeddedView = viewRef;
+            if (previewConfig.matchSize) {
+                matchElementSize(preview, rootRect);
+            }
+            else {
+                preview.style.transform = getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
+            }
+        }
+        else {
+            preview = deepCloneNode(this._rootElement);
+            matchElementSize(preview, this._initialDomRect);
+            if (this._initialTransform) {
+                preview.style.transform = this._initialTransform;
+            }
+        }
+        extendStyles(preview.style, {
+            // It's important that we disable the pointer events on the preview, because
+            // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.
+            "pointer-events": "none",
+            // If the preview has a margin, it can throw off our positioning so we reset it. The reset
+            // value for `margin-right` needs to be `auto` when opened as a popover, because our
+            // positioning is always top/left based, but native popover seems to position itself
+            // to the top/right if `<html>` or `<body>` have `dir="rtl"` (see #29604). Setting it
+            // to `auto` pushed it to the top/left corner in RTL and is a noop in LTR.
+            margin: supportsPopover(preview) ? "0 auto 0 0" : "0",
+            position: "fixed",
+            top: "0",
+            left: "0",
+            "z-index": this._zIndex + "",
+        }, importantProperties);
+        toggleNativeDragInteractions(preview, false);
+        preview.classList.add("cdk-drag-preview");
+        preview.setAttribute("popover", "manual");
+        preview.setAttribute("dir", this._direction);
+        if (previewClass) {
+            if (Array.isArray(previewClass)) {
+                previewClass.forEach((className) => preview.classList.add(className));
+            }
+            else {
+                preview.classList.add(previewClass);
+            }
+        }
+        return preview;
+    }
+}
+/** Checks whether a specific element supports the popover API. */
+function supportsPopover(element) {
+    return "showPopover" in element;
+}

package/drag-drop/sorting/drop-list-sort-strategy.d.ts

@@ -0,0 +1,29 @@
+import type { DragRef } from '../drag-ref.js';
+/**
+ * Function that is used to determine whether an item can be sorted into a particular index.
+ * @docs-private
+ */
+export type SortPredicate<T> = (index: number, item: T) => boolean;
+/**
+ * Strategy used to sort and position items within a drop list.
+ * @docs-private
+ */
+export interface DropListSortStrategy {
+    start(items: readonly DragRef[]): void;
+    sort(item: DragRef, pointerX: number, pointerY: number, pointerDelta: {
+        x: number;
+        y: number;
+    }): {
+        previousIndex: number;
+        currentIndex: number;
+    } | null;
+    enter(item: DragRef, pointerX: number, pointerY: number, index?: number): void;
+    withItems(items: readonly DragRef[]): void;
+    withSortPredicate(predicate: SortPredicate<DragRef>): void;
+    withElementContainer(container: HTMLElement): void;
+    reset(): void;
+    getActiveItemsSnapshot(): readonly DragRef[];
+    getItemIndex(item: DragRef): number;
+    getItemAtIndex(index: number): DragRef | null;
+    updateOnScroll(topDifference: number, leftDifference: number): void;
+}

package/drag-drop/sorting/drop-list-sort-strategy.js

@@ -0,0 +1 @@
+export {};

package/drag-drop/sorting/mixed-sort-strategy.d.ts

@@ -0,0 +1,99 @@
+import type { DropListSortStrategy, SortPredicate } from './drop-list-sort-strategy.js';
+import type { DragDropRegistry } from '../drag-drop-registry.js';
+import type { DragRef } from '../drag-ref.js';
+/**
+ * Strategy that only supports sorting on a list that might wrap.
+ * Items are reordered by moving their DOM nodes around.
+ * @docs-private
+ */
+export declare class MixedSortStrategy implements DropListSortStrategy {
+    /** Root element container of the drop list. */
+    private _element;
+    /** Function used to determine if an item can be sorted into a specific index. */
+    private _sortPredicate;
+    /** Lazily-resolved root node containing the list. Use `_getRootNode` to read this. */
+    private _rootNode;
+    /**
+     * Draggable items that are currently active inside the container. Includes the items
+     * that were there at the start of the sequence, as well as any items that have been dragged
+     * in, but haven't been dropped yet.
+     */
+    private _activeItems;
+    /**
+     * Keeps track of the item that was last swapped with the dragged item, as well as what direction
+     * the pointer was moving in when the swap occurred and whether the user's pointer continued to
+     * overlap with the swapped item after the swapping occurred.
+     */
+    private _previousSwap;
+    /**
+     * Keeps track of the relationship between a node and its next sibling. This information
+     * is used to restore the DOM to the order it was in before dragging started.
+     */
+    private _relatedNodes;
+    private _document;
+    private _dragDropRegistry;
+    constructor(_document: Document, _dragDropRegistry: DragDropRegistry);
+    /**
+     * To be called when the drag sequence starts.
+     * @param items Items that are currently in the list.
+     */
+    start(items: readonly DragRef[]): void;
+    /**
+     * To be called when an item is being sorted.
+     * @param item Item to be sorted.
+     * @param pointerX Position of the item along the X axis.
+     * @param pointerY Position of the item along the Y axis.
+     * @param pointerDelta Direction in which the pointer is moving along each axis.
+     */
+    sort(item: DragRef, pointerX: number, pointerY: number, pointerDelta: {
+        x: number;
+        y: number;
+    }): {
+        previousIndex: number;
+        currentIndex: number;
+    } | null;
+    /**
+     * Called when an item is being moved into the container.
+     * @param item Item that was moved into the container.
+     * @param pointerX Position of the item along the X axis.
+     * @param pointerY Position of the item along the Y axis.
+     * @param index Index at which the item entered. If omitted, the container will try to figure it
+     *   out automatically.
+     */
+    enter(item: DragRef, pointerX: number, pointerY: number, index?: number): void;
+    /** Sets the items that are currently part of the list. */
+    withItems(items: readonly DragRef[]): void;
+    /** Assigns a sort predicate to the strategy. */
+    withSortPredicate(predicate: SortPredicate<DragRef>): void;
+    /** Resets the strategy to its initial state before dragging was started. */
+    reset(): void;
+    /**
+     * Gets a snapshot of items currently in the list.
+     * Can include items that we dragged in from another list.
+     */
+    getActiveItemsSnapshot(): readonly DragRef[];
+    /** Gets the index of a specific item. */
+    getItemIndex(item: DragRef): number;
+    /** Gets the item at a specific index. */
+    getItemAtIndex(index: number): DragRef | null;
+    /** Used to notify the strategy that the scroll position has changed. */
+    updateOnScroll(): void;
+    withElementContainer(container: HTMLElement): void;
+    /**
+     * Gets the index of an item in the drop container, based on the position of the user's pointer.
+     * @param item Item that is being sorted.
+     * @param pointerX Position of the user's pointer along the X axis.
+     * @param pointerY Position of the user's pointer along the Y axis.
+     * @param delta Direction in which the user is moving their pointer.
+     */
+    private _getItemIndexFromPointerPosition;
+    /** Lazily resolves the list's root node. */
+    private _getRootNode;
+    /**
+     * Finds the index of the item that's closest to the item being dragged.
+     * @param item Item being dragged.
+     * @param pointerX Position of the user's pointer along the X axis.
+     * @param pointerY Position of the user's pointer along the Y axis.
+     */
+    private _getClosestItemIndexToPointer;
+}