@cloudscape-design/board-components 3.0.2 → 3.0.4

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/board-item/styles.css.js

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_9ckv7_1jt4k_1",
-  "container-override": "awsui_container-override_9ckv7_1jt4k_6",
-  "active": "awsui_active_9ckv7_1jt4k_6",
-  "header": "awsui_header_9ckv7_1jt4k_10",
-  "flexible": "awsui_flexible_9ckv7_1jt4k_16",
-  "handle": "awsui_handle_9ckv7_1jt4k_20",
-  "header-content": "awsui_header-content_9ckv7_1jt4k_24",
-  "settings": "awsui_settings_9ckv7_1jt4k_28",
-  "fixed": "awsui_fixed_9ckv7_1jt4k_33",
-  "resizer": "awsui_resizer_9ckv7_1jt4k_37"
+  "root": "awsui_root_9ckv7_1wk39_1",
+  "container-override": "awsui_container-override_9ckv7_1wk39_6",
+  "active": "awsui_active_9ckv7_1wk39_6",
+  "header": "awsui_header_9ckv7_1wk39_10",
+  "flexible": "awsui_flexible_9ckv7_1wk39_16",
+  "handle": "awsui_handle_9ckv7_1wk39_20",
+  "header-content": "awsui_header-content_9ckv7_1wk39_24",
+  "settings": "awsui_settings_9ckv7_1wk39_28",
+  "fixed": "awsui_fixed_9ckv7_1wk39_33",
+  "resizer": "awsui_resizer_9ckv7_1wk39_37"
 };
   

package/board-item/styles.scoped.css

@@ -1,41 +1,41 @@
-.awsui_root_9ckv7_1jt4k_1:not(#\9) {
+.awsui_root_9ckv7_1wk39_1:not(#\9) {
   display: contents;
 }
 
 /* TODO: use container API instead of styles override */
-.awsui_container-override_9ckv7_1jt4k_6.awsui_active_9ckv7_1jt4k_6:not(#\9) {
+.awsui_container-override_9ckv7_1wk39_6.awsui_active_9ckv7_1wk39_6:not(#\9) {
   box-shadow: var(--shadow-container-active-h4jsj2, 0px 4px 8px rgba(0, 28, 36, 0.45));
 }
 
-.awsui_header_9ckv7_1jt4k_10:not(#\9) {
+.awsui_header_9ckv7_1wk39_10:not(#\9) {
   display: flex;
   justify-items: center;
   padding: var(--space-scaled-s-cu1hzn, 12px) calc(var(--space-container-horizontal-tlw03i, 20px) - var(--space-scaled-xs-6859qs, 8px));
 }
 
-.awsui_flexible_9ckv7_1jt4k_16:not(#\9) {
+.awsui_flexible_9ckv7_1wk39_16:not(#\9) {
   flex: 1 1 min-content;
 }
 
-.awsui_handle_9ckv7_1jt4k_20:not(#\9) {
-  margin-top: var(--space-scaled-xxs-95dhkm, 4px);
+.awsui_handle_9ckv7_1wk39_20:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxs-95dhkm, 4px) + 1px);
 }
 
-.awsui_header-content_9ckv7_1jt4k_24:not(#\9) {
+.awsui_header-content_9ckv7_1wk39_24:not(#\9) {
   margin-left: var(--space-scaled-xxs-95dhkm, 4px);
 }
 
-.awsui_settings_9ckv7_1jt4k_28:not(#\9) {
-  margin-top: var(--space-scaled-xxxs-b6dm8t, 2px);
+.awsui_settings_9ckv7_1wk39_28:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxxs-b6dm8t, 2px) + 1px);
   margin-left: var(--space-static-xs-9adq92, 8px);
 }
 
-.awsui_fixed_9ckv7_1jt4k_33:not(#\9) {
+.awsui_fixed_9ckv7_1wk39_33:not(#\9) {
   flex: 0 0 auto;
 }
 
-.awsui_resizer_9ckv7_1jt4k_37:not(#\9) {
+.awsui_resizer_9ckv7_1wk39_37:not(#\9) {
   position: absolute;
-  bottom: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--space-scaled-xxs-95dhkm, 4px));
-  right: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--space-scaled-xxs-95dhkm, 4px));
+  bottom: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));
+  right: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));
 }

package/board-item/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_9ckv7_1jt4k_1",
-  "container-override": "awsui_container-override_9ckv7_1jt4k_6",
-  "active": "awsui_active_9ckv7_1jt4k_6",
-  "header": "awsui_header_9ckv7_1jt4k_10",
-  "flexible": "awsui_flexible_9ckv7_1jt4k_16",
-  "handle": "awsui_handle_9ckv7_1jt4k_20",
-  "header-content": "awsui_header-content_9ckv7_1jt4k_24",
-  "settings": "awsui_settings_9ckv7_1jt4k_28",
-  "fixed": "awsui_fixed_9ckv7_1jt4k_33",
-  "resizer": "awsui_resizer_9ckv7_1jt4k_37"
+  "root": "awsui_root_9ckv7_1wk39_1",
+  "container-override": "awsui_container-override_9ckv7_1wk39_6",
+  "active": "awsui_active_9ckv7_1wk39_6",
+  "header": "awsui_header_9ckv7_1wk39_10",
+  "flexible": "awsui_flexible_9ckv7_1wk39_16",
+  "handle": "awsui_handle_9ckv7_1wk39_20",
+  "header-content": "awsui_header-content_9ckv7_1wk39_24",
+  "settings": "awsui_settings_9ckv7_1wk39_28",
+  "fixed": "awsui_fixed_9ckv7_1wk39_33",
+  "resizer": "awsui_resizer_9ckv7_1wk39_37"
 };
   

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/drag-handle/icon.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import Icon from "@cloudscape-design/components/icon";
@@ -7,6 +7,6 @@ function DragHandleIcon() {
     return _jsx(Icon, { svg: _jsx(SVG, {}) });
 }
 function SVG() {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2H6.01V2.01H6V2ZM6 6H6.01V6.01H6V6ZM6.01 10H6V10.01H6.01V10ZM6 14H6.01V14.01H6V14ZM10.01 2H10V2.01H10.01V2ZM10 6H10.01V6.01H10V6ZM10.01 10H10V10.01H10.01V10ZM10 14H10.01V14.01H10V14Z", fill: "#16191F" }) }));
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "5.5", cy: "2.5", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "5.5", cy: "13.5", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "5.5", cy: "8", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "10.5", cy: "2.5", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "10.5", cy: "13.5", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "10.5", cy: "8", r: "0.5", className: "filled", strokeWidth: "2" })] }));
 }
 export default memo(DragHandleIcon);

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (2398ed65)";
+export var PACKAGE_VERSION = "3.0.0 (8d4d3b58)";
 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/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "2398ed656ef60e2aa7e40000ab70f5dd6fb1783f"
+  "commit": "8d4d3b58b16c3013631a2f39014717a574c56f1b"
 }

package/internal/resize-handle/icon.js

@@ -7,6 +7,6 @@ export function ResizeHandleIcon() {
     return _jsx(Icon, { svg: _jsx(SVG, {}) });
 }
 function SVG() {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", children: [_jsx("line", { x1: "9.94", y1: "14.95", x2: "14.98", y2: "9.57" }), _jsx("line", { x1: "5.75", y1: "14.95", x2: "14.98", y2: "5.35" }), _jsx("line", { x1: "0.98", y1: "14.95", x2: "14.98", y2: "0.95" })] }));
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M9.5 14.5L14.5 9.5", strokeWidth: "2" }), _jsx("path", { d: "M4 14.5L14.5 4", strokeWidth: "2" })] }));
 }
 export default memo(ResizeHandleIcon);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/board-components",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "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);
-}