@cloudscape-design/board-components 3.0.30 → 3.0.31

package/board/internal.js

@@ -132,7 +132,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
         dispatch({ type: "discard" });
         autoScrollHandlers.removePointerEventHandlers();
     });
-    useDragSubscription("acquire", ({ droppableId, draggableItem, acquiredItemElement }) => {
+    useDragSubscription("acquire", ({ droppableId, draggableItem, renderAcquiredItem }) => {
         const placeholder = placeholdersLayout.items.find((it) => it.id === droppableId);
         // If missing then it does not belong to this board.
         if (!placeholder) {
@@ -142,7 +142,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,
+            acquiredItemElement: renderAcquiredItem(),
         });
         focusNextRenderIdRef.current = draggableItem.id;
     });
@@ -192,7 +192,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
                                     else {
                                         delete itemContainerRef.current[item.id];
                                     }
-                                }, item: item, transform: transforms[item.id], inTransition: !!transition || !!removeTransition, placed: true, acquired: item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), getItemSize: () => ({
+                                }, item: item, transform: transforms[item.id], inTransition: !!transition || !!removeTransition, placed: item.id !== (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), acquired: item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), getItemSize: () => ({
                                     width: gridContext.getWidth(itemSize.width),
                                     minWidth: gridContext.getWidth(getMinColumnSpan(item, itemsLayout.columns)),
                                     maxWidth: gridContext.getWidth(itemMaxSize.width),

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

@@ -36,7 +36,7 @@ export interface Droppable {
 interface AcquireData {
     droppableId: ItemId;
     draggableItem: Item;
-    acquiredItemElement?: ReactNode;
+    renderAcquiredItem: () => ReactNode;
 }
 export interface DragAndDropEvents {
     start: (data: DragAndDropData) => void;
@@ -54,7 +54,7 @@ export declare function useDraggable({ draggableItem, getCollisionRect, }: {
     updateTransition(coordinates: Coordinates): void;
     submitTransition(): void;
     discardTransition(): void;
-    acquire(droppableId: ItemId, acquiredItemElement?: ReactNode): void;
+    acquire(droppableId: ItemId, renderAcquiredItem: () => ReactNode): void;
     getDroppables(): [string, Droppable][];
 };
 export declare function useDroppable({ itemId, context, getElement, }: {

package/internal/dnd-controller/controller.js

@@ -43,11 +43,11 @@ class DragAndDropController extends EventEmitter {
     /**
      * Issues an "acquire" event to notify the current transition draggable is acquired by the given droppable.
      */
-    acquire(droppableId, acquiredItemElement) {
+    acquire(droppableId, renderAcquiredItem) {
         if (!this.transition) {
             throw new Error("Invariant violation: no transition present for acquire.");
         }
-        this.emit("acquire", { droppableId, draggableItem: this.transition.draggableItem, acquiredItemElement });
+        this.emit("acquire", { droppableId, draggableItem: this.transition.draggableItem, renderAcquiredItem });
     }
     /**
      * Registers a droppable used for collisions check, acquire, and dropTarget provision.
@@ -115,8 +115,8 @@ export function useDraggable({ draggableItem, getCollisionRect, }) {
         discardTransition() {
             controller.discard();
         },
-        acquire(droppableId, acquiredItemElement) {
-            controller.acquire(droppableId, acquiredItemElement);
+        acquire(droppableId, renderAcquiredItem) {
+            controller.acquire(droppableId, renderAcquiredItem);
         },
         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 (5dff2947)";
+export var PACKAGE_VERSION = "3.0.0 (222f89e3)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "board-components",
-  "PACKAGE_VERSION": "3.0.0 (5dff2947)",
+  "PACKAGE_VERSION": "3.0.0 (222f89e3)",
   "THEME": "open-source-visual-refresh",
   "ALWAYS_VISUAL_REFRESH": true
 }

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

@@ -46,7 +46,7 @@ export interface ItemContainerProps {
         maxHeight: number;
     };
     onKeyMove?(direction: Direction): void;
-    children: () => ReactNode;
+    children: (hasDropTarget: boolean) => ReactNode;
 }
 export declare const ItemContainer: import("react").ForwardRefExoticComponent<ItemContainerProps & import("react").RefAttributes<ItemContainerRef>>;
 export {};

package/internal/item-container/index.js

@@ -60,6 +60,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
                     itemId: draggableItem.id,
                     sizeTransform: dropTarget ? getItemSize(dropTarget) : originalSizeRef.current,
                     positionTransform: { x: coordinates.x - pointerOffset.x, y: coordinates.y - pointerOffset.y },
+                    hasDropTarget: !!dropTarget,
                 });
             }
         }
@@ -154,7 +155,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, childrenRef.current);
+        draggableApi.acquire(nextDroppable, () => children(true));
         setIsHidden(true);
         muteEventsRef.current = true;
     }
@@ -244,7 +245,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     if (isHidden) {
         itemTransitionClassNames.push(styles.hidden);
     }
-    if (placed && transform) {
+    if (transform) {
         // The moved items positions are altered with CSS transform.
         if (transform.type === "move") {
             itemTransitionClassNames.push(styles.transformed);
@@ -272,7 +273,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         (transition === null || transition === void 0 ? void 0 : transition.interactionType) === "pointer";
     const childrenRef = useRef(null);
     if (!inTransition || isActive) {
-        childrenRef.current = children();
+        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,

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "5dff29478d324c1d9508bb43b94dcef2e723a177"
+  "commit": "222f89e36dd7458e8541be32c1e9dc059173a886"
 }

package/items-palette/internal.js

@@ -18,7 +18,7 @@ export function InternalItemsPalette({ items, renderItem, i18nStrings, __interna
         itemContainerRef.current[itemId].focusDragHandle();
     }
     useDragSubscription("start", ({ draggableItem: { id } }) => {
-        setDropState({ id, isExpanded: false });
+        setDropState({ id });
         // Announce only if the target item belongs to the palette.
         if (items.some((it) => it.id === id)) {
             setAnnouncement(i18nStrings.liveAnnouncementDndStarted);
@@ -27,8 +27,8 @@ export function InternalItemsPalette({ items, renderItem, i18nStrings, __interna
             setAnnouncement("");
         }
     });
-    useDragSubscription("update", ({ draggableItem: { id }, dropTarget }) => {
-        setDropState({ id, isExpanded: !!dropTarget });
+    useDragSubscription("update", ({ draggableItem: { id } }) => {
+        setDropState({ id });
     });
     useDragSubscription("submit", () => {
         setDropState(undefined);
@@ -68,7 +68,5 @@ export function InternalItemsPalette({ items, renderItem, i18nStrings, __interna
                             }
                             const { width, height } = dropContext.scale(item);
                             return { width, minWidth: width, maxWidth: width, height, minHeight: height, maxHeight: height };
-                        }, children: () => renderItem(item, {
-                            showPreview: (dropState === null || dropState === void 0 ? void 0 : dropState.id) === item.id && dropState.isExpanded,
-                        }) }, item.id))) }) }), _jsx(LiveRegion, { children: announcement })] }));
+                        }, children: (hasDropTarget) => renderItem(item, { showPreview: hasDropTarget }) }, item.id))) }) }), _jsx(LiveRegion, { children: announcement })] }));
 }

package/package.json

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