@cloudscape-design/board-components 3.0.0

package/internal/item-container/index.js

@@ -0,0 +1,262 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { CSS as CSSUtil } from "@dnd-kit/utilities";
+import clsx from "clsx";
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { useDragSubscription, useDraggable, } from "../dnd-controller/controller";
+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 { getNextDroppable } from "./get-next-droppable";
+import styles from "./styles.css.js";
+const Context = createContext(null);
+export function useItemContext() {
+    const ctx = useContext(Context);
+    if (!ctx) {
+        throw new Error("Unable to find BoardItem context.");
+    }
+    return ctx;
+}
+export const ItemContainer = forwardRef(ItemContainerComponent);
+function ItemContainerComponent({ item, placed, acquired, inTransition, transform, getItemSize, onKeyMove, children }, ref) {
+    var _a, _b, _c, _d, _e, _f;
+    const originalSizeRef = useRef({ width: 0, height: 0 });
+    const pointerOffsetRef = useRef(new Coordinates({ x: 0, y: 0 }));
+    const pointerBoundariesRef = useRef(null);
+    const [transition, setTransition] = useState(null);
+    const itemRef = useRef(null);
+    const draggableApi = useDraggable({ item, getElement: () => itemRef.current });
+    const onPointerMove = useThrottledEventHandler((event) => {
+        var _a, _b, _c, _d;
+        const coordinates = Coordinates.fromEvent(event);
+        draggableApi.updateTransition(new Coordinates({
+            x: Math.max(coordinates.x, (_b = (_a = pointerBoundariesRef.current) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : Number.NEGATIVE_INFINITY),
+            y: Math.max(coordinates.y, (_d = (_c = pointerBoundariesRef.current) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : Number.NEGATIVE_INFINITY),
+        }));
+    }, 10);
+    const onPointerUp = useStableEventHandler(() => {
+        onPointerMove.cancel();
+        draggableApi.submitTransition();
+    });
+    function updateTransition({ operation, interactionType, draggableItem, collisionRect, coordinates, dropTarget, }) {
+        if (item.id === draggableItem.id) {
+            const [width, height] = [collisionRect.right - collisionRect.left, collisionRect.bottom - collisionRect.top];
+            const pointerOffset = pointerOffsetRef.current;
+            if (operation === "resize") {
+                setTransition((transition) => ({
+                    operation,
+                    interactionType,
+                    itemId: draggableItem.id,
+                    sizeTransform: {
+                        width: Math.max(getItemSize(null).minWidth, Math.min(getItemSize(null).maxWidth, width - pointerOffset.x)),
+                        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) => ({
+                    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),
+                }));
+            }
+        }
+    }
+    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 });
+        }
+    });
+    // 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;
+    const transitionItemId = (_b = transition === null || transition === void 0 ? void 0 : transition.itemId) !== null && _b !== void 0 ? _b : null;
+    useEffect(() => {
+        if (transitionInteractionType === "pointer" && transitionItemId === item.id) {
+            window.addEventListener("pointermove", onPointerMove);
+            window.addEventListener("pointerup", onPointerUp);
+        }
+        return () => {
+            window.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("pointerup", onPointerUp);
+        };
+    }, [item.id, transitionInteractionType, transitionItemId, onPointerMove, onPointerUp]);
+    function onKeyboardTransitionToggle(operation) {
+        // The acquired item is a copy and does not have the transition state.
+        // However, pressing "Space" or "Enter" on the acquired item must submit the active transition.
+        if (acquired) {
+            return draggableApi.submitTransition();
+        }
+        // Create new transition if missing.
+        if (!transition) {
+            const rect = getNormalizedElementRect(itemRef.current);
+            const coordinates = new Coordinates({
+                x: operation === "drag" ? rect.left : rect.right,
+                y: operation === "drag" ? rect.top : rect.bottom,
+            });
+            if (operation === "drag" && !placed) {
+                draggableApi.start("insert", "keyboard", coordinates);
+            }
+            else if (operation === "drag") {
+                draggableApi.start("reorder", "keyboard", coordinates);
+            }
+            else {
+                draggableApi.start("resize", "keyboard", coordinates);
+            }
+        }
+        // Submit a transition if existing.
+        else {
+            draggableApi.submitTransition();
+        }
+    }
+    function handleInsert(direction) {
+        // Find the closest droppable (in the direction) to the item.
+        const droppables = draggableApi.getDroppables();
+        const nextDroppable = getNextDroppable(itemRef.current, droppables, direction);
+        if (!nextDroppable) {
+            // TODO: add announcement
+            // Context: the keyboard insertion only works when there is some droppable area in the specified direction.
+            // That means that only some arrow keys might work which is confusing for a screen-reader user.
+            // Alternatively, we can consider a multi-step insertion where the user would first explicitly select the desired board.
+            return;
+        }
+        // Notify the respective droppable of the intention to insert the item in it.
+        draggableApi.acquire(nextDroppable);
+    }
+    function onHandleKeyDown(operation, event) {
+        const canInsert = transition && operation === "drag" && !placed;
+        const canNavigate = transition || operation === "drag";
+        // The insert is handled by the item and the navigation is delegated to the containing layout.
+        const move = (direction) => {
+            if (canInsert) {
+                handleInsert(direction);
+            }
+            else if (canNavigate) {
+                onKeyMove === null || onKeyMove === void 0 ? void 0 : onKeyMove(direction);
+            }
+        };
+        const discard = () => {
+            if (transition || acquired) {
+                draggableApi.discardTransition();
+            }
+        };
+        switch (event.key) {
+            case "ArrowUp":
+                return move("up");
+            case "ArrowDown":
+                return move("down");
+            case "ArrowLeft":
+                return move("left");
+            case "ArrowRight":
+                return move("right");
+            case " ":
+            case "Enter":
+                return onKeyboardTransitionToggle(operation);
+            case "Escape":
+                return discard();
+        }
+    }
+    function onBlur() {
+        // When drag- or resize handle loses focus the transition must be discarded 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) {
+            draggableApi.discardTransition();
+        }
+    }
+    function onDragHandlePointerDown(event) {
+        // Calculate the offset between item's top-left corner and the pointer landing position.
+        const rect = itemRef.current.getBoundingClientRect();
+        pointerOffsetRef.current = new Coordinates({ x: event.clientX - rect.left, y: event.clientY - rect.top });
+        originalSizeRef.current = { width: rect.width, height: rect.height };
+        pointerBoundariesRef.current = null;
+        draggableApi.start(!placed ? "insert" : "reorder", "pointer", Coordinates.fromEvent(event));
+    }
+    function onDragHandleKeyDown(event) {
+        onHandleKeyDown("drag", event);
+    }
+    function onResizeHandlePointerDown(event) {
+        // Calculate the offset between item's bottom-right corner and the pointer landing position.
+        const rect = itemRef.current.getBoundingClientRect();
+        pointerOffsetRef.current = new Coordinates({ x: event.clientX - rect.right, y: event.clientY - rect.bottom });
+        originalSizeRef.current = { width: rect.width, height: rect.height };
+        // Calculate boundaries below which the cursor cannot move.
+        const minWidth = getItemSize(null).minWidth;
+        const minHeight = getItemSize(null).minHeight;
+        pointerBoundariesRef.current = new Coordinates({
+            x: event.clientX - rect.width + minWidth,
+            y: event.clientY - rect.height + minHeight,
+        });
+        draggableApi.start("resize", "pointer", Coordinates.fromEvent(event));
+    }
+    function onResizeHandleKeyDown(event) {
+        onHandleKeyDown("resize", event);
+    }
+    const itemTransitionStyle = {};
+    const itemTransitionClassNames = [];
+    if (inTransition) {
+        itemTransitionClassNames.push(styles.inTransition);
+    }
+    if (transition) {
+        // 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);
+        }
+    }
+    if (placed && transform) {
+        // The moved items positions are altered with CSS transform.
+        if (transform.type === "move") {
+            itemTransitionClassNames.push(styles.transformed);
+            itemTransitionStyle.transform = CSSUtil.Transform.toString({
+                x: transform.x,
+                y: transform.y,
+                scaleX: 1,
+                scaleY: 1,
+            });
+            itemTransitionStyle.width = transform.width + "px";
+            itemTransitionStyle.height = transform.height + "px";
+        }
+        // The item is removed from the DOM after animations play.
+        // During the animations the removed item is hidden with styles.
+        if (transform.type === "remove") {
+            itemTransitionClassNames.push(styles.removed);
+        }
+    }
+    const dragHandleRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        focusDragHandle: () => { var _a; return (_a = dragHandleRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+    }));
+    return (_jsx("div", { ref: itemRef, className: clsx(styles.root, ...itemTransitionClassNames), style: itemTransitionStyle, "data-item-id": item.id, onBlur: onBlur, children: _jsx(Context.Provider, { value: {
+                isActive: (!!transition && !transition.isBorrowed) || !!acquired,
+                dragHandle: {
+                    ref: dragHandleRef,
+                    onPointerDown: onDragHandlePointerDown,
+                    onKeyDown: onDragHandleKeyDown,
+                },
+                resizeHandle: placed
+                    ? {
+                        onPointerDown: onResizeHandlePointerDown,
+                        onKeyDown: onResizeHandleKeyDown,
+                    }
+                    : null,
+            }, children: children }) }));
+}

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

@@ -0,0 +1,12 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_lljvd_udubn_1",
+  "inTransition": "awsui_inTransition_lljvd_udubn_7",
+  "transformed": "awsui_transformed_lljvd_udubn_12",
+  "removed": "awsui_removed_lljvd_udubn_17",
+  "dragged": "awsui_dragged_lljvd_udubn_21",
+  "resized": "awsui_resized_lljvd_udubn_26",
+  "borrowed": "awsui_borrowed_lljvd_udubn_31"
+};
+  

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

@@ -0,0 +1,33 @@
+.awsui_root_lljvd_udubn_1:not(#\9) {
+  touch-action: none;
+  position: relative;
+  height: 100%;
+}
+
+.awsui_inTransition_lljvd_udubn_7:not(#\9) {
+  transition: transform 200ms;
+  transition-timing-function: ease;
+}
+
+.awsui_transformed_lljvd_udubn_12:not(#\9) {
+  position: absolute;
+  z-index: 1;
+}
+
+.awsui_removed_lljvd_udubn_17:not(#\9) {
+  display: none;
+}
+
+.awsui_dragged_lljvd_udubn_21:not(#\9) {
+  z-index: 5000;
+  position: fixed;
+}
+
+.awsui_resized_lljvd_udubn_26:not(#\9) {
+  z-index: 5000;
+  position: absolute;
+}
+
+.awsui_borrowed_lljvd_udubn_31:not(#\9) {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,13 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_lljvd_udubn_1",
+  "inTransition": "awsui_inTransition_lljvd_udubn_7",
+  "transformed": "awsui_transformed_lljvd_udubn_12",
+  "removed": "awsui_removed_lljvd_udubn_17",
+  "dragged": "awsui_dragged_lljvd_udubn_21",
+  "resized": "awsui_resized_lljvd_udubn_26",
+  "borrowed": "awsui_borrowed_lljvd_udubn_31"
+};
+  

package/internal/layout-engine/engine-conflicts.d.ts

@@ -0,0 +1,4 @@
+import { ItemId } from "../interfaces";
+import { LayoutEngineGrid } from "./grid";
+import { CommittedMove } from "./interfaces";
+export declare function findConflicts(move: CommittedMove, grid: LayoutEngineGrid): Set<ItemId>;

package/internal/layout-engine/engine-conflicts.js

@@ -0,0 +1,53 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+// Find items that the active item cannot be moved over with the current move.
+export function findConflicts(move, grid) {
+    const conflicts = new Set();
+    const moveTarget = grid.getItem(move.itemId);
+    const direction = `${move.x - moveTarget.x}:${move.y - moveTarget.y}`;
+    switch (direction) {
+        case "-1:0": {
+            const left = Math.max(0, moveTarget.left - 1);
+            for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
+                const block = grid.getCellOverlap(left, y, moveTarget.id);
+                if (block && block.x < left) {
+                    conflicts.add(block.id);
+                }
+            }
+            break;
+        }
+        case "1:0": {
+            const right = Math.min(grid.width - 1, moveTarget.right + 1);
+            for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
+                const block = grid.getCellOverlap(right, y, moveTarget.id);
+                if (block && block.x + block.width - 1 > right) {
+                    conflicts.add(block.id);
+                }
+            }
+            break;
+        }
+        case "0:-1": {
+            const top = Math.max(0, moveTarget.top - 1);
+            for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
+                const block = grid.getCellOverlap(x, top, moveTarget.id);
+                if (block && block.y < top) {
+                    conflicts.add(block.id);
+                }
+            }
+            break;
+        }
+        case "0:1": {
+            const bottom = moveTarget.bottom + 1;
+            for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
+                const block = grid.getCellOverlap(x, bottom, moveTarget.id);
+                if (block && block.y + block.height - 1 > bottom) {
+                    conflicts.add(block.id);
+                }
+            }
+            break;
+        }
+        default:
+            throw new Error(`Invariant violation: unexpected direction ${direction}.`);
+    }
+    return conflicts;
+}

package/internal/layout-engine/engine-step.d.ts

@@ -0,0 +1,5 @@
+import { ItemId } from "../interfaces";
+import { LayoutEngineGrid } from "./grid";
+import { CommittedMove } from "./interfaces";
+export declare function resolveOverlaps(userMove: CommittedMove, grid: LayoutEngineGrid, moves: CommittedMove[], conflicts: Set<ItemId>): void;
+export declare function refloatGrid(grid: LayoutEngineGrid, moves: CommittedMove[], conflicts: Set<ItemId>): void;