@cloudscape-design/board-components 3.0.110 → 3.0.112

package/internal/global-drag-state-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/global-drag-state-styles/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAmB,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEpF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,SAAS,WAAW,CAAC,KAAY;IAC/B,MAAM,IAAI,KAAK,CAAC,oBAAoB,GAAG,KAAK,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAmB;IAC5D,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ,CAAC;QACd,KAAK,SAAS;YACZ,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;YACxD,MAAM;QACR,KAAK,QAAQ;YACX,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CAAC;YAC1D,MAAM;QACR;YACE,oEAAoE;YACpE,WAAW,CAAC,SAAS,CAAC,CAAC;KAC1B;IAED,IAAI,eAAe,KAAK,SAAS,EAAE;QACjC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;KAC1D;AACH,CAAC;AAED,SAAS,QAAQ;IACf,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;AACxH,CAAC;AAED,MAAM,UAAU,wBAAwB;IACtC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACpC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC1C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DragAndDropData, useDragSubscription } from \"../dnd-controller/controller\";\n\nimport styles from \"./styles.css.js\";\n\nfunction assertNever(value: never) {\n  throw new Error(\"Unexpected value: \" + value);\n}\n\nfunction setup({ operation, interactionType }: DragAndDropData) {\n  switch (operation) {\n    case \"insert\":\n    case \"reorder\":\n      document.body.classList.add(styles[\"show-grab-cursor\"]);\n      break;\n    case \"resize\":\n      document.body.classList.add(styles[\"show-resize-cursor\"]);\n      break;\n    default:\n      // there will be a type error if not all operation types are handled\n      assertNever(operation);\n  }\n\n  if (interactionType === \"pointer\") {\n    document.body.classList.add(styles[\"disable-selection\"]);\n  }\n}\n\nfunction teardown() {\n  document.body.classList.remove(styles[\"show-grab-cursor\"], styles[\"show-resize-cursor\"], styles[\"disable-selection\"]);\n}\n\nexport function useGlobalDragStateStyles() {\n  useDragSubscription(\"start\", setup);\n  useDragSubscription(\"discard\", teardown);\n  useDragSubscription(\"submit\", teardown);\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/global-drag-state-styles/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAmB,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEpF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,SAAS,WAAW,CAAC,KAAY;IAC/B,MAAM,IAAI,KAAK,CAAC,oBAAoB,GAAG,KAAK,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAmB;IAC5D,MAAM,oBAAoB,GAAG,eAAe,KAAK,SAAS,CAAC;IAC3D,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ,CAAC;QACd,KAAK,SAAS;YACZ,IAAI,oBAAoB,EAAE;gBACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;aACzD;YACD,MAAM;QACR,KAAK,QAAQ;YACX,IAAI,oBAAoB,EAAE;gBACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CAAC;aAC3D;YACD,MAAM;QACR;YACE,oEAAoE;YACpE,WAAW,CAAC,SAAS,CAAC,CAAC;KAC1B;IAED,IAAI,oBAAoB,EAAE;QACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;KAC1D;AACH,CAAC;AAED,SAAS,QAAQ;IACf,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;AACxH,CAAC;AAED,MAAM,UAAU,wBAAwB;IACtC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACpC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC1C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DragAndDropData, useDragSubscription } from \"../dnd-controller/controller\";\n\nimport styles from \"./styles.css.js\";\n\nfunction assertNever(value: never) {\n  throw new Error(\"Unexpected value: \" + value);\n}\n\nfunction setup({ operation, interactionType }: DragAndDropData) {\n  const isPointerInteraction = interactionType === \"pointer\";\n  switch (operation) {\n    case \"insert\":\n    case \"reorder\":\n      if (isPointerInteraction) {\n        document.body.classList.add(styles[\"show-grab-cursor\"]);\n      }\n      break;\n    case \"resize\":\n      if (isPointerInteraction) {\n        document.body.classList.add(styles[\"show-resize-cursor\"]);\n      }\n      break;\n    default:\n      // there will be a type error if not all operation types are handled\n      assertNever(operation);\n  }\n\n  if (isPointerInteraction) {\n    document.body.classList.add(styles[\"disable-selection\"]);\n  }\n}\n\nfunction teardown() {\n  document.body.classList.remove(styles[\"show-grab-cursor\"], styles[\"show-resize-cursor\"], styles[\"disable-selection\"]);\n}\n\nexport function useGlobalDragStateStyles() {\n  useDragSubscription(\"start\", setup);\n  useDragSubscription(\"discard\", teardown);\n  useDragSubscription(\"submit\", teardown);\n}\n"]}

package/internal/item-container/index.d.ts

@@ -1,23 +1,84 @@
 import { KeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
-import { DropTargetContext } from "../dnd-controller/controller";
-import { BoardItemDefinitionBase, Direction, Transform } from "../interfaces";
+import { DropTargetContext, InteractionType, Operation } from "../dnd-controller/controller";
+import { BoardItemDefinitionBase, Direction, ItemId, Transform } from "../interfaces";
 export interface ItemContainerRef {
     focusDragHandle(): void;
 }
+export type HandleActiveState = null | "pointer" | "uap";
 interface ItemContextType {
+    /**
+     * Flag indicating if a drag or resize interaction is currently active.
+     */
     isActive: boolean;
+    /**
+     * Flag indicating if the item is currently hidden.
+     * (When a board item is moved from the palette to the board and the transition is not submitted)
+     */
+    isHidden: boolean;
     dragHandle: {
-        ref: RefObject<HTMLButtonElement>;
+        /**
+         * Ref to the drag button. Used to focus the drag handle when moving an item
+         * from the palette to the board via keyboard or UAP actions.
+         */
+        ref: RefObject<HTMLDivElement>;
+        /**
+         * Listen to pointerDown events on the drag handle.
+         * Used to start a transition and attach global event handlers.
+         */
         onPointerDown(event: ReactPointerEvent): void;
+        /**
+         * Listen to keyDown events on the drag handle.
+         */
         onKeyDown(event: KeyboardEvent): void;
-        isActive: boolean;
+        /**
+         * Indicating if drag handle is active.
+         */
+        activeState: HandleActiveState;
+        /**
+         * Listen to UAP direction button clicks.
+         */
+        onDirectionClick(direction: KeyboardEvent["key"], operation: HandleOperation): void;
+        /**
+         * Flag indicating if the UAP buttons should be shown. E.g. when a item is moved from
+         * the palette via keyboard or UAP to the board.
+         */
+        initialShowButtons?: boolean;
     };
     resizeHandle: null | {
+        /**
+         * Listen to pointerDown events on the drag handle.
+         * Used to start a transition and attach global event handlers.
+         */
         onPointerDown(event: ReactPointerEvent): void;
+        /**
+         * Listen to keyDown events on the drag handle.
+         */
         onKeyDown(event: KeyboardEvent): void;
-        isActive: boolean;
+        /**
+         * Indicating if resize handle is active.
+         */
+        activeState: HandleActiveState;
+        /**
+         * Listen to UAP direction button clicks.
+         */
+        onDirectionClick(direction: KeyboardEvent["key"], operation: HandleOperation): void;
     };
 }
+export interface Transition {
+    itemId: ItemId;
+    operation: Operation;
+    interactionType: InteractionType;
+    sizeTransform: null | {
+        width: number;
+        height: number;
+    };
+    positionTransform: null | {
+        x: number;
+        y: number;
+    };
+    hasDropTarget?: boolean;
+}
+export type HandleOperation = "drag" | "resize";
 export declare const ItemContext: import("react").Context<ItemContextType | null>;
 export declare function useItemContext(): ItemContextType;
 /**
@@ -50,4 +111,5 @@ export interface ItemContainerProps {
     isRtl: () => boolean;
 }
 export declare const ItemContainer: import("react").ForwardRefExoticComponent<ItemContainerProps & import("react").RefAttributes<ItemContainerRef>>;
+export declare const CLICK_DRAG_THRESHOLD = 3;
 export {};

package/internal/item-container/index.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { createContext, forwardRef, useContext, useImperativeHandle, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import { CSS as CSSUtil } from "@dnd-kit/utilities";
 import clsx from "clsx";
-import { getLogicalBoundingClientRect, getLogicalClientX } from "@cloudscape-design/component-toolkit/internal";
+import { getLogicalBoundingClientRect } from "@cloudscape-design/component-toolkit/internal";
+import { useInternalDragHandleInteractionState, } from "@cloudscape-design/components/internal/do-not-use/drag-handle";
 import { useDraggable, useDragSubscription, } from "../dnd-controller/controller";
 import { Coordinates } from "../utils/coordinates";
 import { getNormalizedElementRect } from "../utils/screen";
 import { throttle } from "../utils/throttle";
 import { getCollisionRect } from "./get-collision-rect";
 import { getNextDroppable } from "./get-next-droppable";
+import { calculateInitialPointerData, determineHandleActiveState, getDndOperationType, hasPointerMovedBeyondThreshold, } from "./utils";
 import styles from "./styles.css.js";
 export const ItemContext = createContext(null);
 export function useItemContext() {
@@ -22,8 +24,13 @@ export function useItemContext() {
     return ctx;
 }
 export const ItemContainer = forwardRef(ItemContainerComponent);
+// The amount of distance after pointer down that the cursor is allowed to
+// jitter for a subsequent mouseup to still register as a "press" instead of
+// a drag. A little allowance is needed for usability reasons, but this number
+// isn't set in stone.
+export const CLICK_DRAG_THRESHOLD = 3;
 function ItemContainerComponent({ item, placed, acquired, inTransition, transform, getItemSize, onKeyMove, children, isRtl }, ref) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const originalSizeRef = useRef({ width: 0, height: 0 });
     const pointerOffsetRef = useRef(new Coordinates({ x: 0, y: 0 }));
     const pointerBoundariesRef = useRef(null);
@@ -31,6 +38,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     const [isHidden, setIsHidden] = useState(false);
     const muteEventsRef = useRef(false);
     const itemRef = useRef(null);
+    const initialPointerDownPosition = useRef();
     const draggableApi = useDraggable({
         draggableItem: item,
         getCollisionRect: (operation, coordinates, dropTarget) => {
@@ -78,70 +86,30 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         setIsHidden(false);
         muteEventsRef.current = false;
     });
-    // During the transition listen to pointer move and pointer up events to update/submit transition.
-    const transitionInteractionType = (_a = transition === null || transition === void 0 ? void 0 : transition.interactionType) !== null && _a !== void 0 ? _a : null;
-    const transitionItemId = (_b = transition === null || transition === void 0 ? void 0 : transition.itemId) !== null && _b !== void 0 ? _b : null;
-    useEffect(() => {
-        const onPointerMove = throttle((event) => {
-            var _a, _b, _c, _d;
-            const coordinates = Coordinates.fromEvent(event, { isRtl: isRtl() });
-            draggableApi.updateTransition(new Coordinates({
-                x: Math.max(coordinates.x, (_b = (_a = pointerBoundariesRef.current) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : Number.NEGATIVE_INFINITY),
-                y: Math.max(coordinates.y, (_d = (_c = pointerBoundariesRef.current) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : Number.NEGATIVE_INFINITY),
-            }));
-        }, 10);
-        const onPointerUp = () => {
-            onPointerMove.cancel();
-            draggableApi.submitTransition();
-        };
-        if (transitionInteractionType === "pointer" && transitionItemId === item.id) {
-            window.addEventListener("pointermove", onPointerMove);
-            window.addEventListener("pointerup", onPointerUp);
-        }
-        return () => {
-            window.removeEventListener("pointermove", onPointerMove);
-            window.removeEventListener("pointerup", onPointerUp);
-        };
-        // draggableApi is not expected to change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [item.id, transitionInteractionType, transitionItemId]);
-    useEffect(() => {
-        if (transitionInteractionType === "keyboard" && transitionItemId === item.id) {
-            const onPointerDown = () => draggableApi.submitTransition();
-            window.addEventListener("pointerdown", onPointerDown, true);
-            return () => {
-                window.removeEventListener("pointerdown", onPointerDown, true);
-            };
-        }
-        // draggableApi is not expected to change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [item.id, transitionInteractionType, transitionItemId]);
-    function onKeyboardTransitionToggle(operation) {
+    // Handles incremental transition logic shared between different keyboard and UAP interactions.
+    function handleIncrementalTransition(operation, submitExisting = false) {
         // The acquired item is a copy and does not have the transition state.
         // However, pressing "Space" or "Enter" on the acquired item must submit the active transition.
         if (acquired) {
             return draggableApi.submitTransition();
         }
-        // Create new transition if missing.
-        if (!transition) {
-            const rect = getNormalizedElementRect(itemRef.current);
-            const coordinates = new Coordinates({
-                x: operation === "drag" ? rect.left : rect.right,
-                y: operation === "drag" ? rect.top : rect.bottom,
-            });
-            if (operation === "drag" && !placed) {
-                draggableApi.start("insert", "keyboard", coordinates);
-            }
-            else if (operation === "drag") {
-                draggableApi.start("reorder", "keyboard", coordinates);
-            }
-            else {
-                draggableApi.start("resize", "keyboard", coordinates);
-            }
+        // Submit existing transition if requested and one exists
+        if (submitExisting && transition) {
+            return draggableApi.submitTransition();
+        }
+        const rect = getNormalizedElementRect(itemRef.current);
+        const coordinates = new Coordinates({
+            x: operation === "drag" ? rect.left : rect.right,
+            y: operation === "drag" ? rect.top : rect.bottom,
+        });
+        if (operation === "drag" && !placed) {
+            draggableApi.start("insert", "keyboard", coordinates);
+        }
+        else if (operation === "drag") {
+            draggableApi.start("reorder", "keyboard", coordinates);
         }
-        // Submit a transition if existing.
         else {
-            draggableApi.submitTransition();
+            draggableApi.start("resize", "keyboard", coordinates);
         }
     }
     function handleInsert(direction) {
@@ -165,18 +133,17 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         setIsHidden(true);
         muteEventsRef.current = true;
     }
-    function onHandleKeyDown(operation, event) {
+    function handleDirectionalMovement(direction, operation) {
         const canInsert = transition && operation === "drag" && !placed;
         const canNavigate = transition || operation === "drag";
-        // The insert is handled by the item and the navigation is delegated to the containing layout.
-        const move = (direction) => {
-            if (canInsert) {
-                handleInsert(direction);
-            }
-            else if (canNavigate) {
-                onKeyMove === null || onKeyMove === void 0 ? void 0 : onKeyMove(direction);
-            }
-        };
+        if (canInsert) {
+            handleInsert(direction);
+        }
+        else if (canNavigate) {
+            onKeyMove === null || onKeyMove === void 0 ? void 0 : onKeyMove(direction);
+        }
+    }
+    function onHandleKeyDown(operation, event) {
         const discard = () => {
             if (transition || acquired) {
                 draggableApi.discardTransition();
@@ -184,16 +151,16 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         };
         switch (event.key) {
             case "ArrowUp":
-                return move("up");
+                return handleDirectionalMovement("up", operation);
             case "ArrowDown":
-                return move("down");
+                return handleDirectionalMovement("down", operation);
             case "ArrowLeft":
-                return move("left");
+                return handleDirectionalMovement("left", operation);
             case "ArrowRight":
-                return move("right");
+                return handleDirectionalMovement("right", operation);
             case " ":
             case "Enter":
-                return onKeyboardTransitionToggle(operation);
+                return handleIncrementalTransition(operation, true);
             case "Escape":
                 return discard();
         }
@@ -202,45 +169,72 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         // When drag- or resize handle on palette or board item loses focus the transition must be submitted with two exceptions:
         // 1. If the last interaction is not "keyboard" (the user clicked on another handle issuing a new transition);
         // 2. If the item is acquired by the board (in that case the focus moves to the board item which is expected, palette item is hidden and all events handlers must be muted).
-        if (transition && transition.interactionType === "keyboard" && !muteEventsRef.current) {
+        selectedHook.current.processBlur();
+        initialPointerDownPosition.current = undefined;
+        if (acquired || (transition && transition.interactionType === "keyboard" && !muteEventsRef.current)) {
             draggableApi.submitTransition();
         }
     }
-    function onDragHandlePointerDown(event) {
-        // Calculate the offset between item's top-left corner and the pointer landing position.
-        const rect = getLogicalBoundingClientRect(itemRef.current);
-        const clientX = getLogicalClientX(event, isRtl());
-        const clientY = event.clientY;
-        pointerOffsetRef.current = new Coordinates({
-            x: clientX - rect.insetInlineStart,
-            y: clientY - rect.insetBlockStart,
-        });
-        originalSizeRef.current = { width: rect.inlineSize, height: rect.blockSize };
-        pointerBoundariesRef.current = null;
-        draggableApi.start(!placed ? "insert" : "reorder", "pointer", Coordinates.fromEvent(event, { isRtl: isRtl() }));
+    function handleGlobalPointerMove(event) {
+        if (hasPointerMovedBeyondThreshold(event, initialPointerDownPosition.current)) {
+            selectedHook.current.processPointerMove(event);
+        }
     }
-    function onDragHandleKeyDown(event) {
-        onHandleKeyDown("drag", event);
+    function handleGlobalPointerUp(event) {
+        selectedHook.current.processPointerUp(event);
+        initialPointerDownPosition.current = undefined;
+        // Clean up global listeners after interaction ends
+        window.removeEventListener("pointermove", handleGlobalPointerMove);
+        window.removeEventListener("pointerup", handleGlobalPointerUp);
+    }
+    function onDragHandlePointerDown(event, operation) {
+        // Prevent UI issues when right-clicking: in such a case the OS context menu will be shown and
+        // the board while the board-item is active. Because of the context menu under the pointer,
+        // onPointerUp is not called anymore. In such a case the board item would stuck in onPointerUp.
+        if (event.button !== 0) {
+            return;
+        }
+        initialPointerDownPosition.current = { x: event.clientX, y: event.clientY };
+        if (operation === "drag") {
+            selectedHook.current = dragInteractionHook;
+        }
+        else {
+            selectedHook.current = resizeInteractionHook;
+        }
+        selectedHook.current.processPointerDown(event.nativeEvent);
+        // If pointerdown is on our button, start listening for global move and up
+        window.addEventListener("pointermove", handleGlobalPointerMove);
+        window.addEventListener("pointerup", handleGlobalPointerUp);
     }
-    function onResizeHandlePointerDown(event) {
-        // Calculate the offset between item's bottom-right corner and the pointer landing position.
-        const rect = getLogicalBoundingClientRect(itemRef.current);
-        const clientX = getLogicalClientX(event, isRtl());
-        const clientY = event.clientY;
-        pointerOffsetRef.current = new Coordinates({ x: clientX - rect.insetInlineEnd, y: clientY - rect.insetBlockEnd });
+    function handlePointerInteractionStart(event, operation) {
+        const currentItemElement = itemRef.current;
+        if (!currentItemElement) {
+            console.warn("ItemContainer: itemRef.current is not available on interaction start.");
+            return;
+        }
+        const rect = getLogicalBoundingClientRect(currentItemElement);
         originalSizeRef.current = { width: rect.inlineSize, height: rect.blockSize };
-        // Calculate boundaries below which the cursor cannot move.
-        const minWidth = getItemSize(null).minWidth;
-        const minHeight = getItemSize(null).minHeight;
-        pointerBoundariesRef.current = new Coordinates({
-            x: clientX - rect.inlineSize + minWidth,
-            y: clientY - rect.blockSize + minHeight,
+        const { pointerOffset, pointerBoundaries } = calculateInitialPointerData({
+            event,
+            operation,
+            rect,
+            getMinSize: () => getItemSize(null),
+            isRtl: isRtl(),
         });
-        draggableApi.start("resize", "pointer", Coordinates.fromEvent(event, { isRtl: isRtl() }));
-    }
-    function onResizeHandleKeyDown(event) {
-        onHandleKeyDown("resize", event);
+        pointerOffsetRef.current = pointerOffset;
+        pointerBoundariesRef.current = pointerBoundaries;
+        const dndOperation = getDndOperationType(operation, placed);
+        const startCoordinates = Coordinates.fromEvent(event, { isRtl: isRtl() });
+        draggableApi.start(dndOperation, "pointer", startCoordinates);
     }
+    const onHandleDndTransitionActive = throttle((event) => {
+        var _a, _b, _c, _d;
+        const coordinates = Coordinates.fromEvent(event, { isRtl: isRtl() });
+        draggableApi.updateTransition(new Coordinates({
+            x: Math.max(coordinates.x, (_b = (_a = pointerBoundariesRef.current) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : Number.NEGATIVE_INFINITY),
+            y: Math.max(coordinates.y, (_d = (_c = pointerBoundariesRef.current) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : Number.NEGATIVE_INFINITY),
+        }));
+    }, 10);
     const itemTransitionStyle = {};
     const itemTransitionClassNames = [];
     if (inTransition) {
@@ -249,10 +243,10 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     if (transition && transition.interactionType === "pointer") {
         // Adjust the dragged/resized item to the pointer's location.
         itemTransitionClassNames.push(transition.operation === "resize" ? styles.resized : styles.dragged);
-        itemTransitionStyle.insetInlineStart = (_c = transition.positionTransform) === null || _c === void 0 ? void 0 : _c.x;
-        itemTransitionStyle.insetBlockStart = (_d = transition.positionTransform) === null || _d === void 0 ? void 0 : _d.y;
-        itemTransitionStyle.inlineSize = (_e = transition.sizeTransform) === null || _e === void 0 ? void 0 : _e.width;
-        itemTransitionStyle.blockSize = (_f = transition.sizeTransform) === null || _f === void 0 ? void 0 : _f.height;
+        itemTransitionStyle.insetInlineStart = (_a = transition.positionTransform) === null || _a === void 0 ? void 0 : _a.x;
+        itemTransitionStyle.insetBlockStart = (_b = transition.positionTransform) === null || _b === void 0 ? void 0 : _b.y;
+        itemTransitionStyle.inlineSize = (_c = transition.sizeTransform) === null || _c === void 0 ? void 0 : _c.width;
+        itemTransitionStyle.blockSize = (_d = transition.sizeTransform) === null || _d === void 0 ? void 0 : _d.height;
         itemTransitionStyle.pointerEvents = "none";
     }
     if (isHidden) {
@@ -279,27 +273,62 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     }
     const dragHandleRef = useRef(null);
     useImperativeHandle(ref, () => ({
-        focusDragHandle: () => { var _a; return (_a = dragHandleRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        focusDragHandle: () => {
+            var _a;
+            return (_a = dragHandleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
     }));
+    const dragHookProps = {
+        onDndStartAction: (event) => handlePointerInteractionStart(event, "drag"),
+        onDndActiveAction: onHandleDndTransitionActive,
+        onDndEndAction: () => transition && draggableApi.submitTransition(),
+        onUapActionStartAction: () => handleIncrementalTransition("drag"),
+    };
+    const resizeHookProps = {
+        onDndStartAction: (event) => handlePointerInteractionStart(event, "resize"),
+        onDndActiveAction: onHandleDndTransitionActive,
+        onDndEndAction: () => transition && draggableApi.submitTransition(),
+        onUapActionStartAction: () => handleIncrementalTransition("resize"),
+    };
+    const dragInteractionHook = useInternalDragHandleInteractionState(dragHookProps);
+    const resizeInteractionHook = useInternalDragHandleInteractionState(resizeHookProps);
+    // We use a ref to the hook for the handle which is currently active. Distinguishment is managed in the handle button's onPointerDown callback.
+    const selectedHook = useRef(dragInteractionHook);
     const isActive = (!!transition && !isHidden) || !!acquired;
-    const shouldUsePortal = (transition === null || transition === void 0 ? void 0 : transition.operation) === "insert" && (transition === null || transition === void 0 ? void 0 : transition.interactionType) === "pointer";
+    const shouldUsePortal = (transition === null || transition === void 0 ? void 0 : transition.operation) === "insert" &&
+        (transition === null || transition === void 0 ? void 0 : transition.interactionType) === "pointer" &&
+        selectedHook.current.interaction.value === "dnd-active";
     const childrenRef = useRef(null);
     if (!inTransition || isActive) {
         childrenRef.current = children(!!(transition === null || transition === void 0 ? void 0 : transition.hasDropTarget));
     }
     const content = (_jsx("div", { ref: itemRef, className: clsx(styles.root, ...itemTransitionClassNames), style: itemTransitionStyle, "data-item-id": item.id, onBlur: onBlur, children: _jsx(ItemContext.Provider, { value: {
                 isActive,
+                isHidden,
                 dragHandle: {
                     ref: dragHandleRef,
-                    onPointerDown: onDragHandlePointerDown,
-                    onKeyDown: onDragHandleKeyDown,
-                    isActive: isActive && (transition === null || transition === void 0 ? void 0 : transition.operation) === "reorder",
+                    onPointerDown: (e) => onDragHandlePointerDown(e, "drag"),
+                    onKeyDown: (event) => onHandleKeyDown("drag", event),
+                    activeState: determineHandleActiveState({
+                        isHandleActive: isActive,
+                        currentTransition: transition,
+                        interactionHookValue: dragInteractionHook.interaction.value,
+                        targetOperation: "reorder",
+                    }),
+                    onDirectionClick: handleDirectionalMovement,
+                    initialShowButtons: dragInteractionHook.interaction.value === "uap-action-start" || (inTransition && acquired),
                 },
                 resizeHandle: placed
                     ? {
-                        onPointerDown: onResizeHandlePointerDown,
-                        onKeyDown: onResizeHandleKeyDown,
-                        isActive: isActive && (transition === null || transition === void 0 ? void 0 : transition.operation) === "resize",
+                        onPointerDown: (e) => onDragHandlePointerDown(e, "resize"),
+                        onKeyDown: (event) => onHandleKeyDown("resize", event),
+                        activeState: determineHandleActiveState({
+                            isHandleActive: isActive,
+                            currentTransition: transition,
+                            interactionHookValue: resizeInteractionHook.interaction.value,
+                            targetOperation: "resize",
+                        }),
+                        onDirectionClick: handleDirectionalMovement,
                     }
                     : null,
             }, children: childrenRef.current }) }));