@cloudscape-design/board-components 3.0.0

package/board/internal.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+import { useContainerColumns } from "../internal/breakpoints";
+import { TRANSITION_DURATION_MS } from "../internal/constants";
+import { useDragSubscription } from "../internal/dnd-controller/controller";
+import Grid from "../internal/grid";
+import { ItemContainer } from "../internal/item-container";
+import { LayoutEngine } from "../internal/layout-engine/engine";
+import LiveRegion from "../internal/live-region";
+import { ScreenReaderGridNavigation } from "../internal/screenreader-grid-navigation";
+import { createPlaceholdersLayout, getDefaultColumnSpan, getDefaultRowSpan, getMinColumnSpan, getMinRowSpan, interpretItems, } from "../internal/utils/layout";
+import { Position } from "../internal/utils/position";
+import { useAutoScroll } from "../internal/utils/use-auto-scroll";
+import { useMergeRefs } from "../internal/utils/use-merge-refs";
+import Placeholder from "./placeholder";
+import styles from "./styles.css.js";
+import { selectTransitionRows, useTransition } from "./transition";
+import { announcementToString } from "./utils/announcements";
+import { createTransforms } from "./utils/create-transforms";
+import { createItemsChangeEvent } from "./utils/events";
+export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStrings, __internalRootRef, }) {
+    var _a, _b;
+    const containerAccessRef = useRef(null);
+    const [columns, containerQueryRef] = useContainerColumns();
+    const containerRef = useMergeRefs(containerAccessRef, containerQueryRef);
+    const itemContainerRef = useRef({});
+    const autoScrollHandlers = useAutoScroll();
+    const [transitionState, dispatch] = useTransition();
+    const transition = transitionState.transition;
+    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;
+    // Use previous items while remove transition is in progress.
+    items = (_b = removeTransition === null || removeTransition === void 0 ? void 0 : removeTransition.items) !== null && _b !== void 0 ? _b : items;
+    // The acquired item is the one being inserting at the moment but not submitted yet.
+    // It needs to be included to the layout to be a part of layout shifts and rendering.
+    items = acquiredItem ? [...items, acquiredItem] : items;
+    const itemsLayout = interpretItems(items, columns);
+    const layoutItemById = new Map(itemsLayout.items.map((item) => [item.id, item]));
+    const layoutItemIndexById = new Map(itemsLayout.items.map((item, index) => [item.id, index]));
+    // Items and layout items must maintain the same order visually, in the DOM and in the data
+    // to ensure on-change events and tab order work as expected.
+    items = [...items].sort((a, b) => { var _a, _b; return ((_a = layoutItemIndexById.get(a.id)) !== null && _a !== void 0 ? _a : -1) - ((_b = layoutItemIndexById.get(b.id)) !== null && _b !== void 0 ? _b : -1); });
+    // When an item gets acquired or removed the focus needs to be dispatched on the next render.
+    const focusNextRenderIndexRef = useRef(null);
+    const focusNextRenderIdRef = useRef(null);
+    useEffect(() => {
+        var _a, _b, _c;
+        const focusTarget = (_a = focusNextRenderIdRef.current) !== null && _a !== void 0 ? _a : (_c = items[(_b = focusNextRenderIndexRef.current) !== null && _b !== void 0 ? _b : -1]) === null || _c === void 0 ? void 0 : _c.id;
+        if (focusTarget) {
+            itemContainerRef.current[focusTarget].focusDragHandle();
+        }
+        focusNextRenderIndexRef.current = null;
+        focusNextRenderIdRef.current = null;
+    });
+    // Submit scheduled removal after a delay to let animations play.
+    useEffect(() => {
+        if (!removeTransition) {
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            dispatch({ type: "submit" });
+            const removedItemIndex = items.findIndex((it) => it.id === removeTransition.removedItem.id);
+            const nextIndexToFocus = removedItemIndex !== items.length - 1 ? removedItemIndex : items.length - 2;
+            focusNextRenderIndexRef.current = nextIndexToFocus;
+        }, TRANSITION_DURATION_MS);
+        return () => clearTimeout(timeoutId);
+    }, [removeTransition, items]);
+    const rows = selectTransitionRows(transitionState) || itemsLayout.rows;
+    const placeholdersLayout = createPlaceholdersLayout(rows, columns);
+    function isElementOverBoard(draggableElement) {
+        const board = containerAccessRef.current;
+        const boardContains = (target) => board === target || board.contains(target);
+        const rect = draggableElement.getBoundingClientRect();
+        return (boardContains(document.elementFromPoint(rect.left, rect.top)) ||
+            boardContains(document.elementFromPoint(rect.right, rect.top)) ||
+            boardContains(document.elementFromPoint(rect.right, rect.bottom)) ||
+            boardContains(document.elementFromPoint(rect.left, rect.bottom)));
+    }
+    useDragSubscription("start", ({ operation, interactionType, draggableItem, draggableElement, collisionIds }) => {
+        dispatch({
+            type: "init",
+            operation,
+            interactionType,
+            itemsLayout,
+            // TODO: resolve any
+            // The code only works assuming the board can take any draggable.
+            // If draggables can be of different types a check of some sort is required here.
+            draggableItem: draggableItem,
+            draggableElement,
+            collisionIds: interactionType === "keyboard" || isElementOverBoard(draggableElement) ? collisionIds : [],
+        });
+        autoScrollHandlers.addPointerEventHandlers();
+    });
+    useDragSubscription("update", ({ interactionType, collisionIds, positionOffset, draggableElement }) => {
+        dispatch({
+            type: "update-with-pointer",
+            collisionIds: interactionType === "keyboard" || isElementOverBoard(draggableElement) ? collisionIds : [],
+            positionOffset,
+        });
+    });
+    useDragSubscription("submit", () => {
+        dispatch({ type: "submit" });
+        autoScrollHandlers.removePointerEventHandlers();
+        if (!transition) {
+            throw new Error("Invariant violation: no transition.");
+        }
+        if (!transition.layoutShift ||
+            transition.layoutShift.conflicts.length > 0 ||
+            transition.layoutShift.moves.length === 0) {
+            return null;
+        }
+        // Commit new layout for insert case.
+        if (transition.operation === "insert") {
+            onItemsChange(createItemsChangeEvent([...items, transition.draggableItem], transition.layoutShift));
+        }
+        // Commit new layout for reorder/resize case.
+        else {
+            onItemsChange(createItemsChangeEvent(items, transition.layoutShift));
+        }
+    });
+    useDragSubscription("discard", () => {
+        dispatch({ type: "discard" });
+        autoScrollHandlers.removePointerEventHandlers();
+    });
+    useDragSubscription("acquire", ({ droppableId, draggableItem }) => {
+        const placeholder = placeholdersLayout.items.find((it) => it.id === droppableId);
+        // If missing then it does not belong to this board.
+        if (!placeholder) {
+            return;
+        }
+        dispatch({
+            type: "acquire-item",
+            position: new Position({ x: placeholder.x, y: placeholder.y }),
+            layoutElement: containerAccessRef.current,
+        });
+        focusNextRenderIdRef.current = draggableItem.id;
+    });
+    const removeItemAction = (removedItem) => {
+        dispatch({ type: "init-remove", items, itemsLayout, removedItem });
+        const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id).getLayoutShift();
+        onItemsChange(createItemsChangeEvent(items, layoutShift));
+    };
+    function focusItem(itemId) {
+        itemContainerRef.current[itemId].focusDragHandle();
+    }
+    function onItemMove(direction) {
+        if (transition) {
+            dispatch({ type: "update-with-keyboard", direction });
+            autoScrollHandlers.scheduleActiveElementScrollIntoView(TRANSITION_DURATION_MS);
+        }
+    }
+    const announcement = transitionAnnouncement
+        ? announcementToString(transitionAnnouncement, items, i18nStrings, columns)
+        : "";
+    return (_jsxs("div", { ref: __internalRootRef, children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: i18nStrings.navigationItemAriaLabel, onActivateItem: focusItem }), _jsx("div", { ref: containerRef, className: clsx(styles.root, { [styles.empty]: rows === 0 }), children: rows > 0 ? (_jsx(Grid, { columns: columns, rows: rows, layout: [...placeholdersLayout.items, ...itemsLayout.items], children: (gridContext) => {
+                        var _a;
+                        const layoutShift = (_a = transition === null || transition === void 0 ? void 0 : transition.layoutShift) !== null && _a !== void 0 ? _a : removeTransition === null || removeTransition === void 0 ? void 0 : removeTransition.layoutShift;
+                        const transforms = layoutShift ? createTransforms(itemsLayout, layoutShift.moves, gridContext) : {};
+                        // Exclude drag target from transforms.
+                        if (transition && transition.interactionType === "pointer") {
+                            delete transforms[transition.draggableItem.id];
+                        }
+                        const children = [];
+                        /* Placeholders are rendered even when there is no transition to support the first collisions check. */
+                        placeholdersLayout.items.forEach((placeholder) => {
+                            var _a;
+                            return children.push(_jsx(Placeholder, { id: placeholder.id, state: transition ? (((_a = transition.collisionIds) === null || _a === void 0 ? void 0 : _a.has(placeholder.id)) ? "hover" : "active") : "default", gridContext: gridContext, columns: columns }, placeholder.id));
+                        });
+                        items.forEach((item) => {
+                            const layoutItem = layoutItemById.get(item.id);
+                            const isResizing = (transition === null || transition === void 0 ? void 0 : transition.operation) === "resize" && (transition === null || transition === void 0 ? void 0 : transition.draggableItem.id) === item.id;
+                            const itemSize = layoutItem !== null && layoutItem !== void 0 ? layoutItem : {
+                                width: getDefaultColumnSpan(item, columns),
+                                height: getDefaultRowSpan(item),
+                            };
+                            const itemMaxSize = isResizing && layoutItem ? { width: columns - layoutItem.x, height: 999 } : itemSize;
+                            children.push(_jsx(ItemContainer, { ref: (elem) => {
+                                    if (elem) {
+                                        itemContainerRef.current[item.id] = elem;
+                                    }
+                                    else {
+                                        delete itemContainerRef.current[item.id];
+                                    }
+                                }, item: item, transform: transforms[item.id], inTransition: !!layoutShift, placed: true, acquired: item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), getItemSize: () => ({
+                                    width: gridContext.getWidth(itemSize.width),
+                                    minWidth: gridContext.getWidth(getMinColumnSpan(item, columns)),
+                                    maxWidth: gridContext.getWidth(itemMaxSize.width),
+                                    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));
+                        });
+                        return children;
+                    } })) : (empty) }), _jsx(LiveRegion, { children: announcement })] }));
+}

package/board/placeholder.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { GridContext } from "../internal/grid/interfaces";
+export type PlaceholderState = "default" | "active" | "hover";
+export interface PlaceholderProps {
+    id: string;
+    state: PlaceholderState;
+    gridContext: GridContext;
+    columns: number;
+}
+export default function Placeholder({ id, state, gridContext, columns }: PlaceholderProps): JSX.Element;

package/board/placeholder.js

@@ -0,0 +1,24 @@
+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 clsx from "clsx";
+import { useRef } from "react";
+import { useDroppable } from "../internal/dnd-controller/controller";
+import { getDefaultColumnSpan, getDefaultRowSpan } from "../internal/utils/layout";
+import styles from "./styles.css.js";
+export default function Placeholder({ id, state, gridContext, columns }) {
+    const ref = useRef(null);
+    const dropTargetContext = {
+        scale: (item, size) => {
+            var _a, _b;
+            const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : getDefaultColumnSpan(item, columns);
+            const height = (_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : getDefaultRowSpan(item);
+            return {
+                width: gridContext.getWidth(width),
+                height: gridContext.getHeight(height),
+            };
+        },
+    };
+    useDroppable({ itemId: id, context: dropTargetContext, getElement: () => ref.current });
+    return _jsx("div", { ref: ref, className: clsx(styles.placeholder, styles[`placeholder--${state}`]) });
+}

package/board/styles.css.js

@@ -0,0 +1,10 @@
+
+    import './styles.scoped.css';
+    export default {
+  "placeholder": "awsui_placeholder_1h7dk_4221b_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_4221b_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_4221b_8",
+  "root": "awsui_root_1h7dk_4221b_12",
+  "empty": "awsui_empty_1h7dk_4221b_16"
+};
+  

package/board/styles.scoped.css

@@ -0,0 +1,23 @@
+.awsui_placeholder_1h7dk_4221b_1:not(#\9) {
+  border-radius: var(--border-radius-container-1aveko, 0px);
+  height: 100%;
+}
+.awsui_placeholder--active_1h7dk_4221b_5:not(#\9) {
+  background-color: var(--color-board-placeholder-active-03p6jc, #d5dbdb);
+}
+.awsui_placeholder--hover_1h7dk_4221b_8:not(#\9) {
+  background-color: var(--color-board-placeholder-hover-82yrwq, #99cbe4);
+}
+
+.awsui_root_1h7dk_4221b_12:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_empty_1h7dk_4221b_16:not(#\9) {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--space-scaled-m-pv0fmt, 16px) var(--space-scaled-l-t03y3z, 20px) var(--space-scaled-l-t03y3z, 20px);
+  color: var(--color-text-empty-izapdt, #687078);
+  display: flex;
+  justify-content: center;
+}

package/board/styles.selectors.js

@@ -0,0 +1,11 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "placeholder": "awsui_placeholder_1h7dk_4221b_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_4221b_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_4221b_8",
+  "root": "awsui_root_1h7dk_4221b_12",
+  "empty": "awsui_empty_1h7dk_4221b_16"
+};
+  

package/board/transition.d.ts

@@ -0,0 +1,50 @@
+import { Dispatch } from "react";
+import { InteractionType, Operation } from "../internal/dnd-controller/controller";
+import { BoardItemDefinitionBase, Direction, GridLayout, ItemId } from "../internal/interfaces";
+import { Coordinates } from "../internal/utils/coordinates";
+import { Position } from "../internal/utils/position";
+import { BoardProps, RemoveTransition, Transition, TransitionAnnouncement } from "./interfaces";
+export interface TransitionState<D> {
+    transition: null | Transition<D>;
+    removeTransition: null | RemoveTransition<D>;
+    announcement: null | TransitionAnnouncement;
+}
+export type Action<D> = InitAction<D> | InitRemoveAction<D> | SubmitAction | DiscardAction | UpdateWithPointerAction | UpdateWithKeyboardAction | AcquireItemAction;
+interface InitAction<D> {
+    type: "init";
+    operation: Operation;
+    interactionType: InteractionType;
+    itemsLayout: GridLayout;
+    draggableItem: BoardItemDefinitionBase<D>;
+    draggableElement: HTMLElement;
+    collisionIds: readonly ItemId[];
+}
+interface InitRemoveAction<D> {
+    type: "init-remove";
+    items: readonly BoardProps.Item<D>[];
+    removedItem: BoardItemDefinitionBase<D>;
+    itemsLayout: GridLayout;
+}
+interface SubmitAction {
+    type: "submit";
+}
+interface DiscardAction {
+    type: "discard";
+}
+interface UpdateWithPointerAction {
+    type: "update-with-pointer";
+    collisionIds: readonly ItemId[];
+    positionOffset: Coordinates;
+}
+interface UpdateWithKeyboardAction {
+    type: "update-with-keyboard";
+    direction: Direction;
+}
+interface AcquireItemAction {
+    type: "acquire-item";
+    position: Position;
+    layoutElement: HTMLElement;
+}
+export declare function useTransition<D>(): [TransitionState<D>, Dispatch<Action<D>>];
+export declare function selectTransitionRows<D>(state: TransitionState<D>): number;
+export {};

package/board/transition.js

@@ -0,0 +1,211 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useReducer } from "react";
+import { LayoutEngine } from "../internal/layout-engine/engine";
+import { Coordinates } from "../internal/utils/coordinates";
+import { getDefaultColumnSpan, getDefaultRowSpan, getMinColumnSpan, getMinRowSpan } from "../internal/utils/layout";
+import { Position } from "../internal/utils/position";
+import { createOperationAnnouncement } from "./utils/announcements";
+import { getHoveredRect } from "./utils/get-hovered-rect";
+import { getInsertionDirection, getLayoutPlaceholders, getLayoutRows, getLayoutShift } from "./utils/layout";
+import { appendMovePath, appendResizePath } from "./utils/path";
+export function useTransition() {
+    return useReducer((transitionReducer), { transition: null, removeTransition: null, announcement: null });
+}
+export function selectTransitionRows(state) {
+    return state.transition ? getLayoutRows(state.transition) : 0;
+}
+function transitionReducer(state, action) {
+    switch (action.type) {
+        case "init":
+            return initTransition(action);
+        case "init-remove":
+            return initRemoveTransition(action);
+        case "submit":
+            return submitTransition(state);
+        case "discard":
+            return discardTransition(state);
+        case "update-with-pointer":
+            return updateTransitionWithPointerEvent(state, action);
+        case "update-with-keyboard":
+            return updateTransitionWithKeyboardEvent(state, action);
+        case "acquire-item":
+            return acquireTransitionItem(state, action);
+    }
+}
+function initTransition({ operation, interactionType, itemsLayout, draggableItem, draggableElement, collisionIds, }) {
+    const transition = {
+        operation,
+        interactionType,
+        itemsLayout,
+        insertionDirection: null,
+        draggableItem,
+        draggableElement,
+        acquiredItem: null,
+        collisionIds: new Set(),
+        layoutShift: null,
+        path: [],
+    };
+    const placeholdersLayout = getLayoutPlaceholders(transition);
+    const itemBelongsToBoard = itemsLayout.items.find((it) => it.id === draggableItem.id);
+    const collisionRect = getHoveredRect(collisionIds, placeholdersLayout.items);
+    const appendPath = operation === "resize" ? appendResizePath : appendMovePath;
+    const path = itemBelongsToBoard ? appendPath([], collisionRect) : [];
+    return {
+        transition: { ...transition, path },
+        removeTransition: null,
+        announcement: itemBelongsToBoard ? { type: "dnd-started", item: draggableItem, operation } : null,
+    };
+}
+function initRemoveTransition({ items, removedItem, itemsLayout }) {
+    const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id).refloat().getLayoutShift();
+    const removeTransition = { items, removedItem, layoutShift };
+    return { transition: null, removeTransition, announcement: null };
+}
+function submitTransition(state) {
+    var _a;
+    const { transition, removeTransition } = state;
+    if (removeTransition) {
+        const disturbed = new Set(removeTransition.layoutShift.moves.map((move) => move.itemId));
+        disturbed.delete(removeTransition.removedItem.id);
+        return {
+            transition: null,
+            removeTransition: null,
+            announcement: { type: "item-removed", item: removeTransition.removedItem, disturbed },
+        };
+    }
+    if (!transition) {
+        throw new Error("Invariant violation: no transition.");
+    }
+    const { operation, itemsLayout, draggableItem: item, acquiredItem } = transition;
+    const itemBelongsToBoard = item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id) || itemsLayout.items.some((it) => it.id === item.id);
+    return ((_a = transition.layoutShift) === null || _a === void 0 ? void 0 : _a.conflicts.length) === 0
+        ? {
+            transition: null,
+            removeTransition: null,
+            announcement: itemBelongsToBoard ? { type: "dnd-committed", item, operation } : null,
+        }
+        : {
+            transition: null,
+            removeTransition: null,
+            announcement: itemBelongsToBoard ? { type: "dnd-discarded", item, operation } : null,
+        };
+}
+function discardTransition(state) {
+    const { transition, removeTransition } = state;
+    if (removeTransition) {
+        throw new Error("Can't discard remove transition.");
+    }
+    if (!transition) {
+        throw new Error("Invariant violation: no transition.");
+    }
+    const { operation, itemsLayout, draggableItem: item, acquiredItem } = transition;
+    const itemBelongsToBoard = item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id) || itemsLayout.items.some((it) => it.id === item.id);
+    return {
+        transition: null,
+        removeTransition: null,
+        announcement: itemBelongsToBoard ? { type: "dnd-discarded", item, operation } : null,
+    };
+}
+function updateTransitionWithPointerEvent(state, { collisionIds, positionOffset }) {
+    var _a, _b, _c;
+    const { transition } = state;
+    if (!transition) {
+        throw new Error("Invariant violation: no transition.");
+    }
+    const layout = (_b = (_a = transition.layoutShift) === null || _a === void 0 ? void 0 : _a.next) !== null && _b !== void 0 ? _b : transition.itemsLayout;
+    const layoutItem = layout.items.find((it) => it.id === transition.draggableItem.id);
+    const itemWidth = layoutItem ? layoutItem.width : getDefaultColumnSpan(transition.draggableItem, layout.columns);
+    const itemHeight = layoutItem ? layoutItem.height : getDefaultRowSpan(transition.draggableItem);
+    const itemSize = itemWidth * itemHeight;
+    const isOutOfBoundaries = transition.operation !== "resize" ? collisionIds.length < itemSize : collisionIds.length === 0;
+    if (isOutOfBoundaries) {
+        return {
+            transition: { ...transition, collisionIds: new Set(), layoutShift: null, insertionDirection: null },
+            removeTransition: null,
+            announcement: null,
+        };
+    }
+    const placeholdersLayout = getLayoutPlaceholders(transition);
+    const collisionRect = getHoveredRect(collisionIds, placeholdersLayout.items);
+    const appendPath = transition.operation === "resize" ? appendResizePath : appendMovePath;
+    const path = appendPath(transition.path, collisionRect);
+    const insertionDirection = (_c = transition.insertionDirection) !== null && _c !== void 0 ? _c : getInsertionDirection(positionOffset);
+    const layoutShift = getLayoutShift(transition, path, insertionDirection);
+    return {
+        transition: { ...transition, collisionIds: new Set(collisionIds), layoutShift, path, insertionDirection },
+        removeTransition: null,
+        announcement: null,
+    };
+}
+function updateTransitionWithKeyboardEvent(state, { direction }) {
+    const { transition } = state;
+    if (!transition) {
+        throw new Error("Invariant violation: no transition.");
+    }
+    const updateManualItemTransition = (transition, direction) => {
+        var _a, _b;
+        const xDelta = direction === "left" ? -1 : direction === "right" ? 1 : 0;
+        const yDelta = direction === "up" ? -1 : direction === "down" ? 1 : 0;
+        const lastPosition = transition.path[transition.path.length - 1];
+        const nextPosition = new Position({ x: lastPosition.x + xDelta, y: lastPosition.y + yDelta });
+        const nextPath = [...transition.path, nextPosition];
+        // Check resizing below min size.
+        const layout = (_b = (_a = transition.layoutShift) === null || _a === void 0 ? void 0 : _a.next) !== null && _b !== void 0 ? _b : transition.itemsLayout;
+        const layoutItem = layout.items.find((it) => it.id === transition.draggableItem.id);
+        const minWidth = getMinColumnSpan(transition.draggableItem, transition.itemsLayout.columns);
+        const minHeight = getMinRowSpan(transition.draggableItem);
+        if (transition.operation === "resize" &&
+            layoutItem &&
+            (layoutItem.width + xDelta < minWidth || layoutItem.height + yDelta < minHeight)) {
+            return state;
+        }
+        try {
+            const layoutShift = getLayoutShift(transition, nextPath);
+            const nextTransition = { ...transition, layoutShift, path: nextPath };
+            return {
+                transition: nextTransition,
+                removeTransition: null,
+                announcement: createOperationAnnouncement(nextTransition, direction),
+            };
+        }
+        catch (e) {
+            // Can't create next layout because the next path is out of bounds.
+            return state;
+        }
+    };
+    switch (direction) {
+        case "left":
+            return updateManualItemTransition(transition, "left");
+        case "right":
+            return updateManualItemTransition(transition, "right");
+        case "up":
+            return updateManualItemTransition(transition, "up");
+        case "down":
+            return updateManualItemTransition(transition, "down");
+    }
+}
+function acquireTransitionItem(state, { position, layoutElement }) {
+    const { transition } = state;
+    if (!transition) {
+        throw new Error("Invariant violation: no transition.");
+    }
+    const { columns } = transition.itemsLayout;
+    const layoutRect = layoutElement.getBoundingClientRect();
+    const itemRect = transition.draggableElement.getBoundingClientRect();
+    const offset = new Coordinates({ x: itemRect.x - layoutRect.x, y: itemRect.y - layoutRect.y });
+    const insertionDirection = getInsertionDirection(offset);
+    // Update original insertion position if the item can't fit into the layout by width.
+    const width = getDefaultColumnSpan(transition.draggableItem, columns);
+    position = new Position({ x: Math.min(columns - width, position.x), y: position.y });
+    const path = [...transition.path, position];
+    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 };
+    return {
+        transition: nextTransition,
+        removeTransition: null,
+        announcement: createOperationAnnouncement(nextTransition, null),
+    };
+}

package/board/utils/announcements.d.ts

@@ -0,0 +1,10 @@
+import { Direction } from "../../internal/interfaces";
+import { BoardProps, DndActionAnnouncement, Transition, TransitionAnnouncement } from "../interfaces";
+/**
+ * Creates an announcement object describing the last user move.
+ */
+export declare function createOperationAnnouncement<D>(transition: Transition<D>, direction: null | Direction): null | DndActionAnnouncement;
+/**
+ * Applies i18nStrings to the announcement object to produce a string for the live region.
+ */
+export declare function announcementToString<D>(announcement: TransitionAnnouncement, items: readonly BoardProps.Item<D>[], i18nStrings: BoardProps.I18nStrings<D>, columns: number): string;

package/board/utils/announcements.js

@@ -0,0 +1,98 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { getMinColumnSpan, getMinRowSpan } from "../../internal/utils/layout";
+/**
+ * Creates an announcement object describing the last user move.
+ */
+export function createOperationAnnouncement(transition, direction) {
+    var _a, _b;
+    const { operation, layoutShift, itemsLayout } = transition;
+    const targetItem = (_a = itemsLayout.items.find((it) => it.id === transition.draggableItem.id)) !== null && _a !== void 0 ? _a : null;
+    if (!layoutShift) {
+        return null;
+    }
+    const firstMove = layoutShift.moves[0];
+    const targetId = (_b = firstMove === null || firstMove === void 0 ? void 0 : firstMove.itemId) !== null && _b !== void 0 ? _b : targetItem === null || targetItem === void 0 ? void 0 : targetItem.id;
+    if (!targetId) {
+        return null;
+    }
+    const itemMoves = layoutShift.moves.filter((m) => m.itemId === targetId);
+    const lastItemMove = itemMoves[itemMoves.length - 1];
+    const placement = lastItemMove !== null && lastItemMove !== void 0 ? lastItemMove : targetItem;
+    const conflicts = new Set(layoutShift.conflicts);
+    const disturbed = new Set(layoutShift.moves.map((move) => move.itemId));
+    disturbed.delete(targetId);
+    return {
+        type: "dnd-action",
+        item: transition.draggableItem,
+        operation,
+        placement: {
+            x: placement.x,
+            y: placement.y,
+            width: placement.width,
+            height: placement.height,
+        },
+        direction,
+        conflicts,
+        disturbed,
+    };
+}
+/**
+ * Applies i18nStrings to the announcement object to produce a string for the live region.
+ */
+export function announcementToString(announcement, items, i18nStrings, columns) {
+    if (!announcement) {
+        return "";
+    }
+    const item = announcement.item;
+    const toItem = (id) => items.find((it) => (it === null || it === void 0 ? void 0 : it.id) === id);
+    const formatDirection = (direction) => {
+        if (!direction) {
+            return null;
+        }
+        return direction === "left" || direction === "right" ? "horizontal" : "vertical";
+    };
+    function createDndActionAnnouncement(announcement) {
+        const placement = announcement.placement;
+        const direction = formatDirection(announcement.direction);
+        const conflicts = [...announcement.conflicts].map(toItem);
+        const disturbed = [...announcement.disturbed].map(toItem);
+        switch (announcement.operation) {
+            case "reorder":
+                return i18nStrings.liveAnnouncementDndItemReordered({
+                    item,
+                    placement,
+                    direction: direction,
+                    conflicts,
+                    disturbed,
+                });
+            case "resize":
+                return i18nStrings.liveAnnouncementDndItemResized({
+                    item,
+                    placement,
+                    direction: direction,
+                    isMinimalColumnsReached: placement.width === getMinColumnSpan(item, columns),
+                    isMinimalRowsReached: placement.height === getMinRowSpan(item),
+                    conflicts,
+                    disturbed,
+                });
+            case "insert":
+                return i18nStrings.liveAnnouncementDndItemInserted({ item, placement, conflicts, disturbed });
+        }
+    }
+    function createItemRemovedAnnouncement(announcement) {
+        return i18nStrings.liveAnnouncementItemRemoved({ item, disturbed: [...announcement.disturbed].map(toItem) });
+    }
+    switch (announcement.type) {
+        case "dnd-started":
+            return i18nStrings.liveAnnouncementDndStarted(announcement.operation);
+        case "dnd-action":
+            return createDndActionAnnouncement(announcement);
+        case "dnd-committed":
+            return i18nStrings.liveAnnouncementDndCommitted(announcement.operation);
+        case "dnd-discarded":
+            return i18nStrings.liveAnnouncementDndDiscarded(announcement.operation);
+        case "item-removed":
+            return createItemRemovedAnnouncement(announcement);
+    }
+}

package/board/utils/create-transforms.d.ts

@@ -0,0 +1,7 @@
+import { GridContext } from "../../internal/grid/interfaces";
+import { GridLayout, Transform } from "../../internal/interfaces";
+import { CommittedMove } from "../../internal/layout-engine/interfaces";
+/**
+ * Creates a mapping of between items and transforms to be applied while in transition.
+ */
+export declare function createTransforms(grid: GridLayout, moves: readonly CommittedMove[], gridContext: GridContext): Record<string, Transform>;