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

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

@@ -0,0 +1,25 @@
+/**
+ * Moves an item one index in an array to another.
+ * @param array Array in which to move the item.
+ * @param fromIndex Starting index of the item.
+ * @param toIndex Index to which the item should be moved.
+ */
+export declare function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void;
+/**
+ * Moves an item from one array to another.
+ * @param currentArray Array from which to transfer the item.
+ * @param targetArray Array into which to put the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ */
+export declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
+/**
+ * Copies an item from one array to another, leaving it in its
+ * original position in current array.
+ * @param currentArray Array from which to copy the item.
+ * @param targetArray Array into which is copy the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ *
+ */
+export declare function copyArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;

package/drag-drop/drag-utils.js

@@ -0,0 +1,53 @@
+// Ported from Angular Components (src/cdk/drag-drop/drag-utils.ts), MIT, © Google LLC.
+/**
+ * Moves an item one index in an array to another.
+ * @param array Array in which to move the item.
+ * @param fromIndex Starting index of the item.
+ * @param toIndex Index to which the item should be moved.
+ */
+export function moveItemInArray(array, fromIndex, toIndex) {
+    const from = clamp(fromIndex, array.length - 1);
+    const to = clamp(toIndex, array.length - 1);
+    if (from === to) {
+        return;
+    }
+    const target = array[from];
+    const delta = to < from ? -1 : 1;
+    for (let i = from; i !== to; i += delta) {
+        array[i] = array[i + delta];
+    }
+    array[to] = target;
+}
+/**
+ * Moves an item from one array to another.
+ * @param currentArray Array from which to transfer the item.
+ * @param targetArray Array into which to put the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ */
+export function transferArrayItem(currentArray, targetArray, currentIndex, targetIndex) {
+    const from = clamp(currentIndex, currentArray.length - 1);
+    const to = clamp(targetIndex, targetArray.length);
+    if (currentArray.length) {
+        targetArray.splice(to, 0, currentArray.splice(from, 1)[0]);
+    }
+}
+/**
+ * Copies an item from one array to another, leaving it in its
+ * original position in current array.
+ * @param currentArray Array from which to copy the item.
+ * @param targetArray Array into which is copy the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ *
+ */
+export function copyArrayItem(currentArray, targetArray, currentIndex, targetIndex) {
+    const to = clamp(targetIndex, targetArray.length);
+    if (currentArray.length) {
+        targetArray.splice(to, 0, currentArray[currentIndex]);
+    }
+}
+/** Clamps a number between zero and a maximum. */
+function clamp(value, max) {
+    return Math.max(0, Math.min(max, value));
+}

package/drag-drop/drag.d.ts

@@ -0,0 +1,23 @@
+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 { DragInputs } from "./directives/drag.js";
+/** Preload the drag-drop handlers when a draggable scrolls into view (first press runs synchronously). */
+export declare const preload = "visible";
+export interface DragProps<T = any> extends DragInputs<T>, GlobalDOMAttributes<HTMLElement> {
+    /** Element to render. @default "div" */
+    elementType?: "div" | "li" | "tr" | "span" | "section" | "article";
+    id?: string;
+    /** @default "rv-Drag" (always with Angular's `cdk-drag`) */
+    class?: string;
+    /** Inline style of the element (the engine adds its own drag styles on top). */
+    style?: StyleObject;
+    /**
+     * The drag element is also a handle when using an alternate root (`rootElementSelector`; Angular:
+     * `cdkDrag` + `cdkDragHandle` on one element).
+     */
+    isHandle?: boolean;
+    children?: Content;
+}
+/** Element that can be moved inside a `DropList` container, or freely (Angular `cdkDrag`). */
+export declare function Drag<T = any>(props: DragProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/drag-drop/drag.jsx

@@ -0,0 +1,126 @@
+// Ported from Angular Components (src/cdk/drag-drop/directives/drag.ts — host bindings), MIT, © Google LLC.
+// Rivet: `cdkDrag` as a component rendering its element (`elementType`, default `div`) with
+// `class="cdk-drag"` (+ `rv-Drag` when `class` is omitted), `data-rv-drag` and the handlers that create
+// the `DragInstance` (directives/drag.ts) on the first press — nothing runs before that, on resumed and
+// client-rendered pages alike. Inputs are props (`cdkDragData` → `data`, …; plain values or signals),
+// outputs `on*` callbacks (`cdkDragStarted` → `onStarted`, …). Server markup: `cdk-drag-disabled` /
+// `data-disabled` for an own `disabled`, the `freeDragPosition` transform. Upstream sets no
+// touch-action on the root at rest (only on handles and while dragging), so neither does this.
+import { effect, onCleanup, useContext } from "@rivetjs/reactivity";
+import { ref } from "@rivetjs/runtime/dom";
+import { globalDOMProps } from "@rivetjs/cdk/dom-props";
+import { DirectionalityContext } from "../bidi/index.js";
+import { getTransform } from "./dom/styling.js";
+import { DragDropConfigContext } from "./directives/config.js";
+import { read } from "./directives/registry.js";
+import { dragDestroyed, dragHostEvent, dragMounted, syncHandleInteractions, watchRoot } from "./lazy-refs.js";
+import { drags } from "./directives/registry.js";
+/**
+ * Global DOM props Drag handles itself: mouse/touch start (the user's handlers run after its own) and
+ * `style` (merged with the engine's `style:transform`; a spread `style` key would be written twice on
+ * the server and overwrite the transform in the browser).
+ */
+const OWNED = ["onMouseDown", "onTouchStart", "style"];
+/** Preload the drag-drop handlers when a draggable scrolls into view (first press runs synchronously). */
+export const preload = "visible";
+/** Element that can be moved inside a `DropList` container, or freely (Angular `cdkDrag`). */
+export function Drag(props) {
+    const config = useContext(DragDropConfigContext);
+    const dir = useContext(DirectionalityContext);
+    const inputs = {
+        data: props.data,
+        lockAxis: props.lockAxis,
+        rootElementSelector: props.rootElementSelector,
+        boundaryElement: props.boundaryElement,
+        dragStartDelay: props.dragStartDelay,
+        freeDragPosition: props.freeDragPosition,
+        disabled: props.disabled,
+        constrainPosition: props.constrainPosition,
+        previewClass: props.previewClass,
+        previewContainer: props.previewContainer,
+        scale: props.scale,
+        onStarted: props.onStarted,
+        onReleased: props.onReleased,
+        onEnded: props.onEnded,
+        onEntered: props.onEntered,
+        onExited: props.onExited,
+        onDropped: props.onDropped,
+        onMoved: props.onMoved,
+    };
+    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, id, elementType, style, children } = props;
+    const disabled = props.disabled;
+    const rootSelector = props.rootElementSelector;
+    const position = props.freeDragPosition;
+    const scale = props.scale;
+    const selfHandle = props.isHandle ? "" : undefined;
+    const className = "cdk-drag " + (props.class ?? "rv-Drag");
+    const isDisabled = () => !!(read(disabled) ?? config?.draggingDisabled);
+    const transform = () => {
+        const value = read(position);
+        if (!value)
+            return undefined;
+        const factor = 1 / (Number(read(scale) ?? 1) || 1);
+        return getTransform(value.x * factor, value.y * factor);
+    };
+    const host = (event) => dragHostEvent(event, setup);
+    const mouseDown = (event) => {
+        dragHostEvent(event, setup);
+        onMouseDown?.(event);
+    };
+    const touchStart = (event) => {
+        dragHostEvent(event, setup);
+        onTouchStart?.(event);
+    };
+    // Client render only: on the server the ref stays empty.
+    const element = ref();
+    const node = elementType === "li" ? (<li {...dom} ref={element} id={id} class={className} class:cdk-drag-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-rv-drag="" data-rv-drag-self-handle={selfHandle} data-rv-free-position={transform() ? "" : undefined} style={style} style:transform={transform()} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </li>) : elementType === "tr" ? (<tr {...dom} ref={element} id={id} class={className} class:cdk-drag-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-rv-drag="" data-rv-drag-self-handle={selfHandle} data-rv-free-position={transform() ? "" : undefined} style={style} style:transform={transform()} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </tr>) : elementType === "span" ? (<span {...dom} ref={element} id={id} class={className} class:cdk-drag-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-rv-drag="" data-rv-drag-self-handle={selfHandle} data-rv-free-position={transform() ? "" : undefined} style={style} style:transform={transform()} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </span>) : elementType === "section" ? (<section {...dom} ref={element} id={id} class={className} class:cdk-drag-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-rv-drag="" data-rv-drag-self-handle={selfHandle} data-rv-free-position={transform() ? "" : undefined} style={style} style:transform={transform()} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </section>) : elementType === "article" ? (<article {...dom} ref={element} id={id} class={className} class:cdk-drag-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-rv-drag="" data-rv-drag-self-handle={selfHandle} data-rv-free-position={transform() ? "" : undefined} style={style} style:transform={transform()} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </article>) : (<div {...dom} ref={element} id={id} class={className} class:cdk-drag-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-rv-drag="" data-rv-drag-self-handle={selfHandle} data-rv-free-position={transform() ? "" : undefined} style={style} style:transform={transform()} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
+        {children}
+      </div>);
+    // Client-rendered: join a list that is being dragged over (Angular `addItem` on construction) and
+    // destroy the instance with the element (`ngOnDestroy`). Server-rendered drags live with the page.
+    // (`getOwner()` is set on the server too: the element ref is what tells a client render apart.)
+    queueMicrotask(() => {
+        const el = element();
+        if (el)
+            dragMounted(el);
+    });
+    if (!("id" in element)) {
+        // Client render (the server `ref()` carries an `id`). Angular creates the DragRef with the
+        // directive, so an alternate root (`rootElementSelector`) starts a drag before the drag element
+        // was ever pressed: presses on a watched root create the instance first (lazy-refs.ts).
+        if (rootSelector !== undefined || config?.rootElementSelector !== undefined)
+            watchRoot(element, () => read(rootSelector) ?? config?.rootElementSelector);
+        // `DragRef.disabled` toggles the handles' native interactions (`toggleNativeDragInteractions`);
+        // until the ref exists the handles carry the enabled styles `<DragHandle>` rendered.
+        effect(() => {
+            const el = element();
+            const off = isDisabled();
+            if (el && !drags.has(el))
+                syncHandleInteractions(el, off);
+        });
+    }
+    // The ref is reset by its own cleanup: keep the element seen last.
+    let rendered;
+    effect(() => {
+        rendered = element() ?? rendered;
+    });
+    onCleanup(() => {
+        if (rendered)
+            dragDestroyed(rendered);
+    });
+    return node;
+}

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

@@ -0,0 +1,22 @@
+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 MaybeAccessor } from "./directives/registry.js";
+export interface DropListGroupProps extends GlobalDOMAttributes<HTMLElement> {
+    /** Whether starting a dragging sequence from inside this group is disabled. */
+    disabled?: MaybeAccessor<boolean | undefined>;
+    /** Element to render. @default "div" */
+    elementType?: "div" | "section";
+    id?: string;
+    /** @default "rv-DropListGroup" */
+    class?: string;
+    /** Inline style of the element. */
+    style?: StyleObject;
+    children?: Content;
+}
+/**
+ * Declaratively connects sibling `DropList` instances together. All of the `DropList`
+ * elements that are placed inside a `DropListGroup` will be connected to each other
+ * automatically. Can be used as an alternative to the `connectedTo` input of `DropList`.
+ */
+export declare function DropListGroup(props: DropListGroupProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/drag-drop/drop-list-group.jsx

@@ -0,0 +1,19 @@
+import { globalDOMProps } from "@rivetjs/cdk/dom-props";
+import { read } from "./directives/registry.js";
+/**
+ * Declaratively connects sibling `DropList` instances together. All of the `DropList`
+ * elements that are placed inside a `DropListGroup` will be connected to each other
+ * automatically. Can be used as an alternative to the `connectedTo` input of `DropList`.
+ */
+export function DropListGroup(props) {
+    const dom = globalDOMProps(props);
+    const { id, elementType, style, children } = props;
+    const disabled = props.disabled;
+    const className = props.class ?? "rv-DropListGroup";
+    const isDisabled = () => !!read(disabled);
+    return elementType === "section" ? (<section {...dom} id={id} class={className} data-rv-drop-list-group="" style={style} data-disabled={isDisabled() ? "true" : undefined}>
+      {children}
+    </section>) : (<div {...dom} id={id} class={className} data-rv-drop-list-group="" style={style} data-disabled={isDisabled() ? "true" : undefined}>
+      {children}
+    </div>);
+}

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

@@ -0,0 +1,295 @@
+import type { Direction } from "../bidi/index.js";
+import { type ElementLike } from "./dom/coerce.js";
+import { type ViewportRuler } from "../scrolling/viewport-ruler.js";
+import { Emitter } from "../scrolling/emitter.js";
+import { type DragDropRegistry } from "./drag-drop-registry.js";
+import type { DragRef, Point } from "./drag-ref.js";
+/** Orientation of a drop list (Angular: `directives/config.ts`). */
+export type DropListOrientation = "horizontal" | "vertical" | "mixed";
+/** Services a `DropListRef` needs (Angular: injected); defaults are the per-document instances. */
+export interface DropListRefDeps {
+    document?: Document;
+    viewportRuler?: ViewportRuler;
+    dragDropRegistry?: DragDropRegistry;
+}
+/**
+ * Creates a `DropListRef` for an element, turning it into a drop list.
+ * @param element Element to which to attach the drop list functionality.
+ * @param deps Optional services (Angular: the injector).
+ */
+export declare function createDropListRef<T = unknown>(element: ElementLike, deps?: DropListRefDeps): DropListRef<T>;
+/**
+ * Reference to a drop list. Used to manipulate or dispose of the container.
+ */
+export declare class DropListRef<T = any> {
+    /** Element that the drop list is attached to. */
+    element: ElementLike;
+    /** Whether starting a dragging sequence from this container is disabled. */
+    disabled: boolean;
+    /** Whether sorting items within the list is disabled. */
+    sortingDisabled: boolean;
+    /** Locks the position of the draggable elements inside the container along the specified axis. */
+    lockAxis: "x" | "y" | null;
+    /**
+     * Whether auto-scrolling the view when the user
+     * moves their pointer close to the edges is disabled.
+     */
+    autoScrollDisabled: boolean;
+    /** Number of pixels to scroll for each frame when auto-scrolling an element. */
+    autoScrollStep: number;
+    /**
+     * Whether the items in the list should leave an anchor node when leaving the initial container.
+     */
+    hasAnchor: boolean;
+    /**
+     * Function that is used to determine whether an item
+     * is allowed to be moved into a drop container.
+     */
+    enterPredicate: (drag: DragRef, drop: DropListRef) => boolean;
+    /** Function that is used to determine whether an item can be sorted into a particular index. */
+    sortPredicate: (index: number, drag: DragRef, drop: DropListRef) => boolean;
+    /** Emits right before dragging has started. */
+    readonly beforeStarted: Emitter<void>;
+    /**
+     * Emits when the user has moved a new drag item into this container.
+     */
+    readonly entered: Emitter<{
+        item: DragRef;
+        container: DropListRef;
+        currentIndex: number;
+    }>;
+    /**
+     * Emits when the user removes an item from the container
+     * by dragging it into another container.
+     */
+    readonly exited: Emitter<{
+        item: DragRef;
+        container: DropListRef;
+    }>;
+    /** Emits when the user drops an item inside the container. */
+    readonly dropped: Emitter<{
+        item: DragRef;
+        currentIndex: number;
+        previousIndex: number;
+        container: DropListRef;
+        previousContainer: DropListRef;
+        isPointerOverContainer: boolean;
+        distance: Point;
+        dropPoint: Point;
+        event: MouseEvent | TouchEvent;
+    }>;
+    /** Emits as the user is swapping items while actively dragging. */
+    readonly sorted: Emitter<{
+        previousIndex: number;
+        currentIndex: number;
+        container: DropListRef;
+        item: DragRef;
+    }>;
+    /** Emits when a dragging sequence is started in a list connected to the current one. */
+    readonly receivingStarted: Emitter<{
+        receiver: DropListRef;
+        initiator: DropListRef;
+        items: DragRef[];
+    }>;
+    /** Emits when a dragging sequence is stopped from a list connected to the current one. */
+    readonly receivingStopped: Emitter<{
+        receiver: DropListRef;
+        initiator: DropListRef;
+    }>;
+    /** Arbitrary data that can be attached to the drop list. */
+    data: T;
+    /** Element that is the direct parent of the drag items. */
+    private _container;
+    /** Whether an item in the list is being dragged. */
+    private _isDragging;
+    /** Keeps track of the positions of any parent scrollable elements. */
+    private _parentPositions;
+    /** Strategy being used to sort items within the list. */
+    private _sortStrategy;
+    /** Cached `DOMRect` of the drop list. */
+    private _domRect;
+    /** Draggable items in the container. */
+    private _draggables;
+    /** Drop lists that are connected to the current one. */
+    private _siblings;
+    /** Connected siblings that currently have a dragged item. */
+    private _activeSiblings;
+    /** Subscription to the window being scrolled. */
+    private _viewportScrollSubscription;
+    /** Vertical direction in which the list is currently scrolling. */
+    private _verticalScrollDirection;
+    /** Horizontal direction in which the list is currently scrolling. */
+    private _horizontalScrollDirection;
+    /** Node that is being auto-scrolled. */
+    private _scrollNode;
+    /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
+    private _cachedShadowRoot;
+    /** Reference to the document. */
+    private _document;
+    /** Elements that can be scrolled while the user is dragging. */
+    private _scrollableElements;
+    /** Initial value for the element's `scroll-snap-type` style. */
+    private _initialScrollSnap;
+    /** Direction of the list's layout. */
+    private _direction;
+    /** Pending auto-scroll animation frame. */
+    private _scrollFrame;
+    private _dragDropRegistry;
+    private _viewportRuler;
+    constructor(element: ElementLike, _dragDropRegistry: DragDropRegistry, _document: Document, _viewportRuler: ViewportRuler);
+    /** Removes the drop list functionality from the DOM element. */
+    dispose(): void;
+    /** Whether an item from this list is currently being dragged. */
+    isDragging(): boolean;
+    /** Starts dragging an item. */
+    start(): void;
+    /**
+     * Attempts to move an item 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;
+    /**
+     * Removes an item from the container after it was dragged into another container by the user.
+     * @param item Item that was dragged out.
+     */
+    exit(item: DragRef): void;
+    /**
+     * Drops an item into this container.
+     * @param item Item being dropped into the container.
+     * @param currentIndex Index at which the item should be inserted.
+     * @param previousIndex Index of the item when dragging started.
+     * @param previousContainer Container from which the item got dragged in.
+     * @param isPointerOverContainer Whether the user's pointer was over the
+     *    container when the item was dropped.
+     * @param distance Distance the user has dragged since the start of the dragging sequence.
+     * @param event Event that triggered the dropping sequence.
+     */
+    drop(item: DragRef, currentIndex: number, previousIndex: number, previousContainer: DropListRef, isPointerOverContainer: boolean, distance: Point, dropPoint: Point, event: MouseEvent | TouchEvent): void;
+    /**
+     * Sets the draggable items that are a part of this list.
+     * @param items Items that are a part of this list.
+     */
+    withItems(items: DragRef[]): this;
+    /** Sets the layout direction of the drop list. */
+    withDirection(direction: Direction): this;
+    /**
+     * Sets the containers that are connected to this one. When two or more containers are
+     * connected, the user will be allowed to transfer items between them.
+     * @param connectedTo Other containers that the current containers should be connected to.
+     */
+    connectedTo(connectedTo: DropListRef[]): this;
+    /**
+     * Sets the orientation of the container.
+     * @param orientation New orientation for the container.
+     */
+    withOrientation(orientation: DropListOrientation): this;
+    /**
+     * Sets which parent elements are can be scrolled while the user is dragging.
+     * @param elements Elements that can be scrolled.
+     */
+    withScrollableParents(elements: HTMLElement[]): this;
+    /**
+     * Configures the drop list so that a different element is used as the container for the
+     * dragged items. This is useful for the cases when one might not have control over the
+     * full DOM that sets up the dragging.
+     * Note that the alternate container needs to be a descendant of the drop list.
+     * @param container New element container to be assigned.
+     */
+    withElementContainer(container: HTMLElement): this;
+    /** Gets the scrollable parents that are registered with this drop container. */
+    getScrollableParents(): readonly HTMLElement[];
+    /**
+     * Figures out the index of an item in the container.
+     * @param item Item whose index should be determined.
+     */
+    getItemIndex(item: DragRef): number;
+    /**
+     * Gets the item at a specific index.
+     * @param index Index at which to retrieve the item.
+     */
+    getItemAtIndex(index: number): DragRef | null;
+    /**
+     * Whether the list is able to receive the item that
+     * is currently being dragged inside a connected drop list.
+     */
+    isReceiving(): boolean;
+    /**
+     * Sorts an item inside the container based on its position.
+     * @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.
+     */
+    _sortItem(item: DragRef, pointerX: number, pointerY: number, pointerDelta: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     * Checks whether the user's pointer is close to the edges of either the
+     * viewport or the drop list and starts the auto-scroll sequence.
+     * @param pointerX User's pointer position along the x axis.
+     * @param pointerY User's pointer position along the y axis.
+     */
+    _startScrollingIfNecessary(pointerX: number, pointerY: number): void;
+    /** Stops any currently-running auto-scroll sequences. */
+    _stopScrolling(): void;
+    /** Starts the dragging sequence within the list. */
+    private _draggingStarted;
+    /** Caches the positions of the configured scrollable parents. */
+    private _cacheParentPositions;
+    /** Resets the container to its initial state. */
+    private _reset;
+    /** Starts the interval that'll auto-scroll the element. */
+    private _startScrollInterval;
+    /**
+     * Checks whether the user's pointer is positioned over the container.
+     * @param x Pointer position along the X axis.
+     * @param y Pointer position along the Y axis.
+     */
+    _isOverContainer(x: number, y: number): boolean;
+    /**
+     * Figures out whether an item should be moved into a sibling
+     * drop container, based on its current position.
+     * @param item Drag item that is being moved.
+     * @param x Position of the item along the X axis.
+     * @param y Position of the item along the Y axis.
+     */
+    _getSiblingContainerFromPosition(item: DragRef, x: number, y: number): DropListRef | undefined;
+    /**
+     * Checks whether the drop list can receive the passed-in item.
+     * @param item Item that is being dragged into the list.
+     * @param x Position of the item along the X axis.
+     * @param y Position of the item along the Y axis.
+     */
+    _canReceive(item: DragRef, x: number, y: number): boolean;
+    /**
+     * Called by one of the connected drop lists when a dragging sequence has started.
+     * @param sibling Sibling in which dragging has started.
+     */
+    _startReceiving(sibling: DropListRef, items: DragRef[]): void;
+    /**
+     * Called by a connected drop list when dragging has stopped.
+     * @param sibling Sibling whose dragging has stopped.
+     */
+    _stopReceiving(sibling: DropListRef): void;
+    /**
+     * Starts listening to scroll events on the viewport.
+     * Used for updating the internal state of the list.
+     */
+    private _listenToScrollEvents;
+    /**
+     * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
+     * than saving it in property directly on init, because we want to resolve it as late as possible
+     * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
+     * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
+     */
+    private _getShadowRoot;
+    /** Rivet: the elements of the items that are not being dragged (the ones a layout shift moves). */
+    private _shiftElements;
+    /** Notifies any siblings that may potentially receive the item. */
+    private _notifyReceivingSiblings;
+}