@cloudscape-design/board-components 3.0.21 → 3.0.23

package/board/interfaces.d.ts

@@ -47,12 +47,15 @@ export interface BoardProps<D = DataFallbackType> {
      */
     i18nStrings: BoardProps.I18nStrings<D>;
     /**
-     * Fired when a user interaction changes size or position of board items.
+     * Called when a user modifies the size or position of board items.
      *
      * The change detail has the following properties:
+     *
      * * `items`: (readonly Item<D>[]) - the updated items array.
-     * * `addedItem`: (Item<D>, optional) - the item that was added as part of the update, if available.
-     * * `removedItem`: (Item<D>, optional) - the item that was removed as part of the update, if available.
+     * * `addedItem`: (Item<D>, optional) - the item that was added as part of the update, if applicable.
+     * * `removedItem`: (Item<D>, optional) - the item that was removed as part of the update, if applicable.
+     * * `resizedItem`: (Item<D>, optional) - the item that was resized as part of the update, if applicable.
+     * * `movedItem`: (Item<D>, optional) - the item that was moved as part of the update, if applicable.
      */
     onItemsChange: NonCancelableEventHandler<BoardProps.ItemsChangeDetail<D>>;
     /**
@@ -69,6 +72,8 @@ export declare namespace BoardProps {
     }
     interface ItemsChangeDetail<D = DataFallbackType> {
         items: ReadonlyArray<Item<D>>;
+        movedItem?: Item<D>;
+        resizedItem?: Item<D>;
         addedItem?: Item<D>;
         removedItem?: Item<D>;
     }
@@ -129,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/board/utils/events.js

@@ -3,12 +3,17 @@
 import { createCustomEvent } from "../../internal/utils/events";
 import { transformItems } from "../../internal/utils/layout";
 export function createItemsChangeEvent(items, layoutShift) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const insertTarget = (_b = (_a = layoutShift.moves.find((move) => move.type === "INSERT")) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : null;
-    const removeTarget = (_d = (_c = layoutShift.moves.find((move) => move.type === "REMOVE")) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : null;
-    const resizeTarget = (_f = (_e = layoutShift.moves.find((move) => move.type === "RESIZE")) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : null;
+    const moveTarget = (_d = (_c = layoutShift.moves.find((move) => move.type === "MOVE")) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : null;
+    const removeTarget = (_f = (_e = layoutShift.moves.find((move) => move.type === "REMOVE")) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : null;
+    const resizeTarget = (_h = (_g = layoutShift.moves.find((move) => move.type === "RESIZE")) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : null;
     const newItems = transformItems(items, layoutShift.next, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : insertTarget);
-    const addedItem = newItems.find((it) => it.id === insertTarget);
-    const removedItem = newItems.find((it) => it.id === removeTarget);
-    return createCustomEvent({ items: newItems, addedItem, removedItem });
+    return createCustomEvent({
+        items: newItems,
+        addedItem: newItems.find((it) => it.id === insertTarget),
+        removedItem: newItems.find((it) => it.id === removeTarget),
+        resizedItem: newItems.find((it) => it.id === resizeTarget),
+        movedItem: !insertTarget ? newItems.find((it) => it.id === moveTarget) : undefined,
+    });
 }

package/internal/api-docs/components/board.js

@@ -88,7 +88,7 @@ module.exports = {
   "events": [
     {
       "name": "onItemsChange",
-      "description": "Fired when a user interaction changes size or position of board items.\nThe change detail has the following properties:\n* `items`: (readonly Item<D>[]) - the updated items array.\n* `addedItem`: (Item<D>, optional) - the item that was added as part of the update, if available.\n* `removedItem`: (Item<D>, optional) - the item that was removed as part of the update, if available.\n",
+      "description": "Called when a user modifies the size or position of board items.\nThe change detail has the following properties:\n\n* `items`: (readonly Item<D>[]) - the updated items array.\n* `addedItem`: (Item<D>, optional) - the item that was added as part of the update, if applicable.\n* `removedItem`: (Item<D>, optional) - the item that was removed as part of the update, if applicable.\n* `resizedItem`: (Item<D>, optional) - the item that was resized as part of the update, if applicable.\n* `movedItem`: (Item<D>, optional) - the item that was moved as part of the update, if applicable.\n",
       "cancelable": false,
       "detailType": "BoardProps.ItemsChangeDetail<D>",
       "detailInlineType": {
@@ -105,10 +105,20 @@ module.exports = {
             "type": "ReadonlyArray<BoardProps.Item<D>>",
             "optional": false
           },
+          {
+            "name": "movedItem",
+            "type": "BoardProps.Item<D>",
+            "optional": true
+          },
           {
             "name": "removedItem",
             "type": "BoardProps.Item<D>",
             "optional": true
+          },
+          {
+            "name": "resizedItem",
+            "type": "BoardProps.Item<D>",
+            "optional": true
           }
         ]
       }

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 (a3a50d67)";
+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": "a3a50d67b43c8088811533ff77574fca0f0135ce"
+  "commit": "1e40ad14e04fda613654941bcee13153a5724069"
 }

package/package.json

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