@cloudscape-design/board-components 3.0.1 → 3.0.3

package/board/interfaces.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { InteractionType, Operation } from "../internal/dnd-controller/controller";
-import { BoardItemDefinition, BoardItemDefinitionBase, DataFallbackType, Direction, GridLayout, GridLayoutItem, ItemId } from "../internal/interfaces";
+import { BoardItemDefinition, BoardItemDefinitionBase, DataFallbackType, Direction, GridLayout, GridLayoutItem, ItemId, Rect } from "../internal/interfaces";
 import { LayoutShift } from "../internal/layout-engine/interfaces";
 import { NonCancelableEventHandler } from "../internal/utils/events";
 import { Position } from "../internal/utils/position";
@@ -124,7 +124,7 @@ export interface Transition<D> {
     itemsLayout: GridLayout;
     insertionDirection: null | Direction;
     draggableItem: BoardItemDefinitionBase<D>;
-    draggableElement: HTMLElement;
+    draggableRect: Rect;
     acquiredItem: null | BoardItemDefinitionBase<D>;
     collisionIds: Set<ItemId>;
     layoutShift: null | LayoutShift;

package/board/internal.js

@@ -71,16 +71,15 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
     }, [removeTransition, items]);
     const rows = selectTransitionRows(transitionState) || itemsLayout.rows;
     const placeholdersLayout = createPlaceholdersLayout(rows, columns);
-    function isElementOverBoard(draggableElement) {
+    function isElementOverBoard(rect) {
         const board = containerAccessRef.current;
         const boardContains = (target) => board === target || board.contains(target);
-        const rect = draggableElement.getBoundingClientRect();
         return (boardContains(document.elementFromPoint(rect.left, rect.top)) ||
             boardContains(document.elementFromPoint(rect.right, rect.top)) ||
             boardContains(document.elementFromPoint(rect.right, rect.bottom)) ||
             boardContains(document.elementFromPoint(rect.left, rect.bottom)));
     }
-    useDragSubscription("start", ({ operation, interactionType, draggableItem, draggableElement, collisionIds }) => {
+    useDragSubscription("start", ({ operation, interactionType, draggableItem, collisionRect, collisionIds }) => {
         dispatch({
             type: "init",
             operation,
@@ -90,16 +89,17 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
             // The code only works assuming the board can take any draggable.
             // If draggables can be of different types a check of some sort is required here.
             draggableItem: draggableItem,
-            draggableElement,
-            collisionIds: interactionType === "keyboard" || isElementOverBoard(draggableElement) ? collisionIds : [],
+            draggableRect: collisionRect,
+            collisionIds: interactionType === "keyboard" || isElementOverBoard(collisionRect) ? collisionIds : [],
         });
         autoScrollHandlers.addPointerEventHandlers();
     });
-    useDragSubscription("update", ({ interactionType, collisionIds, positionOffset, draggableElement }) => {
+    useDragSubscription("update", ({ interactionType, collisionIds, positionOffset, collisionRect }) => {
         dispatch({
             type: "update-with-pointer",
-            collisionIds: interactionType === "keyboard" || isElementOverBoard(draggableElement) ? collisionIds : [],
+            collisionIds: interactionType === "keyboard" || isElementOverBoard(collisionRect) ? collisionIds : [],
             positionOffset,
+            draggableRect: collisionRect,
         });
     });
     useDragSubscription("submit", () => {

package/board/transition.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch } from "react";
 import { InteractionType, Operation } from "../internal/dnd-controller/controller";
-import { BoardItemDefinitionBase, Direction, GridLayout, ItemId } from "../internal/interfaces";
+import { BoardItemDefinitionBase, Direction, GridLayout, ItemId, Rect } from "../internal/interfaces";
 import { Coordinates } from "../internal/utils/coordinates";
 import { Position } from "../internal/utils/position";
 import { BoardProps, RemoveTransition, Transition, TransitionAnnouncement } from "./interfaces";
@@ -16,7 +16,7 @@ interface InitAction<D> {
     interactionType: InteractionType;
     itemsLayout: GridLayout;
     draggableItem: BoardItemDefinitionBase<D>;
-    draggableElement: HTMLElement;
+    draggableRect: Rect;
     collisionIds: readonly ItemId[];
 }
 interface InitRemoveAction<D> {
@@ -35,6 +35,7 @@ interface UpdateWithPointerAction {
     type: "update-with-pointer";
     collisionIds: readonly ItemId[];
     positionOffset: Coordinates;
+    draggableRect: Rect;
 }
 interface UpdateWithKeyboardAction {
     type: "update-with-keyboard";

package/board/transition.js

@@ -33,14 +33,14 @@ function transitionReducer(state, action) {
             return acquireTransitionItem(state, action);
     }
 }
-function initTransition({ operation, interactionType, itemsLayout, draggableItem, draggableElement, collisionIds, }) {
+function initTransition({ operation, interactionType, itemsLayout, draggableItem, draggableRect, collisionIds, }) {
     const transition = {
         operation,
         interactionType,
         itemsLayout,
         insertionDirection: null,
         draggableItem,
-        draggableElement,
+        draggableRect,
         acquiredItem: null,
         collisionIds: new Set(),
         layoutShift: null,
@@ -107,7 +107,7 @@ function discardTransition(state) {
         announcement: itemBelongsToBoard ? { type: "dnd-discarded", item, operation } : null,
     };
 }
-function updateTransitionWithPointerEvent(state, { collisionIds, positionOffset }) {
+function updateTransitionWithPointerEvent(state, { collisionIds, positionOffset, draggableRect }) {
     var _a, _b, _c;
     const { transition } = state;
     if (!transition) {
@@ -121,7 +121,13 @@ function updateTransitionWithPointerEvent(state, { collisionIds, positionOffset
     const isOutOfBoundaries = transition.operation !== "resize" ? collisionIds.length < itemSize : collisionIds.length === 0;
     if (isOutOfBoundaries) {
         return {
-            transition: { ...transition, collisionIds: new Set(), layoutShift: null, insertionDirection: null },
+            transition: {
+                ...transition,
+                draggableRect,
+                collisionIds: new Set(),
+                layoutShift: null,
+                insertionDirection: null,
+            },
             removeTransition: null,
             announcement: null,
         };
@@ -133,7 +139,14 @@ function updateTransitionWithPointerEvent(state, { collisionIds, positionOffset
     const insertionDirection = (_c = transition.insertionDirection) !== null && _c !== void 0 ? _c : getInsertionDirection(positionOffset);
     const layoutShift = getLayoutShift(transition, path, insertionDirection);
     return {
-        transition: { ...transition, collisionIds: new Set(collisionIds), layoutShift, path, insertionDirection },
+        transition: {
+            ...transition,
+            draggableRect,
+            collisionIds: new Set(collisionIds),
+            layoutShift,
+            path,
+            insertionDirection,
+        },
         removeTransition: null,
         announcement: null,
     };
@@ -192,8 +205,8 @@ function acquireTransitionItem(state, { position, layoutElement }) {
     }
     const { columns } = transition.itemsLayout;
     const layoutRect = layoutElement.getBoundingClientRect();
-    const itemRect = transition.draggableElement.getBoundingClientRect();
-    const offset = new Coordinates({ x: itemRect.x - layoutRect.x, y: itemRect.y - layoutRect.y });
+    const itemRect = transition.draggableRect;
+    const offset = new Coordinates({ x: itemRect.left - layoutRect.x, y: itemRect.top - layoutRect.y });
     const insertionDirection = getInsertionDirection(offset);
     // Update original insertion position if the item can't fit into the layout by width.
     const width = getDefaultColumnSpan(transition.draggableItem, columns);

package/internal/dnd-controller/controller.d.ts

@@ -22,10 +22,9 @@ export interface DragAndDropData {
     operation: Operation;
     interactionType: InteractionType;
     draggableItem: Item;
-    draggableElement: HTMLElement;
+    collisionRect: Rect;
     positionOffset: Coordinates;
     coordinates: Coordinates;
-    collisionRect: Rect;
     collisionIds: ItemId[];
     dropTarget: null | DropTargetContext;
 }
@@ -45,9 +44,9 @@ export interface DragAndDropEvents {
     acquire: (data: AcquireData) => void;
 }
 export declare function useDragSubscription<K extends keyof DragAndDropEvents>(event: K, handler: DragAndDropEvents[K]): void;
-export declare function useDraggable({ item, getElement }: {
-    item: Item;
-    getElement: () => HTMLElement;
+export declare function useDraggable({ draggableItem, getCollisionRect, }: {
+    draggableItem: Item;
+    getCollisionRect: (operation: Operation, coordinates: Coordinates, dropTarget: null | DropTargetContext) => Rect;
 }): {
     start(operation: Operation, interactionType: InteractionType, startCoordinates: Coordinates): void;
     updateTransition(coordinates: Coordinates): void;

package/internal/dnd-controller/controller.js

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useEffect } from "react";
 import { Coordinates } from "../utils/coordinates";
-import { getCollisionRect, getHoveredDroppables } from "./collision";
 import { EventEmitter } from "./event-emitter";
+import { getHoveredDroppables } from "./get-hovered-droppables";
 class DragAndDropController extends EventEmitter {
     constructor() {
         super(...arguments);
@@ -15,15 +15,9 @@ class DragAndDropController extends EventEmitter {
      *
      * The method overrides the previous transition if exists (w/o a cancellation event)!
      */
-    start(operation, interactionType, draggableItem, draggableElement, startCoordinates) {
-        this.transition = {
-            operation,
-            interactionType,
-            draggableItem,
-            draggableElement,
-            startCoordinates,
-        };
-        this.emit("start", this.getDragAndDropData(startCoordinates));
+    start(transition) {
+        this.transition = { ...transition };
+        this.emit("start", this.getDragAndDropData(transition.startCoordinates));
     }
     /**
      * Updates current transition with given coordinates and issues an "update" event.
@@ -76,12 +70,16 @@ class DragAndDropController extends EventEmitter {
         if (!this.transition) {
             throw new Error("Invariant violation: no transition present for interaction.");
         }
-        const { operation, draggableElement, startCoordinates } = this.transition;
-        const positionOffset = Coordinates.cursorOffset(coordinates, startCoordinates);
-        const collisionRect = getCollisionRect(operation, draggableElement, coordinates);
+        const positionOffset = Coordinates.cursorOffset(coordinates, this.transition.startCoordinates);
+        const collisionRect = this.getCollisionRect(this.transition, coordinates);
         const { collisionIds, dropTarget } = this.getCollisions(collisionRect);
         return { ...this.transition, positionOffset, coordinates, collisionRect, collisionIds, dropTarget };
     }
+    getCollisionRect(transition, coordinates) {
+        const originalCollisionRect = transition.getCollisionRect(transition.operation, coordinates, null);
+        const { dropTarget } = this.getCollisions(originalCollisionRect);
+        return transition.getCollisionRect(transition.operation, coordinates, dropTarget);
+    }
     getCollisions(collisionRect) {
         const droppableEntries = [...this.droppables.entries()];
         const droppableElements = droppableEntries.map(([id, entry]) => [id, entry.element]);
@@ -101,10 +99,10 @@ const controller = new DragAndDropController();
 export function useDragSubscription(event, handler) {
     useEffect(() => controller.on(event, handler), [event, handler]);
 }
-export function useDraggable({ item, getElement }) {
+export function useDraggable({ draggableItem, getCollisionRect, }) {
     return {
         start(operation, interactionType, startCoordinates) {
-            controller.start(operation, interactionType, item, getElement(), startCoordinates);
+            controller.start({ operation, interactionType, draggableItem, getCollisionRect, startCoordinates });
         },
         updateTransition(coordinates) {
             controller.update(coordinates);

package/internal/dnd-controller/get-hovered-droppables.d.ts

@@ -0,0 +1,6 @@
+import { ItemId } from "../interfaces";
+import { Rect } from "../interfaces";
+/**
+ * Returns IDs of droppables hovered by the draggable rect.
+ */
+export declare function getHoveredDroppables(collisionRect: Rect, droppables: readonly [ItemId, HTMLElement][]): string[];

package/internal/dnd-controller/get-hovered-droppables.js

@@ -0,0 +1,10 @@
+import { getGridPlacement, isInside } from "../utils/rects";
+import { getNormalizedElementRect } from "../utils/screen";
+/**
+ * Returns IDs of droppables hovered by the draggable rect.
+ */
+export function getHoveredDroppables(collisionRect, droppables) {
+    const droppableRects = droppables.map(([, element]) => getNormalizedElementRect(element));
+    const bounds = getGridPlacement(collisionRect, droppableRects);
+    return droppables.filter((_, index) => isInside(droppableRects[index], bounds)).map(([droppableId]) => droppableId);
+}

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (f7bedc98)";
+export var PACKAGE_VERSION = "3.0.0 (7421b5aa)";
 export var THEME = "default";
 export var ALWAYS_VISUAL_REFRESH = false;

package/internal/item-container/get-collision-rect.d.ts

@@ -0,0 +1,10 @@
+import { Operation } from "../dnd-controller/controller";
+import { Rect } from "../interfaces";
+import { Coordinates } from "../utils/coordinates";
+/**
+ * Produces a rect (in coordinates) to represent the draggable item.
+ */
+export declare function getCollisionRect(operation: Operation, draggableElement: HTMLElement, coordinates: Coordinates, sizeOverride: null | {
+    width: number;
+    height: number;
+}): Rect;

package/internal/item-container/get-collision-rect.js

@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { getNormalizedElementRect } from "../utils/screen";
+/**
+ * Produces a rect (in coordinates) to represent the draggable item.
+ */
+export function getCollisionRect(operation, draggableElement, coordinates, sizeOverride) {
+    var _a, _b;
+    const { left, top, width, height } = getNormalizedElementRect(draggableElement);
+    switch (operation) {
+        case "reorder":
+            return { left: coordinates.x, right: coordinates.x + width, top: coordinates.y, bottom: coordinates.y + height };
+        case "resize":
+            return { left: left, top: top, right: coordinates.x, bottom: coordinates.y };
+        case "insert":
+            return {
+                left: coordinates.x,
+                top: coordinates.y,
+                right: coordinates.x + ((_a = sizeOverride === null || sizeOverride === void 0 ? void 0 : sizeOverride.width) !== null && _a !== void 0 ? _a : width),
+                bottom: coordinates.y + ((_b = sizeOverride === null || sizeOverride === void 0 ? void 0 : sizeOverride.height) !== null && _b !== void 0 ? _b : height),
+            };
+    }
+}

package/internal/item-container/index.js

@@ -9,6 +9,7 @@ import { Coordinates } from "../utils/coordinates";
 import { getNormalizedElementRect } from "../utils/screen";
 import { useStableEventHandler } from "../utils/use-stable-event-handler";
 import { useThrottledEventHandler } from "../utils/use-throttled-event-handler";
+import { getCollisionRect } from "./get-collision-rect";
 import { getNextDroppable } from "./get-next-droppable";
 import styles from "./styles.css.js";
 const Context = createContext(null);
@@ -27,7 +28,13 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     const pointerBoundariesRef = useRef(null);
     const [transition, setTransition] = useState(null);
     const itemRef = useRef(null);
-    const draggableApi = useDraggable({ item, getElement: () => itemRef.current });
+    const draggableApi = useDraggable({
+        draggableItem: item,
+        getCollisionRect: (operation, coordinates, dropTarget) => {
+            const sizeOverride = operation === "insert" && dropTarget ? getItemSize(dropTarget) : null;
+            return getCollisionRect(operation, itemRef.current, coordinates, sizeOverride);
+        },
+    });
     const onPointerMove = useThrottledEventHandler((event) => {
         var _a, _b, _c, _d;
         const coordinates = Coordinates.fromEvent(event);

package/internal/layout-engine/engine-step.d.ts

@@ -1,5 +1,11 @@
 import { ItemId } from "../interfaces";
-import { LayoutEngineGrid } from "./grid";
+import { LayoutEngineGrid, ReadonlyLayoutEngineGrid } from "./grid";
 import { CommittedMove } from "./interfaces";
-export declare function resolveOverlaps(userMove: CommittedMove, grid: LayoutEngineGrid, moves: CommittedMove[], conflicts: Set<ItemId>): void;
-export declare function refloatGrid(grid: LayoutEngineGrid, moves: CommittedMove[], conflicts: Set<ItemId>): void;
+export declare class LayoutEngineStepState {
+    grid: ReadonlyLayoutEngineGrid;
+    moves: readonly CommittedMove[];
+    conflicts: ReadonlySet<ItemId>;
+    constructor(grid: LayoutEngineGrid, moves?: CommittedMove[], conflicts?: Set<string>);
+}
+export declare function resolveOverlaps(userMove: CommittedMove, state: LayoutEngineStepState): LayoutEngineStepState;
+export declare function refloatGrid(state: LayoutEngineStepState): LayoutEngineStepState;

package/internal/layout-engine/engine-step.js

@@ -1,19 +1,30 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { StackSet } from "../utils/stack-set";
-export function resolveOverlaps(userMove, grid, moves, conflicts) {
-    new LayoutEngineStep(grid, moves, conflicts).resolveOverlaps(userMove);
+import { LayoutEngineGrid } from "./grid";
+export class LayoutEngineStepState {
+    constructor(grid, moves = new Array(), conflicts = new Set()) {
+        this.grid = grid;
+        this.moves = moves;
+        this.conflicts = conflicts;
+    }
 }
-export function refloatGrid(grid, moves, conflicts) {
-    new LayoutEngineStep(grid, moves, conflicts).refloatGrid();
+export function resolveOverlaps(userMove, state) {
+    return new LayoutEngineStep(state).resolveOverlaps(userMove).getState();
+}
+export function refloatGrid(state) {
+    return new LayoutEngineStep(state).refloatGrid().getState();
 }
 class LayoutEngineStep {
-    constructor(grid, moves, conflicts) {
+    constructor(state) {
         this.moves = [];
         this.conflicts = new Set();
-        this.grid = grid;
-        this.moves = moves;
-        this.conflicts = conflicts;
+        this.grid = LayoutEngineGrid.clone(state.grid);
+        this.moves = [...state.moves];
+        this.conflicts = new Set([...state.conflicts]);
+    }
+    getState() {
+        return { grid: this.grid, moves: this.moves, conflicts: this.conflicts };
     }
     // Issue moves on overlapping items trying to resolve all of them.
     resolveOverlaps(userMove) {
@@ -27,6 +38,7 @@ class LayoutEngineStep {
                 overlaps.push(itemId);
             }
         };
+        this.conflicts = this.findConflicts(userMove);
         this.makeMove(userMove, addOverlap, priorities);
         const tryVacantMoves = () => {
             // Try vacant moves on all overlaps.
@@ -56,11 +68,12 @@ class LayoutEngineStep {
         };
         tryVacantMoves();
         this.refloatGrid(activeId);
+        return this;
     }
     // Find items that can "float" to the top and apply the necessary moves.
     refloatGrid(activeId) {
         if (this.conflicts.size > 0) {
-            return;
+            return this;
         }
         let needAnotherRefloat = false;
         for (const item of this.grid.items) {
@@ -90,6 +103,7 @@ class LayoutEngineStep {
         if (needAnotherRefloat) {
             this.refloatGrid(activeId);
         }
+        return this;
     }
     makeMove(move, addOverlap, priorities) {
         switch (move.type) {
@@ -220,7 +234,8 @@ class LayoutEngineStep {
             height: overlapItem.height,
             type: "ESCAPE",
         };
-        for (move.y; move.y < 100; move.y++) {
+        // If can't find the escape move after 999 steps down it is likely a bug in the validation.
+        for (move.y; move.y < 999; move.y++) {
             if (this.validatePriorityMove(move, priorities, activeId, false)) {
                 return move;
             }
@@ -304,4 +319,58 @@ class LayoutEngineStep {
             }
         }
     }
+    // Find items that the active item cannot be moved over with the current move.
+    findConflicts(move) {
+        if (move.type !== "MOVE") {
+            return new Set();
+        }
+        const conflicts = new Set();
+        const moveTarget = this.grid.getItem(move.itemId);
+        const direction = `${move.x - moveTarget.x}:${move.y - moveTarget.y}`;
+        switch (direction) {
+            case "-1:0": {
+                const left = Math.max(0, moveTarget.left - 1);
+                for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
+                    const block = this.grid.getCellOverlap(left, y, moveTarget.id);
+                    if (block && block.x < left) {
+                        conflicts.add(block.id);
+                    }
+                }
+                break;
+            }
+            case "1:0": {
+                const right = Math.min(this.grid.width - 1, moveTarget.right + 1);
+                for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
+                    const block = this.grid.getCellOverlap(right, y, moveTarget.id);
+                    if (block && block.x + block.width - 1 > right) {
+                        conflicts.add(block.id);
+                    }
+                }
+                break;
+            }
+            case "0:-1": {
+                const top = Math.max(0, moveTarget.top - 1);
+                for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
+                    const block = this.grid.getCellOverlap(x, top, moveTarget.id);
+                    if (block && block.y < top) {
+                        conflicts.add(block.id);
+                    }
+                }
+                break;
+            }
+            case "0:1": {
+                const bottom = moveTarget.bottom + 1;
+                for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
+                    const block = this.grid.getCellOverlap(x, bottom, moveTarget.id);
+                    if (block && block.y + block.height - 1 > bottom) {
+                        conflicts.add(block.id);
+                    }
+                }
+                break;
+            }
+            default:
+                throw new Error(`Invariant violation: unexpected direction ${direction}.`);
+        }
+        return conflicts;
+    }
 }

package/internal/layout-engine/engine.d.ts

@@ -2,9 +2,7 @@ import { GridLayout, ItemId } from "../interfaces";
 import { InsertCommand, LayoutShift, MoveCommand, ResizeCommand } from "./interfaces";
 export declare class LayoutEngine {
     private current;
-    private grid;
-    private moves;
-    private conflicts;
+    private step;
     private chained;
     constructor(args: GridLayout | LayoutEngine);
     move(moveCommand: MoveCommand): LayoutEngine;

package/internal/layout-engine/engine.js

@@ -1,25 +1,20 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { Position } from "../utils/position";
-import { findConflicts } from "./engine-conflicts";
-import { refloatGrid, resolveOverlaps } from "./engine-step";
+import { LayoutEngineStepState, refloatGrid, resolveOverlaps } from "./engine-step";
 import { LayoutEngineGrid } from "./grid";
 import { normalizeMovePath, normalizeResizePath, sortGridItems } from "./utils";
 export class LayoutEngine {
     constructor(args) {
-        this.moves = [];
-        this.conflicts = new Set();
         this.chained = false;
         if (args instanceof LayoutEngine) {
             this.current = args.current;
-            this.grid = args.grid;
-            this.moves = args.moves;
-            this.conflicts = args.conflicts;
+            this.step = args.step;
             this.chained = true;
         }
         else {
             this.current = args;
-            this.grid = new LayoutEngineGrid(args.items, args.columns);
+            this.step = new LayoutEngineStepState(new LayoutEngineGrid(args.items, args.columns));
         }
     }
     move(moveCommand) {
@@ -27,76 +22,73 @@ export class LayoutEngine {
         const { itemId, path } = this.validateMoveCommand(moveCommand);
         for (let stepIndex = 0; stepIndex < path.length; stepIndex++) {
             const step = path[stepIndex];
-            const { width, height } = this.grid.getItem(itemId);
+            const { width, height } = this.step.grid.getItem(itemId);
             const move = { itemId, x: step.x, y: step.y, width, height, type: "MOVE" };
-            this.conflicts = findConflicts(move, this.grid);
-            resolveOverlaps(move, this.grid, this.moves, this.conflicts);
+            this.step = resolveOverlaps(move, this.step);
         }
         return new LayoutEngine(this);
     }
     resize(resize) {
         this.cleanup();
         const { itemId, path } = this.validateResizeCommand(resize);
-        const resizeTarget = this.grid.getItem(itemId);
+        const resizeTarget = this.step.grid.getItem(itemId);
         for (let stepIndex = 0; stepIndex < path.length; stepIndex++) {
             const width = path[stepIndex].x - resizeTarget.x;
             const height = path[stepIndex].y - resizeTarget.y;
-            resolveOverlaps({ itemId, x: resizeTarget.x, y: resizeTarget.y, width, height, type: "RESIZE" }, this.grid, this.moves, this.conflicts);
+            this.step = resolveOverlaps({ itemId, x: resizeTarget.x, y: resizeTarget.y, width, height, type: "RESIZE" }, this.step);
         }
         return new LayoutEngine(this);
     }
     insert({ itemId, width, height, path: [position, ...path] }) {
         this.cleanup();
-        resolveOverlaps({ itemId, ...position, width, height, type: "INSERT" }, this.grid, this.moves, this.conflicts);
+        this.step = resolveOverlaps({ itemId, ...position, width, height, type: "INSERT" }, this.step);
         return new LayoutEngine(this).move({ itemId, path });
     }
     remove(itemId) {
         this.cleanup();
-        const { x, y, width, height } = this.grid.getItem(itemId);
-        resolveOverlaps({ itemId, x, y, width, height, type: "REMOVE" }, this.grid, this.moves, this.conflicts);
+        const { x, y, width, height } = this.step.grid.getItem(itemId);
+        this.step = resolveOverlaps({ itemId, x, y, width, height, type: "REMOVE" }, this.step);
         return new LayoutEngine(this);
     }
     refloat() {
-        refloatGrid(this.grid, this.moves, this.conflicts);
+        this.step = refloatGrid(this.step);
         return new LayoutEngine(this);
     }
     getLayoutShift() {
         return {
             current: this.current,
             next: {
-                items: sortGridItems(this.grid.items.map((item) => ({ ...item }))),
-                columns: this.grid.width,
-                rows: this.grid.height,
+                items: sortGridItems(this.step.grid.items.map((item) => ({ ...item }))),
+                columns: this.step.grid.width,
+                rows: this.step.grid.height,
             },
-            moves: [...this.moves],
-            conflicts: [...this.conflicts],
+            moves: [...this.step.moves],
+            conflicts: [...this.step.conflicts],
         };
     }
     cleanup() {
         if (!this.chained) {
-            this.grid = new LayoutEngineGrid(this.current.items, this.current.columns);
-            this.moves = [];
-            this.conflicts = new Set();
+            this.step = new LayoutEngineStepState(new LayoutEngineGrid(this.current.items, this.current.columns));
         }
     }
     validateMoveCommand({ itemId, path }) {
-        const moveTarget = this.grid.getItem(itemId);
+        const moveTarget = this.step.grid.getItem(itemId);
         for (const step of path) {
-            if (step.x < 0 || step.y < 0 || step.x + moveTarget.width > this.grid.width) {
+            if (step.x < 0 || step.y < 0 || step.x + moveTarget.width > this.step.grid.width) {
                 throw new Error("Invalid move: outside grid.");
             }
         }
         return { itemId, path: normalizeMovePath(new Position({ x: moveTarget.x, y: moveTarget.y }), path) };
     }
     validateResizeCommand({ itemId, path }) {
-        const resizeTarget = this.grid.getItem(itemId);
+        const resizeTarget = this.step.grid.getItem(itemId);
         const x = resizeTarget.x + resizeTarget.width;
         const y = resizeTarget.y + resizeTarget.height;
         for (const step of path) {
             if (step.x < 1 || step.y < 1) {
                 throw new Error("Invalid resize: can't resize to 0.");
             }
-            if (step.x > this.grid.width) {
+            if (step.x > this.step.grid.width) {
                 throw new Error("Invalid resize: outside grid.");
             }
         }

package/internal/layout-engine/grid.d.ts

@@ -6,11 +6,12 @@ export interface LayoutEngineItem extends GridLayoutItem, Rect {
     originalWidth: number;
     originalHeight: number;
 }
-export declare class LayoutEngineGrid {
-    private _width;
-    private _height;
-    private _items;
-    private layout;
+export declare class ReadonlyLayoutEngineGrid {
+    protected _width: number;
+    protected _height: number;
+    protected _items: Map<string, LayoutEngineItem>;
+    protected _layout: Set<ItemId>[][];
+    static clone(grid: ReadonlyLayoutEngineGrid): LayoutEngineGrid;
     constructor(items: readonly GridLayoutItem[], columns: number);
     get width(): number;
     get height(): number;
@@ -18,11 +19,13 @@ export declare class LayoutEngineGrid {
     getItem(itemId: ItemId): LayoutEngineItem;
     getCell(x: number, y: number): LayoutEngineItem[];
     getCellOverlap(x: number, y: number, itemId: ItemId): null | LayoutEngineItem;
+    protected makeNewRow(): void;
+}
+export declare class LayoutEngineGrid extends ReadonlyLayoutEngineGrid {
     move(itemId: ItemId, x: number, y: number, onOverlap?: (overlapId: ItemId) => void): void;
     resize(itemId: ItemId, width: number, height: number, onOverlap?: (overlapId: ItemId) => void): void;
     insert(item: GridLayoutItem, onOverlap: (overlapId: ItemId) => void): void;
     remove(itemId: ItemId): void;
     private removeLayoutItem;
     private insertLayoutItem;
-    private makeNewRow;
 }

package/internal/layout-engine/grid.js

@@ -1,10 +1,18 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { getItemRect } from "./utils";
-export class LayoutEngineGrid {
+export class ReadonlyLayoutEngineGrid {
+    static clone(grid) {
+        const clone = new LayoutEngineGrid([], 0);
+        clone._width = grid._width;
+        clone._height = grid._height;
+        clone._items = new Map([...grid._items].map(([k, v]) => [k, { ...v }]));
+        clone._layout = grid._layout.map((row) => row.map((set) => new Set([...set])));
+        return clone;
+    }
     constructor(items, columns) {
         this._items = new Map();
-        this.layout = [];
+        this._layout = [];
         this._width = columns;
         this._height = 0;
         for (const item of items) {
@@ -23,12 +31,12 @@ export class LayoutEngineGrid {
                 throw new Error("Invalid grid: items of invalid size.");
             }
             for (let y = item.y; y < item.y + item.height; y++) {
-                while (this.layout.length <= y) {
+                while (this._layout.length <= y) {
                     this.makeNewRow();
                 }
                 for (let x = item.x; x < item.x + item.width; x++) {
-                    this.layout[y][x].add(item.id);
-                    if (this.layout[y][x].size > 1) {
+                    this._layout[y][x].add(item.id);
+                    if (this._layout[y][x].size > 1) {
                         throw new Error("Invalid grid: items overlap.");
                     }
                 }
@@ -52,10 +60,10 @@ export class LayoutEngineGrid {
         return item;
     }
     getCell(x, y) {
-        if (!this.layout[y] || !this.layout[y][x]) {
+        if (!this._layout[y] || !this._layout[y][x]) {
             return [];
         }
-        return [...this.layout[y][x]].map((itemId) => this.getItem(itemId));
+        return [...this._layout[y][x]].map((itemId) => this.getItem(itemId));
     }
     getCellOverlap(x, y, itemId) {
         for (const item of this.getCell(x, y)) {
@@ -65,6 +73,12 @@ export class LayoutEngineGrid {
         }
         return null;
     }
+    makeNewRow() {
+        this._layout.push([...Array(this._width)].map(() => new Set()));
+        this._height = this._layout.length;
+    }
+}
+export class LayoutEngineGrid extends ReadonlyLayoutEngineGrid {
     move(itemId, x, y, onOverlap) {
         const moveTarget = this.getItem(itemId);
         this.removeLayoutItem(moveTarget);
@@ -97,14 +111,14 @@ export class LayoutEngineGrid {
             throw new Error("Inserting item has invalid size.");
         }
         for (let y = item.y; y < item.y + item.height; y++) {
-            while (this.layout.length <= y) {
+            while (this._layout.length <= y) {
                 this.makeNewRow();
             }
             for (let x = item.x; x < item.x + item.width; x++) {
-                for (const overlapId of this.layout[y][x]) {
+                for (const overlapId of this._layout[y][x]) {
                     onOverlap(overlapId);
                 }
-                this.layout[y][x].add(item.id);
+                this._layout[y][x].add(item.id);
             }
         }
     }
@@ -116,25 +130,21 @@ export class LayoutEngineGrid {
     removeLayoutItem(item) {
         for (let y = item.y; y < item.y + item.height; y++) {
             for (let x = item.x; x < item.x + item.width; x++) {
-                this.layout[y][x].delete(item.id);
+                this._layout[y][x].delete(item.id);
             }
         }
     }
     insertLayoutItem(item, onOverlap) {
         for (let y = item.y; y < item.y + item.height; y++) {
             for (let x = item.x; x < item.x + item.width; x++) {
-                while (!this.layout[y]) {
+                while (!this._layout[y]) {
                     this.makeNewRow();
                 }
-                for (const overlapId of this.layout[y][x]) {
+                for (const overlapId of this._layout[y][x]) {
                     onOverlap === null || onOverlap === void 0 ? void 0 : onOverlap(overlapId);
                 }
-                this.layout[y][x].add(item.id);
+                this._layout[y][x].add(item.id);
             }
         }
     }
-    makeNewRow() {
-        this.layout.push([...Array(this._width)].map(() => new Set()));
-        this._height = this.layout.length;
-    }
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "f7bedc987918e00ec55f49dfcf8109c1f03b2163"
+  "commit": "7421b5aa9c22226dfdc059c3206c9147bdfbe8b7"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/board-components",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/board-components.git"

package/internal/dnd-controller/collision.d.ts

@@ -1,17 +0,0 @@
-import { ItemId } from "../../internal/interfaces";
-import { Rect } from "../../internal/interfaces";
-import { Coordinates } from "../utils/coordinates";
-import { Operation } from "./controller";
-/**
- * Produces a rect (in coordinates) to represent the draggable item.
- */
-export declare function getCollisionRect(operation: Operation, draggableElement: HTMLElement, coordinates: Coordinates): {
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-};
-/**
- * Returns IDs of droppables hovered by the draggable rect.
- */
-export declare function getHoveredDroppables(collisionRect: Rect, droppables: readonly [ItemId, HTMLElement][]): string[];

package/internal/dnd-controller/collision.js

@@ -1,32 +0,0 @@
-import { getGridPlacement, isInside } from "../utils/rects";
-import { getNormalizedElementRect } from "../utils/screen";
-/**
- * Produces a rect (in coordinates) to represent the draggable item.
- */
-export function getCollisionRect(operation, draggableElement, coordinates) {
-    const activeRect = getNormalizedElementRect(draggableElement);
-    let collisionRect = { left: 0, top: 0, right: 0, bottom: 0 };
-    if (operation === "reorder") {
-        collisionRect = activeRect;
-    }
-    if (operation === "resize") {
-        collisionRect = { left: activeRect.left, top: activeRect.top, right: coordinates.x, bottom: coordinates.y };
-    }
-    if (operation === "insert") {
-        collisionRect = {
-            left: coordinates.x,
-            top: coordinates.y,
-            right: coordinates.x + activeRect.width,
-            bottom: coordinates.y + activeRect.height,
-        };
-    }
-    return collisionRect;
-}
-/**
- * Returns IDs of droppables hovered by the draggable rect.
- */
-export function getHoveredDroppables(collisionRect, droppables) {
-    const droppableRects = droppables.map(([, element]) => getNormalizedElementRect(element));
-    const bounds = getGridPlacement(collisionRect, droppableRects);
-    return droppables.filter((_, index) => isInside(droppableRects[index], bounds)).map(([droppableId]) => droppableId);
-}

package/internal/layout-engine/engine-conflicts.d.ts

@@ -1,4 +0,0 @@
-import { ItemId } from "../interfaces";
-import { LayoutEngineGrid } from "./grid";
-import { CommittedMove } from "./interfaces";
-export declare function findConflicts(move: CommittedMove, grid: LayoutEngineGrid): Set<ItemId>;

package/internal/layout-engine/engine-conflicts.js

@@ -1,53 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-// Find items that the active item cannot be moved over with the current move.
-export function findConflicts(move, grid) {
-    const conflicts = new Set();
-    const moveTarget = grid.getItem(move.itemId);
-    const direction = `${move.x - moveTarget.x}:${move.y - moveTarget.y}`;
-    switch (direction) {
-        case "-1:0": {
-            const left = Math.max(0, moveTarget.left - 1);
-            for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
-                const block = grid.getCellOverlap(left, y, moveTarget.id);
-                if (block && block.x < left) {
-                    conflicts.add(block.id);
-                }
-            }
-            break;
-        }
-        case "1:0": {
-            const right = Math.min(grid.width - 1, moveTarget.right + 1);
-            for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
-                const block = grid.getCellOverlap(right, y, moveTarget.id);
-                if (block && block.x + block.width - 1 > right) {
-                    conflicts.add(block.id);
-                }
-            }
-            break;
-        }
-        case "0:-1": {
-            const top = Math.max(0, moveTarget.top - 1);
-            for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
-                const block = grid.getCellOverlap(x, top, moveTarget.id);
-                if (block && block.y < top) {
-                    conflicts.add(block.id);
-                }
-            }
-            break;
-        }
-        case "0:1": {
-            const bottom = moveTarget.bottom + 1;
-            for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
-                const block = grid.getCellOverlap(x, bottom, moveTarget.id);
-                if (block && block.y + block.height - 1 > bottom) {
-                    conflicts.add(block.id);
-                }
-            }
-            break;
-        }
-        default:
-            throw new Error(`Invariant violation: unexpected direction ${direction}.`);
-    }
-    return conflicts;
-}