@cloudscape-design/board-components 3.0.29 → 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/board/utils/events.js

@@ -12,7 +12,7 @@ export function createItemsChangeEvent(items, layoutShift) {
     return createCustomEvent({
         items: newItems,
         addedItem: newItems.find((it) => it.id === insertTarget),
-        removedItem: newItems.find((it) => it.id === removeTarget),
+        removedItem: items.find((it) => it.id === removeTarget),
         resizedItem: newItems.find((it) => it.id === resizeTarget),
         movedItem: !insertTarget ? newItems.find((it) => it.id === moveTarget) : undefined,
     });

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

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useEffect } from "react";
 import { Coordinates } from "../utils/coordinates";
+import { useStableEventHandler } from "../utils/use-stable-event-handler";
 import { EventEmitter } from "./event-emitter";
 import { getHoveredDroppables } from "./get-hovered-droppables";
 class DragAndDropController extends EventEmitter {
@@ -42,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.
@@ -97,7 +98,8 @@ class DragAndDropController extends EventEmitter {
 // Controller is a singleton and is shared between all d&d elements.
 const controller = new DragAndDropController();
 export function useDragSubscription(event, handler) {
-    useEffect(() => controller.on(event, handler), [event, handler]);
+    const stableHandler = useStableEventHandler(handler);
+    useEffect(() => controller.on(event, stableHandler), [event, stableHandler]);
 }
 export function useDraggable({ draggableItem, getCollisionRect, }) {
     return {
@@ -113,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 (b4c8f266)";
+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 (b4c8f266)",
+  "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

@@ -27,6 +27,8 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     const pointerOffsetRef = useRef(new Coordinates({ x: 0, y: 0 }));
     const pointerBoundariesRef = useRef(null);
     const [transition, setTransition] = useState(null);
+    const [isHidden, setIsHidden] = useState(false);
+    const muteEventsRef = useRef(false);
     const itemRef = useRef(null);
     const draggableApi = useDraggable({
         draggableItem: item,
@@ -40,7 +42,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
             const [width, height] = [collisionRect.right - collisionRect.left, collisionRect.bottom - collisionRect.top];
             const pointerOffset = pointerOffsetRef.current;
             if (operation === "resize") {
-                setTransition((transition) => ({
+                setTransition({
                     operation,
                     interactionType,
                     itemId: draggableItem.id,
@@ -49,29 +51,31 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
                         height: Math.max(getItemSize(null).minHeight, height - pointerOffset.y),
                     },
                     positionTransform: null,
-                    isBorrowed: !!(transition === null || transition === void 0 ? void 0 : transition.isBorrowed),
-                }));
+                });
             }
             else if (operation === "insert" || operation === "reorder") {
-                setTransition((transition) => ({
+                setTransition({
                     operation,
                     interactionType,
                     itemId: draggableItem.id,
                     sizeTransform: dropTarget ? getItemSize(dropTarget) : originalSizeRef.current,
                     positionTransform: { x: coordinates.x - pointerOffset.x, y: coordinates.y - pointerOffset.y },
-                    isBorrowed: !!(transition === null || transition === void 0 ? void 0 : transition.isBorrowed),
-                }));
+                    hasDropTarget: !!dropTarget,
+                });
             }
         }
     }
     useDragSubscription("start", (detail) => updateTransition(detail));
     useDragSubscription("update", (detail) => updateTransition(detail));
-    useDragSubscription("submit", () => setTransition(null));
-    useDragSubscription("discard", () => setTransition(null));
-    useDragSubscription("acquire", (detail) => {
-        if (detail.draggableItem.id === item.id) {
-            setTransition((transition) => transition && { ...transition, isBorrowed: true });
-        }
+    useDragSubscription("submit", () => {
+        setTransition(null);
+        setIsHidden(false);
+        muteEventsRef.current = false;
+    });
+    useDragSubscription("discard", () => {
+        setTransition(null);
+        setIsHidden(false);
+        muteEventsRef.current = false;
     });
     // During the transition listen to pointer move and pointer up events to update/submit transition.
     const transitionInteractionType = (_a = transition === null || transition === void 0 ? void 0 : transition.interactionType) !== null && _a !== void 0 ? _a : null;
@@ -151,7 +155,9 @@ 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;
     }
     function onHandleKeyDown(operation, event) {
         const canInsert = transition && operation === "drag" && !placed;
@@ -187,10 +193,10 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         }
     }
     function onBlur() {
-        // When drag- or resize handle loses focus the transition must be submitted with two exceptions:
+        // When drag- or resize handle on palette or board item loses focus the transition must be submitted with two exceptions:
         // 1. If the last interaction is not "keyboard" (the user clicked on another handle issuing a new transition);
-        // 2. If the item is borrowed (in that case the focus moves to the acquired item which is expected).
-        if (transition && transition.interactionType === "keyboard" && !transition.isBorrowed) {
+        // 2. If the item is acquired by the board (in that case the focus moves to the board item which is expected, palette item is hidden and all events handlers must be muted).
+        if (transition && transition.interactionType === "keyboard" && !muteEventsRef.current) {
             draggableApi.submitTransition();
         }
     }
@@ -227,22 +233,19 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     if (inTransition) {
         itemTransitionClassNames.push(styles.inTransition);
     }
-    if (transition) {
+    if (transition && transition.interactionType === "pointer") {
         // Adjust the dragged/resized item to the pointer's location.
-        if (transition.interactionType === "pointer") {
-            itemTransitionClassNames.push(transition.operation === "resize" ? styles.resized : styles.dragged);
-            itemTransitionStyle.left = (_c = transition.positionTransform) === null || _c === void 0 ? void 0 : _c.x;
-            itemTransitionStyle.top = (_d = transition.positionTransform) === null || _d === void 0 ? void 0 : _d.y;
-            itemTransitionStyle.width = (_e = transition.sizeTransform) === null || _e === void 0 ? void 0 : _e.width;
-            itemTransitionStyle.height = (_f = transition.sizeTransform) === null || _f === void 0 ? void 0 : _f.height;
-            itemTransitionStyle.pointerEvents = "none";
-        }
-        // Make the borrowed item dimmed.
-        else if (transition.isBorrowed) {
-            itemTransitionClassNames.push(styles.borrowed);
-        }
+        itemTransitionClassNames.push(transition.operation === "resize" ? styles.resized : styles.dragged);
+        itemTransitionStyle.left = (_c = transition.positionTransform) === null || _c === void 0 ? void 0 : _c.x;
+        itemTransitionStyle.top = (_d = transition.positionTransform) === null || _d === void 0 ? void 0 : _d.y;
+        itemTransitionStyle.width = (_e = transition.sizeTransform) === null || _e === void 0 ? void 0 : _e.width;
+        itemTransitionStyle.height = (_f = transition.sizeTransform) === null || _f === void 0 ? void 0 : _f.height;
+        itemTransitionStyle.pointerEvents = "none";
+    }
+    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);
@@ -265,12 +268,12 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     useImperativeHandle(ref, () => ({
         focusDragHandle: () => { var _a; return (_a = dragHandleRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
     }));
-    const isActive = (!!transition && !transition.isBorrowed) || !!acquired;
+    const isActive = (!!transition && !isHidden) || !!acquired;
     const shouldUsePortal = ((transition === null || transition === void 0 ? void 0 : transition.operation) === "insert" || (transition === null || transition === void 0 ? void 0 : transition.operation) === "reorder") &&
         (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/item-container/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_lljvd_1nttw_1",
-  "inTransition": "awsui_inTransition_lljvd_1nttw_7",
-  "transformed": "awsui_transformed_lljvd_1nttw_12",
-  "removed": "awsui_removed_lljvd_1nttw_17",
-  "dragged": "awsui_dragged_lljvd_1nttw_21",
-  "resized": "awsui_resized_lljvd_1nttw_26",
-  "borrowed": "awsui_borrowed_lljvd_1nttw_31"
+  "root": "awsui_root_lljvd_1jk2l_1",
+  "inTransition": "awsui_inTransition_lljvd_1jk2l_7",
+  "transformed": "awsui_transformed_lljvd_1jk2l_12",
+  "removed": "awsui_removed_lljvd_1jk2l_17",
+  "dragged": "awsui_dragged_lljvd_1jk2l_21",
+  "resized": "awsui_resized_lljvd_1jk2l_26",
+  "hidden": "awsui_hidden_lljvd_1jk2l_31"
 };
   

package/internal/item-container/styles.scoped.css

@@ -1,33 +1,33 @@
-.awsui_root_lljvd_1nttw_1:not(#\9) {
+.awsui_root_lljvd_1jk2l_1:not(#\9) {
   touch-action: none;
   position: relative;
   height: 100%;
 }
 
-.awsui_inTransition_lljvd_1nttw_7:not(#\9) {
+.awsui_inTransition_lljvd_1jk2l_7:not(#\9) {
   transition: transform 200ms;
   transition-timing-function: ease;
 }
 
-.awsui_transformed_lljvd_1nttw_12:not(#\9) {
+.awsui_transformed_lljvd_1jk2l_12:not(#\9) {
   position: absolute;
   z-index: 1;
 }
 
-.awsui_removed_lljvd_1nttw_17:not(#\9) {
+.awsui_removed_lljvd_1jk2l_17:not(#\9) {
   display: none;
 }
 
-.awsui_dragged_lljvd_1nttw_21:not(#\9) {
+.awsui_dragged_lljvd_1jk2l_21:not(#\9) {
   z-index: 2000;
   position: fixed;
 }
 
-.awsui_resized_lljvd_1nttw_26:not(#\9) {
+.awsui_resized_lljvd_1jk2l_26:not(#\9) {
   z-index: 2000;
   position: absolute;
 }
 
-.awsui_borrowed_lljvd_1nttw_31:not(#\9) {
+.awsui_hidden_lljvd_1jk2l_31:not(#\9) {
   display: none;
 }

package/internal/item-container/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_lljvd_1nttw_1",
-  "inTransition": "awsui_inTransition_lljvd_1nttw_7",
-  "transformed": "awsui_transformed_lljvd_1nttw_12",
-  "removed": "awsui_removed_lljvd_1nttw_17",
-  "dragged": "awsui_dragged_lljvd_1nttw_21",
-  "resized": "awsui_resized_lljvd_1nttw_26",
-  "borrowed": "awsui_borrowed_lljvd_1nttw_31"
+  "root": "awsui_root_lljvd_1jk2l_1",
+  "inTransition": "awsui_inTransition_lljvd_1jk2l_7",
+  "transformed": "awsui_transformed_lljvd_1jk2l_12",
+  "removed": "awsui_removed_lljvd_1jk2l_17",
+  "dragged": "awsui_dragged_lljvd_1jk2l_21",
+  "resized": "awsui_resized_lljvd_1jk2l_26",
+  "hidden": "awsui_hidden_lljvd_1jk2l_31"
 };
   

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "b4c8f266f6f1ed79280c9224722081597f6f8aed"
+  "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.29",
+  "version": "3.0.31",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/board-components.git"