@cloudscape-design/board-components 3.0.0

package/internal/debug-tools/parsers.js

@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { Position } from "../utils/position";
+const LETTER_INDICES = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+export function fromMatrix(matrix) {
+    var _a, _b;
+    const items = [];
+    const added = new Set();
+    for (let y = 0; y < matrix.length; y++) {
+        for (let x = 0; x < matrix[y].length; x++) {
+            const ids = matrix[y][x].split("/").map((id) => id.trim());
+            for (const id of ids) {
+                if (id.trim().length === 0) {
+                    continue;
+                }
+                if (!added.has(id)) {
+                    const item = { id, y, x, width: 1, height: 1 };
+                    for (let itemX = x + 1; itemX < matrix[y].length; itemX++) {
+                        if (matrix[y][itemX] === id) {
+                            x++;
+                            item.width++;
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    for (let itemY = y + 1; itemY < matrix.length; itemY++) {
+                        if (matrix[itemY][x] === id) {
+                            item.height++;
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    items.push(item);
+                    added.add(id);
+                }
+            }
+        }
+    }
+    return { items, columns: (_b = (_a = matrix[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0, rows: matrix.length };
+}
+// Path is defined like "A1 A2 B2 C2" where A-C is a column index (A-based) and 1-2 is a row index (1-based).
+export function fromTextPath(textPath, gridArg) {
+    // Parse path.
+    const positions = textPath.split(" ").filter(Boolean);
+    const [start, ...rest] = positions.map((pos) => {
+        const x = LETTER_INDICES.indexOf(pos[0]);
+        const y = parseInt(pos.slice(1)) - 1;
+        return { y, x };
+    });
+    // Find move target.
+    const grid = Array.isArray(gridArg) ? fromMatrix(gridArg) : gridArg;
+    const targets = grid.items.filter((item) => item.y <= start.y && start.y < item.y + item.height && item.x <= start.x && start.x < item.x + item.width);
+    if (targets.length === 0) {
+        throw new Error("No move target corresponding given path.");
+    }
+    if (targets.length > 1) {
+        throw new Error("Multiple move targets corresponding given path.");
+    }
+    const [moveTarget] = targets;
+    // Adjust path to target's top-left point.
+    const yOffset = start.y - moveTarget.y;
+    const xOffset = start.x - moveTarget.x;
+    return { itemId: moveTarget.id, path: rest.map(({ y, x }) => new Position({ y: y - yOffset, x: x - xOffset })) };
+}

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

@@ -0,0 +1,13 @@
+import { DragAndDropData, DragAndDropEvents } from "../controller";
+import { EventEmitter } from "../event-emitter";
+declare class MockController extends EventEmitter<DragAndDropEvents> {
+    start(event: DragAndDropData): void;
+    update(event: DragAndDropData): void;
+    submit(): void;
+    discard(): void;
+}
+export declare const mockController: MockController;
+export declare function useDragSubscription<K extends keyof DragAndDropEvents>(event: K, handler: DragAndDropEvents[K]): void;
+export declare const mockDraggable: any;
+export declare function useDraggable(): any;
+export {};

package/internal/dnd-controller/__mocks__/controller.js

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect } from "react";
+import { vi } from "vitest";
+import { EventEmitter } from "../event-emitter";
+class MockController extends EventEmitter {
+    start(event) {
+        this.emit("start", event);
+    }
+    update(event) {
+        this.emit("update", event);
+    }
+    submit() {
+        this.emit("submit");
+    }
+    discard() {
+        this.emit("discard");
+    }
+}
+export const mockController = new MockController();
+export function useDragSubscription(event, handler) {
+    useEffect(() => mockController.on(event, handler), [event, handler]);
+}
+export const mockDraggable = {
+    start: vi.fn(),
+    updateTransition: vi.fn(),
+    submitTransition: vi.fn(),
+    discardTransition: vi.fn(),
+    getDroppables: vi.fn(),
+};
+export function useDraggable() {
+    return mockDraggable;
+}

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

@@ -0,0 +1,17 @@
+import { ItemId } from "../../internal/interfaces";
+import { Rect } from "../../internal/interfaces";
+import { Coordinates } from "../utils/coordinates";
+import { Operation } from "./controller";
+/**
+ * Produces a rect (in coordinates) to represent the draggable item.
+ */
+export declare function getCollisionRect(operation: Operation, draggableElement: HTMLElement, coordinates: Coordinates): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+/**
+ * Returns IDs of droppables hovered by the draggable rect.
+ */
+export declare function getHoveredDroppables(collisionRect: Rect, droppables: readonly [ItemId, HTMLElement][]): string[];

package/internal/dnd-controller/collision.js

@@ -0,0 +1,32 @@
+import { getGridPlacement, isInside } from "../utils/rects";
+import { getNormalizedElementRect } from "../utils/screen";
+/**
+ * Produces a rect (in coordinates) to represent the draggable item.
+ */
+export function getCollisionRect(operation, draggableElement, coordinates) {
+    const activeRect = getNormalizedElementRect(draggableElement);
+    let collisionRect = { left: 0, top: 0, right: 0, bottom: 0 };
+    if (operation === "reorder") {
+        collisionRect = activeRect;
+    }
+    if (operation === "resize") {
+        collisionRect = { left: activeRect.left, top: activeRect.top, right: coordinates.x, bottom: coordinates.y };
+    }
+    if (operation === "insert") {
+        collisionRect = {
+            left: coordinates.x,
+            top: coordinates.y,
+            right: coordinates.x + activeRect.width,
+            bottom: coordinates.y + activeRect.height,
+        };
+    }
+    return collisionRect;
+}
+/**
+ * Returns IDs of droppables hovered by the draggable rect.
+ */
+export function getHoveredDroppables(collisionRect, droppables) {
+    const droppableRects = droppables.map(([, element]) => getNormalizedElementRect(element));
+    const bounds = getGridPlacement(collisionRect, droppableRects);
+    return droppables.filter((_, index) => isInside(droppableRects[index], bounds)).map(([droppableId]) => droppableId);
+}

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

@@ -0,0 +1,64 @@
+import { BoardItemDefinitionBase, ItemId, Rect } from "../interfaces";
+import { Coordinates } from "../utils/coordinates";
+type Item = BoardItemDefinitionBase<unknown>;
+export type Operation = "reorder" | "resize" | "insert";
+export type InteractionType = "pointer" | "keyboard";
+/**
+ * Represents the relations between droppables and draggables.
+ *
+ * The `scale` function transforms draggable's width/height in relative units
+ * to the absolute width/height in pixels the droppable expects.
+ */
+export interface DropTargetContext {
+    scale: (item: Item, size?: {
+        width: number;
+        height: number;
+    }) => {
+        width: number;
+        height: number;
+    };
+}
+export interface DragAndDropData {
+    operation: Operation;
+    interactionType: InteractionType;
+    draggableItem: Item;
+    draggableElement: HTMLElement;
+    positionOffset: Coordinates;
+    coordinates: Coordinates;
+    collisionRect: Rect;
+    collisionIds: ItemId[];
+    dropTarget: null | DropTargetContext;
+}
+export interface Droppable {
+    element: HTMLElement;
+    context: DropTargetContext;
+}
+interface AcquireData {
+    droppableId: ItemId;
+    draggableItem: Item;
+}
+export interface DragAndDropEvents {
+    start: (data: DragAndDropData) => void;
+    update: (data: DragAndDropData) => void;
+    submit: () => void;
+    discard: () => void;
+    acquire: (data: AcquireData) => void;
+}
+export declare function useDragSubscription<K extends keyof DragAndDropEvents>(event: K, handler: DragAndDropEvents[K]): void;
+export declare function useDraggable({ item, getElement }: {
+    item: Item;
+    getElement: () => HTMLElement;
+}): {
+    start(operation: Operation, interactionType: InteractionType, startCoordinates: Coordinates): void;
+    updateTransition(coordinates: Coordinates): void;
+    submitTransition(): void;
+    discardTransition(): void;
+    acquire(droppableId: ItemId): void;
+    getDroppables(): [string, Droppable][];
+};
+export declare function useDroppable({ itemId, context, getElement, }: {
+    itemId: ItemId;
+    context: DropTargetContext;
+    getElement: () => HTMLElement;
+}): void;
+export {};

package/internal/dnd-controller/controller.js

@@ -0,0 +1,131 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect } from "react";
+import { Coordinates } from "../utils/coordinates";
+import { getCollisionRect, getHoveredDroppables } from "./collision";
+import { EventEmitter } from "./event-emitter";
+class DragAndDropController extends EventEmitter {
+    constructor() {
+        super(...arguments);
+        this.droppables = new Map();
+        this.transition = null;
+    }
+    /**
+     * Inits a drag transition and issues a "start" event.
+     *
+     * The method overrides the previous transition if exists (w/o a cancellation event)!
+     */
+    start(operation, interactionType, draggableItem, draggableElement, startCoordinates) {
+        this.transition = {
+            operation,
+            interactionType,
+            draggableItem,
+            draggableElement,
+            startCoordinates,
+        };
+        this.emit("start", this.getDragAndDropData(startCoordinates));
+    }
+    /**
+     * Updates current transition with given coordinates and issues an "update" event.
+     */
+    update(coordinates) {
+        this.emit("update", this.getDragAndDropData(coordinates));
+    }
+    /**
+     * Removes transition and issues a "submit" event.
+     */
+    submit() {
+        this.emit("submit");
+        this.transition = null;
+    }
+    /**
+     * Removes transition and issues a "discard" event.
+     */
+    discard() {
+        this.emit("discard");
+        this.transition = null;
+    }
+    /**
+     * Issues an "acquire" event to notify the current transition draggable is acquired by the given droppable.
+     */
+    acquire(droppableId) {
+        if (!this.transition) {
+            throw new Error("Invariant violation: no transition present for acquire.");
+        }
+        this.emit("acquire", { droppableId, draggableItem: this.transition.draggableItem });
+    }
+    /**
+     * Registers a droppable used for collisions check, acquire, and dropTarget provision.
+     */
+    addDroppable(id, context, element) {
+        this.droppables.set(id, { element, context });
+    }
+    /**
+     * Un-registers the droppable - use it when component unmounts.
+     */
+    removeDroppable(id) {
+        this.droppables.delete(id);
+    }
+    /**
+     * Retrieves all registered droppables to run a manual match against.
+     */
+    getDroppables() {
+        return [...this.droppables.entries()];
+    }
+    getDragAndDropData(coordinates) {
+        if (!this.transition) {
+            throw new Error("Invariant violation: no transition present for interaction.");
+        }
+        const { operation, draggableElement, startCoordinates } = this.transition;
+        const positionOffset = Coordinates.cursorOffset(coordinates, startCoordinates);
+        const collisionRect = getCollisionRect(operation, draggableElement, coordinates);
+        const { collisionIds, dropTarget } = this.getCollisions(collisionRect);
+        return { ...this.transition, positionOffset, coordinates, collisionRect, collisionIds, dropTarget };
+    }
+    getCollisions(collisionRect) {
+        const droppableEntries = [...this.droppables.entries()];
+        const droppableElements = droppableEntries.map(([id, entry]) => [id, entry.element]);
+        const collisionIds = getHoveredDroppables(collisionRect, droppableElements);
+        if (collisionIds.length === 0) {
+            return { collisionIds, dropTarget: null };
+        }
+        const matchedDroppable = droppableEntries.find(([id]) => id === collisionIds[0]);
+        if (!matchedDroppable) {
+            throw new Error("Invariant violation: no droppable matches collision.");
+        }
+        return { collisionIds, dropTarget: matchedDroppable[1].context };
+    }
+}
+// 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]);
+}
+export function useDraggable({ item, getElement }) {
+    return {
+        start(operation, interactionType, startCoordinates) {
+            controller.start(operation, interactionType, item, getElement(), startCoordinates);
+        },
+        updateTransition(coordinates) {
+            controller.update(coordinates);
+        },
+        submitTransition() {
+            controller.submit();
+        },
+        discardTransition() {
+            controller.discard();
+        },
+        acquire(droppableId) {
+            controller.acquire(droppableId);
+        },
+        getDroppables() {
+            return controller.getDroppables();
+        },
+    };
+}
+export function useDroppable({ itemId, context, getElement, }) {
+    useEffect(() => {
+        controller.addDroppable(itemId, context, getElement());
+        return () => controller.removeDroppable(itemId);
+    }, [itemId, context, getElement]);
+}

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

@@ -0,0 +1,9 @@
+type Listeners<L> = {
+    [E in keyof L]: (...args: any[]) => any;
+};
+export declare class EventEmitter<Events extends Listeners<Events>> {
+    private listeners;
+    on<Event extends keyof Events>(event: Event, handler: Events[Event]): () => void;
+    protected emit<Event extends keyof Events>(event: Event, ...data: Parameters<Events[Event]>): void;
+}
+export {};

package/internal/dnd-controller/event-emitter.js

@@ -0,0 +1,22 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export class EventEmitter {
+    constructor() {
+        this.listeners = new Map();
+    }
+    on(event, handler) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, []);
+        }
+        this.listeners.get(event).push(handler);
+        return () => {
+            this.listeners.set(event, this.listeners.get(event).filter((item) => item !== handler));
+        };
+    }
+    emit(event, ...data) {
+        var _a;
+        for (const handler of (_a = this.listeners.get(event)) !== null && _a !== void 0 ? _a : []) {
+            handler(...data);
+        }
+    }
+}

package/internal/drag-handle/icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare function DragHandleIcon(): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof DragHandleIcon>;
+export default _default;

package/internal/drag-handle/icon.js

@@ -0,0 +1,12 @@
+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 Icon from "@cloudscape-design/components/icon";
+import { memo } from "react";
+function DragHandleIcon() {
+    return _jsx(Icon, { svg: _jsx(SVG, {}) });
+}
+function SVG() {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2H6.01V2.01H6V2ZM6 6H6.01V6.01H6V6ZM6.01 10H6V10.01H6.01V10ZM6 14H6.01V14.01H6V14ZM10.01 2H10V2.01H10.01V2ZM10 6H10.01V6.01H10V6ZM10.01 10H10V10.01H10.01V10ZM10 14H10.01V14.01H10V14Z", fill: "#16191F" }) }));
+}
+export default memo(DragHandleIcon);

package/internal/drag-handle/index.d.ts

@@ -0,0 +1,9 @@
+import { KeyboardEvent, PointerEvent } from "react";
+export interface DragHandleProps {
+    ariaLabelledBy: string;
+    ariaDescribedBy: string;
+    onPointerDown: (event: PointerEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+}
+declare const _default: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default _default;

package/internal/drag-handle/index.js

@@ -0,0 +1,11 @@
+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 { forwardRef } from "react";
+import Handle from "../handle";
+import DragHandleIcon from "./icon";
+import styles from "./styles.css.js";
+function DragHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown }, ref) {
+    return (_jsx(Handle, { ref: ref, className: styles.handle, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(DragHandleIcon, {}) }));
+}
+export default forwardRef(DragHandle);

package/internal/drag-handle/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "handle": "awsui_handle_umbhe_1e9tr_1"
+};
+  

package/internal/drag-handle/styles.scoped.css

@@ -0,0 +1,7 @@
+.awsui_handle_umbhe_1e9tr_1:not(#\9) {
+  cursor: grab;
+}
+
+.awsui_handle_umbhe_1e9tr_1:not(#\9):active {
+  cursor: grabbing;
+}

package/internal/drag-handle/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "handle": "awsui_handle_umbhe_1e9tr_1"
+};
+  

package/internal/environment.d.ts

@@ -0,0 +1,4 @@
+export const PACKAGE_SOURCE: string;
+export const PACKAGE_VERSION: string;
+export const THEME: string;
+export const ALWAYS_VISUAL_REFRESH: string;

package/internal/environment.js

@@ -0,0 +1,4 @@
+export var PACKAGE_SOURCE = "board-components";
+export var PACKAGE_VERSION = "3.0.0 (f7bedc98)";
+export var THEME = "default";
+export var ALWAYS_VISUAL_REFRESH = false;

package/internal/grid/grid.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { GridProps } from "./interfaces";
+export default function Grid({ layout, children: render, columns, rows }: GridProps): JSX.Element;

package/internal/grid/grid.js

@@ -0,0 +1,28 @@
+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 { useContainerQuery } from "@cloudscape-design/component-toolkit";
+import { Children } from "react";
+import { zipTwoArrays } from "../utils/zip-arrays";
+import GridItem from "./item";
+import styles from "./styles.css.js";
+/* Matches grid gap in CSS. */
+const GRID_GAP = 16;
+/* Matches grid-auto-rows in CSS. */
+const ROWSPAN_HEIGHT = 100;
+export default function Grid({ layout, children: render, columns, rows }) {
+    const [gridWidth, containerQueryRef] = useContainerQuery((entry) => entry.contentBoxWidth, []);
+    // The below getters translate relative grid units into size/offset values in pixels.
+    const getWidth = (colspan) => {
+        colspan = Math.min(columns, colspan);
+        const cellWidth = ((gridWidth || 0) - (columns - 1) * GRID_GAP) / columns;
+        return colspan * cellWidth + (colspan - 1) * GRID_GAP;
+    };
+    const getHeight = (rowspan) => rowspan * ROWSPAN_HEIGHT + (rowspan - 1) * GRID_GAP;
+    const getColOffset = (x) => getWidth(x) + GRID_GAP;
+    const getRowOffset = (y) => getHeight(y) + GRID_GAP;
+    const gridContext = { getWidth, getHeight, getColOffset, getRowOffset };
+    const children = render === null || render === void 0 ? void 0 : render(gridContext);
+    const zipped = zipTwoArrays(layout, Children.toArray(children));
+    return (_jsx("div", { ref: containerQueryRef, "data-columns": columns, "data-rows": rows, className: styles.grid, children: zipped.map(([item, children]) => (_jsx(GridItem, { item: item, children: children }, item.id))) }));
+}

package/internal/grid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as default } from "./grid";
+export type { GridProps } from "./interfaces";

package/internal/grid/index.js

@@ -0,0 +1,3 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export { default as default } from "./grid";

package/internal/grid/interfaces.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { GridLayoutItem } from "../interfaces";
+export interface GridProps {
+    layout: GridLayoutItem[];
+    columns: number;
+    rows: number;
+    children?: (context: GridContext) => ReactNode;
+}
+export interface GridContext {
+    getWidth: (colspan: number) => number;
+    getHeight: (rowspan: number) => number;
+    getColOffset: (x: number) => number;
+    getRowOffset: (y: number) => number;
+}

package/internal/grid/interfaces.js

@@ -0,0 +1,3 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};

package/internal/grid/item.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { GridLayoutItem } from "../interfaces";
+export interface GridItemProps {
+    item: GridLayoutItem;
+    children?: ReactNode;
+}
+declare const _default: import("react").MemoExoticComponent<({ children, item }: GridItemProps) => JSX.Element>;
+export default _default;

package/internal/grid/item.js

@@ -0,0 +1,10 @@
+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 { memo } from "react";
+import styles from "./styles.css.js";
+const GridItem = ({ children, item }) => {
+    // Grid row start can not be set as part of a CSS class names, since we have a potentially infinite height grid.
+    return (_jsx("div", { "data-column-span": item.width, "data-row-span": item.height, "data-column-offset": item.x + 1, "data-row-offset": item.y + 1, className: styles.grid__item, style: { gridRowStart: item.y + 1, gridRowEnd: `span ${item.height}` }, children: children }));
+};
+export default memo(GridItem);

package/internal/grid/styles.css.js

@@ -0,0 +1,7 @@
+
+    import './styles.scoped.css';
+    export default {
+  "grid": "awsui_grid_1hw7z_67wyf_1",
+  "grid__item": "awsui_grid__item_1hw7z_67wyf_26"
+};
+