@cloudscape-design/board-components 3.0.22 → 3.0.23

package/board/interfaces.d.ts

@@ -134,6 +134,7 @@ export interface Transition<D> {
     collisionIds: Set<ItemId>;
     layoutShift: null | LayoutShift;
     path: readonly Position[];
+    acquiredItemElement?: ReactNode;
 }
 export interface RemoveTransition<D> {
     items: readonly BoardProps.Item<D>[];

package/board/internal.js

@@ -34,6 +34,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
     const removeTransition = transitionState.removeTransition;
     const transitionAnnouncement = transitionState.announcement;
     const acquiredItem = (_a = transition === null || transition === void 0 ? void 0 : transition.acquiredItem) !== null && _a !== void 0 ? _a : null;
+    const acquiredItemElement = transition === null || transition === void 0 ? void 0 : transition.acquiredItemElement;
     // Using cached columns from transition to ensure no unexpected changes in the process.
     const columns = transition ? transition.itemsLayout.columns : currentColumns;
     // Use previous items while remove transition is in progress.
@@ -132,7 +133,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
         document.body.classList.remove(styles["current-operation-reorder"], styles["current-operation-resize"]);
         autoScrollHandlers.removePointerEventHandlers();
     });
-    useDragSubscription("acquire", ({ droppableId, draggableItem }) => {
+    useDragSubscription("acquire", ({ droppableId, draggableItem, acquiredItemElement }) => {
         const placeholder = placeholdersLayout.items.find((it) => it.id === droppableId);
         // If missing then it does not belong to this board.
         if (!placeholder) {
@@ -142,6 +143,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
             type: "acquire-item",
             position: new Position({ x: placeholder.x, y: placeholder.y }),
             layoutElement: containerAccessRef.current,
+            acquiredItemElement: acquiredItemElement,
         });
         focusNextRenderIdRef.current = draggableItem.id;
     });
@@ -198,7 +200,9 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
                                     height: gridContext.getHeight(itemSize.height),
                                     minHeight: gridContext.getHeight(getMinRowSpan(item)),
                                     maxHeight: gridContext.getHeight(itemMaxSize.height),
-                                }), onKeyMove: onItemMove, children: () => renderItem(item, { removeItem: () => removeItemAction(item) }) }, item.id));
+                                }), onKeyMove: onItemMove, children: item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id) && acquiredItemElement
+                                    ? () => acquiredItemElement
+                                    : () => renderItem(item, { removeItem: () => removeItemAction(item) }) }, item.id));
                         });
                         return children;
                     } })) : (empty) }), _jsx(LiveRegion, { children: announcement })] }));

package/board/transition.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch } from "react";
+import { Dispatch, ReactNode } from "react";
 import { InteractionType, Operation } from "../internal/dnd-controller/controller";
 import { BoardItemDefinitionBase, Direction, GridLayout, ItemId, Rect } from "../internal/interfaces";
 import { Coordinates } from "../internal/utils/coordinates";
@@ -45,6 +45,7 @@ interface AcquireItemAction {
     type: "acquire-item";
     position: Position;
     layoutElement: HTMLElement;
+    acquiredItemElement?: ReactNode;
 }
 export declare function useTransition<D>(): [TransitionState<D>, Dispatch<Action<D>>];
 export declare function selectTransitionRows<D>(state: TransitionState<D>): number;

package/board/transition.js

@@ -207,7 +207,7 @@ function updateTransitionWithKeyboardEvent(state, { direction }) {
             return updateManualItemTransition(transition, "down");
     }
 }
-function acquireTransitionItem(state, { position, layoutElement }) {
+function acquireTransitionItem(state, { position, layoutElement, acquiredItemElement }) {
     const { transition } = state;
     if (!transition) {
         throw new Error("Invariant violation: no transition.");
@@ -224,7 +224,14 @@ function acquireTransitionItem(state, { position, layoutElement }) {
     const layoutShift = getLayoutShift(transition, path, insertionDirection);
     // The columnOffset, columnSpan and rowSpan are of no use as of being overridden by the layout shift.
     const acquiredItem = { ...transition.draggableItem, columnOffset: 0, columnSpan: 1, rowSpan: 1 };
-    const nextTransition = { ...transition, collisionIds: new Set(), layoutShift, path, acquiredItem };
+    const nextTransition = {
+        ...transition,
+        collisionIds: new Set(),
+        layoutShift,
+        path,
+        acquiredItem,
+        acquiredItemElement,
+    };
     return {
         transition: nextTransition,
         removeTransition: null,

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

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { BoardItemDefinitionBase, ItemId, Rect } from "../interfaces";
 import { Coordinates } from "../utils/coordinates";
 type Item = BoardItemDefinitionBase<unknown>;
@@ -35,6 +36,7 @@ export interface Droppable {
 interface AcquireData {
     droppableId: ItemId;
     draggableItem: Item;
+    acquiredItemElement?: ReactNode;
 }
 export interface DragAndDropEvents {
     start: (data: DragAndDropData) => void;
@@ -52,7 +54,7 @@ export declare function useDraggable({ draggableItem, getCollisionRect, }: {
     updateTransition(coordinates: Coordinates): void;
     submitTransition(): void;
     discardTransition(): void;
-    acquire(droppableId: ItemId): void;
+    acquire(droppableId: ItemId, acquiredItemElement?: ReactNode): void;
     getDroppables(): [string, Droppable][];
 };
 export declare function useDroppable({ itemId, context, getElement, }: {

package/internal/dnd-controller/controller.js

@@ -42,11 +42,11 @@ class DragAndDropController extends EventEmitter {
     /**
      * Issues an "acquire" event to notify the current transition draggable is acquired by the given droppable.
      */
-    acquire(droppableId) {
+    acquire(droppableId, acquiredItemElement) {
         if (!this.transition) {
             throw new Error("Invariant violation: no transition present for acquire.");
         }
-        this.emit("acquire", { droppableId, draggableItem: this.transition.draggableItem });
+        this.emit("acquire", { droppableId, draggableItem: this.transition.draggableItem, acquiredItemElement });
     }
     /**
      * Registers a droppable used for collisions check, acquire, and dropTarget provision.
@@ -113,8 +113,8 @@ export function useDraggable({ draggableItem, getCollisionRect, }) {
         discardTransition() {
             controller.discard();
         },
-        acquire(droppableId) {
-            controller.acquire(droppableId);
+        acquire(droppableId, acquiredItemElement) {
+            controller.acquire(droppableId, acquiredItemElement);
         },
         getDroppables() {
             return controller.getDroppables();

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (6b020a55)";
+export var PACKAGE_VERSION = "3.0.0 (1e40ad14)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/item-container/index.js

@@ -139,7 +139,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
             return;
         }
         // Notify the respective droppable of the intention to insert the item in it.
-        draggableApi.acquire(nextDroppable);
+        draggableApi.acquire(nextDroppable, childrenRef.current);
     }
     function onHandleKeyDown(operation, event) {
         const canInsert = transition && operation === "drag" && !placed;

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "6b020a55391b9ef905ace059cebdb51e305faf69"
+  "commit": "1e40ad14e04fda613654941bcee13153a5724069"
 }

package/package.json

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