@cloudscape-design/board-components 3.0.0

package/board/utils/create-transforms.js

@@ -0,0 +1,22 @@
+/**
+ * Creates a mapping of between items and transforms to be applied while in transition.
+ */
+export function createTransforms(grid, moves, gridContext) {
+    const transforms = {};
+    for (const move of moves) {
+        const item = grid.items.find((prev) => prev.id === move.itemId);
+        if (move.type === "REMOVE") {
+            transforms[move.itemId] = { type: "remove" };
+        }
+        else if (item) {
+            transforms[item.id] = {
+                type: "move",
+                x: gridContext.getColOffset(move.x - item.x),
+                y: gridContext.getRowOffset(move.y - item.y),
+                width: gridContext.getWidth(move.width),
+                height: gridContext.getHeight(move.height),
+            };
+        }
+    }
+    return transforms;
+}

package/board/utils/events.d.ts

@@ -0,0 +1,3 @@
+import { LayoutShift } from "../../internal/layout-engine/interfaces";
+import { BoardProps } from "../interfaces";
+export declare function createItemsChangeEvent<D>(items: readonly BoardProps.Item<D>[], layoutShift: LayoutShift): CustomEvent<BoardProps.ItemsChangeDetail<D>>;

package/board/utils/events.js

@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { createCustomEvent } from "../../internal/utils/events";
+import { transformItems } from "../../internal/utils/layout";
+export function createItemsChangeEvent(items, layoutShift) {
+    var _a, _b, _c, _d, _e, _f;
+    const insertTarget = (_b = (_a = layoutShift.moves.find((move) => move.type === "INSERT")) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : null;
+    const removeTarget = (_d = (_c = layoutShift.moves.find((move) => move.type === "REMOVE")) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : null;
+    const resizeTarget = (_f = (_e = layoutShift.moves.find((move) => move.type === "RESIZE")) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : null;
+    const newItems = transformItems(items, layoutShift.next, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : insertTarget);
+    const addedItem = newItems.find((it) => it.id === insertTarget);
+    const removedItem = newItems.find((it) => it.id === removeTarget);
+    return createCustomEvent({ items: newItems, addedItem, removedItem });
+}

package/board/utils/get-hovered-rect.d.ts

@@ -0,0 +1,10 @@
+import { GridLayoutItem, ItemId } from "../../internal/interfaces";
+/**
+ * Creates a minimal hovered rectangle (in grid units) that contains all collided placeholders.
+ */
+export declare function getHoveredRect(collisionsIds: readonly ItemId[], placeholders: readonly GridLayoutItem[]): {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+};

package/board/utils/get-hovered-rect.js

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * Creates a minimal hovered rectangle (in grid units) that contains all collided placeholders.
+ */
+export function getHoveredRect(collisionsIds, placeholders) {
+    const hoveredPlaceholders = collisionsIds.map((id) => placeholders.find((p) => p.id === id));
+    return hoveredPlaceholders.reduce((rect, collision) => ({
+        top: Math.min(rect.top, collision.y),
+        left: Math.min(rect.left, collision.x),
+        bottom: Math.max(rect.bottom, collision.y + collision.height),
+        right: Math.max(rect.right, collision.x + collision.width),
+    }), {
+        top: Number.POSITIVE_INFINITY,
+        left: Number.POSITIVE_INFINITY,
+        bottom: Number.NEGATIVE_INFINITY,
+        right: Number.NEGATIVE_INFINITY,
+    });
+}

package/board/utils/layout.d.ts

@@ -0,0 +1,19 @@
+import { Direction } from "../../internal/interfaces";
+import { LayoutShift } from "../../internal/layout-engine/interfaces";
+import { Coordinates } from "../../internal/utils/coordinates";
+import { Position } from "../../internal/utils/position";
+import { Transition } from "../interfaces";
+export declare function getLayoutColumns<D>(transition: Transition<D>): number;
+export declare function getLayoutRows<D>(transition: Transition<D>): number;
+export declare function getLayoutPlaceholders<D>(transition: Transition<D>): import("../../internal/interfaces").GridLayout;
+/**
+ * Retrieves direction from where the inserting item comes.
+ */
+export declare function getInsertionDirection(cursorOffset: Coordinates): Direction;
+/**
+ * Applies transition operation (reorder/move/insert) and retrieves an object that describes the updated
+ * layout and the moves to be made including and not including items float to top.
+ *
+ * The layout shift w/o refloat is used for rendering and w/ refloat is used for live announcements.
+ */
+export declare function getLayoutShift<D>(transition: Transition<D>, path: readonly Position[], insertionDirection?: Direction): null | LayoutShift;

package/board/utils/layout.js

@@ -0,0 +1,77 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { LayoutEngine } from "../../internal/layout-engine/engine";
+import { createPlaceholdersLayout, getDefaultColumnSpan, getDefaultRowSpan } from "../../internal/utils/layout";
+import { normalizeInsertionPath } from "./path";
+export function getLayoutColumns(transition) {
+    return transition.itemsLayout.columns;
+}
+// The rows can be overridden during transition to create more drop targets at the bottom.
+export function getLayoutRows(transition) {
+    var _a, _b, _c;
+    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 itemHeight = (_c = layoutItem === null || layoutItem === void 0 ? void 0 : layoutItem.height) !== null && _c !== void 0 ? _c : getDefaultRowSpan(transition.draggableItem);
+    // Add extra row for resize when already at the bottom.
+    if (transition.operation === "resize") {
+        return Math.max(layout.rows, layoutItem ? layoutItem.y + layoutItem.height + 1 : 0);
+    }
+    // Add extra row(s) for reorder/insert based on item's height.
+    else {
+        return Math.max(layout.rows, transition.itemsLayout.rows + itemHeight);
+    }
+}
+export function getLayoutPlaceholders(transition) {
+    const rows = getLayoutRows(transition);
+    const columns = getLayoutColumns(transition);
+    return createPlaceholdersLayout(rows, columns);
+}
+/**
+ * Retrieves direction from where the inserting item comes.
+ */
+export function getInsertionDirection(cursorOffset) {
+    if (cursorOffset.x < 0) {
+        return "right";
+    }
+    if (cursorOffset.x > 0) {
+        return "left";
+    }
+    if (cursorOffset.y < 0) {
+        return "down";
+    }
+    if (cursorOffset.y > 0) {
+        return "up";
+    }
+    return "right";
+}
+/**
+ * Applies transition operation (reorder/move/insert) and retrieves an object that describes the updated
+ * layout and the moves to be made including and not including items float to top.
+ *
+ * The layout shift w/o refloat is used for rendering and w/ refloat is used for live announcements.
+ */
+export function getLayoutShift(transition, path, insertionDirection) {
+    if (path.length === 0) {
+        return null;
+    }
+    const engine = new LayoutEngine(transition.itemsLayout);
+    const width = getDefaultColumnSpan(transition.draggableItem, getLayoutColumns(transition));
+    const height = getDefaultRowSpan(transition.draggableItem);
+    const rows = getLayoutRows(transition);
+    const columns = getLayoutColumns(transition);
+    switch (transition.operation) {
+        case "resize":
+            return engine.resize({ itemId: transition.draggableItem.id, path }).getLayoutShift();
+        case "reorder":
+            return engine.move({ itemId: transition.draggableItem.id, path }).getLayoutShift();
+        case "insert":
+            return engine
+                .insert({
+                itemId: transition.draggableItem.id,
+                width,
+                height,
+                path: normalizeInsertionPath(path, insertionDirection !== null && insertionDirection !== void 0 ? insertionDirection : "right", columns, rows),
+            })
+                .getLayoutShift();
+    }
+}

package/board/utils/path.d.ts

@@ -0,0 +1,10 @@
+import { Direction } from "../../internal/interfaces";
+import { Rect } from "../../internal/interfaces";
+import { Position } from "../../internal/utils/position";
+/**
+ * The insertion operation is similar to reorder yet the first path entry is treated differently.
+ * The normalization removes leading path entries if on the same edge to optimize UX.
+ */
+export declare function normalizeInsertionPath(path: readonly Position[], insertionDirection: Direction, columns: number, rows: number): Position[];
+export declare function appendMovePath(prevPath: readonly Position[], collisionRect: Rect): Position[];
+export declare function appendResizePath(prevPath: readonly Position[], collisionRect: Rect): Position[];

package/board/utils/path.js

@@ -0,0 +1,73 @@
+import { Position } from "../../internal/utils/position";
+/**
+ * The insertion operation is similar to reorder yet the first path entry is treated differently.
+ * The normalization removes leading path entries if on the same edge to optimize UX.
+ */
+export function normalizeInsertionPath(path, insertionDirection, columns, rows) {
+    let edgeIndex = -1;
+    for (let i = 0; i < path.length; i++) {
+        switch (insertionDirection) {
+            case "left": {
+                if (path[i].x === 0) {
+                    edgeIndex = i;
+                }
+                break;
+            }
+            case "right": {
+                if (path[i].x === columns - 1) {
+                    edgeIndex = i;
+                }
+                break;
+            }
+            case "up": {
+                if (path[i].y === 0) {
+                    edgeIndex = i;
+                }
+                break;
+            }
+            case "down": {
+                if (path[i].y === rows - 1) {
+                    edgeIndex = i;
+                }
+                break;
+            }
+        }
+    }
+    return path.slice(edgeIndex);
+}
+export function appendMovePath(prevPath, collisionRect) {
+    return appendPath(prevPath, new Position({ x: collisionRect.left, y: collisionRect.top }));
+}
+export function appendResizePath(prevPath, collisionRect) {
+    return appendPath(prevPath, new Position({ x: collisionRect.right, y: collisionRect.bottom }));
+}
+/**
+ * The operation path must be strictly incremental (each dx + dy == 1). However, the actual collisions
+ * data can have gaps due to pointer events throttling or other factors.
+ *
+ * The function produces next path from previous path and the target position by incrementally adding steps.
+ */
+function appendPath(prevPath, nextPosition) {
+    const path = [...prevPath];
+    const lastPosition = prevPath[prevPath.length - 1];
+    if (!lastPosition) {
+        return [nextPosition];
+    }
+    const vx = Math.sign(nextPosition.x - lastPosition.x);
+    const vy = Math.sign(nextPosition.y - lastPosition.y);
+    let { x, y } = lastPosition;
+    let safetyCounter = 0;
+    while (x !== nextPosition.x || y !== nextPosition.y) {
+        if (++safetyCounter === 100) {
+            throw new Error("Infinite loop in appendPath.");
+        }
+        if (x !== nextPosition.x) {
+            x += vx;
+        }
+        else {
+            y += vy;
+        }
+        path.push(new Position({ x, y }));
+    }
+    return path;
+}

package/board-item/header.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface WidgetContainerHeaderProps {
+    handle: ReactNode;
+    children?: ReactNode;
+    settings?: ReactNode;
+}
+export default function WidgetContainerHeader({ handle, children, settings }: WidgetContainerHeaderProps): JSX.Element;

package/board-item/header.js

@@ -0,0 +1,8 @@
+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 styles from "./styles.css.js";
+export default function WidgetContainerHeader({ handle, children, settings }) {
+    return (_jsxs("div", { className: styles.header, children: [_jsx("div", { className: clsx(styles.fixed, styles.handle), children: handle }), _jsx("div", { className: clsx(styles.flexible, styles["header-content"]), children: children }), settings ? _jsx("div", { className: clsx(styles.fixed, styles.settings), children: settings }) : null] }));
+}

package/board-item/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { BoardItemProps } from "./interfaces";
+export { BoardItemProps };
+export default function BoardItem(props: BoardItemProps): JSX.Element;

package/board-item/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 useBaseComponent from "../internal/base-component/use-base-component";
+import { applyDisplayName } from "../internal/utils/apply-display-name";
+import { InternalBoardItem } from "./internal";
+export default function BoardItem(props) {
+    const baseComponentProps = useBaseComponent("BoardItem");
+    return _jsx(InternalBoardItem, { ...props, ...baseComponentProps });
+}
+applyDisplayName(BoardItem, "BoardItem");

package/board-item/interfaces.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+export interface BoardItemProps {
+    /**
+     * Heading element of the item. Use the [header component](/components/header/).
+     */
+    header?: ReactNode;
+    /**
+     * Main content of the item.
+     */
+    children?: ReactNode;
+    /**
+     * Determines whether the main content of the item has padding. If `true`, removes the default padding
+     * from the content area.
+     */
+    disableContentPaddings?: boolean;
+    /**
+     * Footer of the item.
+     */
+    footer?: ReactNode;
+    /**
+     * Additional slot next to the heading. Use it to render an overflow actions menu in the form of a button dropdown.
+     */
+    settings?: ReactNode;
+    /**
+     * An object containing all the necessary localized strings required by the component.
+     *
+     * ARIA labels:
+     * * `dragHandleAriaLabel` (string) - the ARIA label for the drag handle.
+     * * `dragHandleAriaDescription` (string, optional) - the ARIA description for the drag handle.
+     * * `resizeHandleAriaLabel` (string) - the ARIA label for the resize handle.
+     * * `resizeHandleAriaDescription` (string, optional) - the ARIA description for the resize handle.
+     */
+    i18nStrings: BoardItemProps.I18nStrings;
+}
+export declare namespace BoardItemProps {
+    interface I18nStrings {
+        dragHandleAriaLabel: string;
+        dragHandleAriaDescription?: string;
+        resizeHandleAriaLabel: string;
+        resizeHandleAriaDescription?: string;
+    }
+}

package/board-item/interfaces.js

@@ -0,0 +1 @@
+export {};

package/board-item/internal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
+import type { BoardItemProps } from "./interfaces";
+export declare function InternalBoardItem({ children, header, settings, disableContentPaddings, footer, i18nStrings, __internalRootRef, }: BoardItemProps & InternalBaseComponentProps): JSX.Element;

package/board-item/internal.js

@@ -0,0 +1,20 @@
+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 Container from "@cloudscape-design/components/container";
+import clsx from "clsx";
+import { useId } from "react";
+import DragHandle from "../internal/drag-handle";
+import { useItemContext } from "../internal/item-container";
+import ResizeHandle from "../internal/resize-handle";
+import ScreenreaderOnly from "../internal/screenreader-only";
+import WidgetContainerHeader from "./header";
+import styles from "./styles.css.js";
+export function InternalBoardItem({ children, header, settings, disableContentPaddings, footer, i18nStrings, __internalRootRef, }) {
+    const { dragHandle, resizeHandle, isActive } = useItemContext();
+    const dragHandleAriaLabelledBy = useId();
+    const dragHandleAriaDescribedBy = useId();
+    const resizeHandleAriaLabelledBy = useId();
+    const resizeHandleAriaDescribedBy = useId();
+    return (_jsxs("div", { ref: __internalRootRef, className: styles.root, children: [_jsx(Container, { fitHeight: true, disableHeaderPaddings: true, header: _jsx(WidgetContainerHeader, { handle: _jsx(DragHandle, { ref: dragHandle.ref, ariaLabelledBy: dragHandleAriaLabelledBy, ariaDescribedBy: dragHandleAriaDescribedBy, onPointerDown: dragHandle.onPointerDown, onKeyDown: dragHandle.onKeyDown }), settings: settings, children: header }), footer: footer, disableContentPaddings: disableContentPaddings, className: clsx(styles["container-override"], isActive && styles.active), children: children }), resizeHandle && (_jsx("div", { className: styles.resizer, children: _jsx(ResizeHandle, { ariaLabelledBy: resizeHandleAriaLabelledBy, ariaDescribedBy: resizeHandleAriaDescribedBy, onPointerDown: resizeHandle.onPointerDown, onKeyDown: resizeHandle.onKeyDown }) })), _jsx(ScreenreaderOnly, { id: dragHandleAriaLabelledBy, children: i18nStrings.dragHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: dragHandleAriaDescribedBy, children: i18nStrings.dragHandleAriaDescription }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaLabelledBy, children: i18nStrings.resizeHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaDescribedBy, children: i18nStrings.resizeHandleAriaDescription })] }));
+}

package/board-item/styles.css.js

@@ -0,0 +1,15 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_9ckv7_1jt4k_1",
+  "container-override": "awsui_container-override_9ckv7_1jt4k_6",
+  "active": "awsui_active_9ckv7_1jt4k_6",
+  "header": "awsui_header_9ckv7_1jt4k_10",
+  "flexible": "awsui_flexible_9ckv7_1jt4k_16",
+  "handle": "awsui_handle_9ckv7_1jt4k_20",
+  "header-content": "awsui_header-content_9ckv7_1jt4k_24",
+  "settings": "awsui_settings_9ckv7_1jt4k_28",
+  "fixed": "awsui_fixed_9ckv7_1jt4k_33",
+  "resizer": "awsui_resizer_9ckv7_1jt4k_37"
+};
+  

package/board-item/styles.scoped.css

@@ -0,0 +1,41 @@
+.awsui_root_9ckv7_1jt4k_1:not(#\9) {
+  display: contents;
+}
+
+/* TODO: use container API instead of styles override */
+.awsui_container-override_9ckv7_1jt4k_6.awsui_active_9ckv7_1jt4k_6:not(#\9) {
+  box-shadow: var(--shadow-container-active-h4jsj2, 0px 4px 8px rgba(0, 28, 36, 0.45));
+}
+
+.awsui_header_9ckv7_1jt4k_10:not(#\9) {
+  display: flex;
+  justify-items: center;
+  padding: var(--space-scaled-s-cu1hzn, 12px) calc(var(--space-container-horizontal-tlw03i, 20px) - var(--space-scaled-xs-6859qs, 8px));
+}
+
+.awsui_flexible_9ckv7_1jt4k_16:not(#\9) {
+  flex: 1 1 min-content;
+}
+
+.awsui_handle_9ckv7_1jt4k_20:not(#\9) {
+  margin-top: var(--space-scaled-xxs-95dhkm, 4px);
+}
+
+.awsui_header-content_9ckv7_1jt4k_24:not(#\9) {
+  margin-left: var(--space-scaled-xxs-95dhkm, 4px);
+}
+
+.awsui_settings_9ckv7_1jt4k_28:not(#\9) {
+  margin-top: var(--space-scaled-xxxs-b6dm8t, 2px);
+  margin-left: var(--space-static-xs-9adq92, 8px);
+}
+
+.awsui_fixed_9ckv7_1jt4k_33:not(#\9) {
+  flex: 0 0 auto;
+}
+
+.awsui_resizer_9ckv7_1jt4k_37:not(#\9) {
+  position: absolute;
+  bottom: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--space-scaled-xxs-95dhkm, 4px));
+  right: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--space-scaled-xxs-95dhkm, 4px));
+}

package/board-item/styles.selectors.js

@@ -0,0 +1,16 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_9ckv7_1jt4k_1",
+  "container-override": "awsui_container-override_9ckv7_1jt4k_6",
+  "active": "awsui_active_9ckv7_1jt4k_6",
+  "header": "awsui_header_9ckv7_1jt4k_10",
+  "flexible": "awsui_flexible_9ckv7_1jt4k_16",
+  "handle": "awsui_handle_9ckv7_1jt4k_20",
+  "header-content": "awsui_header-content_9ckv7_1jt4k_24",
+  "settings": "awsui_settings_9ckv7_1jt4k_28",
+  "fixed": "awsui_fixed_9ckv7_1jt4k_33",
+  "resizer": "awsui_resizer_9ckv7_1jt4k_37"
+};
+  

package/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Board } from "./board";
+export type { BoardProps } from "./board";
+export { default as ItemsPalette } from "./items-palette";
+export type { ItemsPaletteProps } from "./items-palette";
+export { default as BoardItem } from "./board-item";
+export type { BoardItemProps } from "./board-item";

package/index.js

@@ -0,0 +1,5 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export { default as Board } from "./board";
+export { default as ItemsPalette } from "./items-palette";
+export { default as BoardItem } from "./board-item";

package/internal/api-docs/components/board-item.js

@@ -0,0 +1,68 @@
+module.exports = {
+  "name": "BoardItem",
+  "releaseStatus": "stable",
+  "regions": [
+    {
+      "name": "children",
+      "description": "Main content of the item.",
+      "isDefault": true
+    },
+    {
+      "name": "footer",
+      "description": "Footer of the item.",
+      "isDefault": false
+    },
+    {
+      "name": "header",
+      "description": "Heading element of the item. Use the [header component](/components/header/).",
+      "isDefault": false
+    },
+    {
+      "name": "settings",
+      "description": "Additional slot next to the heading. Use it to render an overflow actions menu in the form of a button dropdown.",
+      "isDefault": false
+    }
+  ],
+  "functions": [],
+  "properties": [
+    {
+      "name": "disableContentPaddings",
+      "type": "boolean",
+      "optional": true,
+      "description": "Determines whether the main content of the item has padding. If `true`, removes the default padding\nfrom the content area."
+    },
+    {
+      "name": "i18nStrings",
+      "type": "BoardItemProps.I18nStrings",
+      "inlineType": {
+        "name": "BoardItemProps.I18nStrings",
+        "type": "object",
+        "properties": [
+          {
+            "name": "dragHandleAriaDescription",
+            "type": "string",
+            "optional": true
+          },
+          {
+            "name": "dragHandleAriaLabel",
+            "type": "string",
+            "optional": false
+          },
+          {
+            "name": "resizeHandleAriaDescription",
+            "type": "string",
+            "optional": true
+          },
+          {
+            "name": "resizeHandleAriaLabel",
+            "type": "string",
+            "optional": false
+          }
+        ]
+      },
+      "optional": false,
+      "description": "An object containing all the necessary localized strings required by the component.\nARIA labels:\n* `dragHandleAriaLabel` (string) - the ARIA label for the drag handle.\n* `dragHandleAriaDescription` (string, optional) - the ARIA description for the drag handle.\n* `resizeHandleAriaLabel` (string) - the ARIA label for the resize handle.\n* `resizeHandleAriaDescription` (string, optional) - the ARIA description for the resize handle.\n"
+    }
+  ],
+  "events": []
+};

package/internal/api-docs/components/board.js

@@ -0,0 +1,117 @@
+module.exports = {
+  "name": "Board",
+  "releaseStatus": "stable",
+  "regions": [
+    {
+      "name": "empty",
+      "description": "Rendered when the `items` array is empty.\nWhen items are loading the slot can be used to render the loading indicator.\n",
+      "isDefault": false
+    }
+  ],
+  "functions": [],
+  "properties": [
+    {
+      "name": "i18nStrings",
+      "type": "BoardProps.I18nStrings<D>",
+      "inlineType": {
+        "name": "BoardProps.I18nStrings",
+        "type": "object",
+        "properties": [
+          {
+            "name": "liveAnnouncementDndCommitted",
+            "type": "(operationType: BoardProps.DndOperationType) => string",
+            "optional": false
+          },
+          {
+            "name": "liveAnnouncementDndDiscarded",
+            "type": "(operationType: BoardProps.DndOperationType) => string",
+            "optional": false
+          },
+          {
+            "name": "liveAnnouncementDndItemInserted",
+            "type": "(operation: BoardProps.DndInsertState<D>) => string",
+            "optional": false
+          },
+          {
+            "name": "liveAnnouncementDndItemReordered",
+            "type": "(operation: BoardProps.DndReorderState<D>) => string",
+            "optional": false
+          },
+          {
+            "name": "liveAnnouncementDndItemResized",
+            "type": "(operation: BoardProps.DndResizeState<D>) => string",
+            "optional": false
+          },
+          {
+            "name": "liveAnnouncementDndStarted",
+            "type": "(operationType: BoardProps.DndOperationType) => string",
+            "optional": false
+          },
+          {
+            "name": "liveAnnouncementItemRemoved",
+            "type": "(operation: BoardProps.ItemRemovedState<D>) => string",
+            "optional": false
+          },
+          {
+            "name": "navigationAriaDescription",
+            "type": "string",
+            "optional": true
+          },
+          {
+            "name": "navigationAriaLabel",
+            "type": "string",
+            "optional": false
+          },
+          {
+            "name": "navigationItemAriaLabel",
+            "type": "(item: BoardProps.Item<D> | null) => string",
+            "optional": false
+          }
+        ]
+      },
+      "optional": false,
+      "description": "An object containing all the necessary localized strings required by the component.\nLive announcements:\n* `liveAnnouncementDndStarted(BoardProps.DndOperationType): string` - the function to create a live announcement string to indicate start of DnD (\"reorder\", \"resize\" or \"insert\").\n* `liveAnnouncementDndItemReordered(BoardProps.DndReorderState<D>): string` - the function to create a live announcement string to indicate when DnD reorder is performed.\n* `liveAnnouncementDndItemResized(BoardProps.DndResizeState<D>): string` - the function to create a live announcement string to indicate when DnD resize is performed.\n* `liveAnnouncementDndItemInserted(BoardProps.DndInsertState<D>): string` - the function to create a live announcement string to indicate when DnD insert is performed.\n* `liveAnnouncementDndDiscarded(BoardProps.DndOperationType): string` - the function to create a live announcement string to indicate commit of DnD (\"reorder\", \"resize\" or \"insert\").\n* `liveAnnouncementDndCommitted(BoardProps.DndOperationType): string` - the function to create a live announcement string to indicate discard of DnD (\"reorder\", \"resize\" or \"insert\").\n* `liveAnnouncementItemRemoved(BoardProps.OperationStateRemove<D>): string` - the function to create a live announcement string to indicate when item is removed.\n\nNavigation labels:\n* `navigationAriaLabel` (string) - the ARIA label for the accessible board navigation element.\n* `navigationAriaDescription` (string, optional) - the ARIA description for the accessible board navigation element.\n* `navigationItemAriaLabel(null | BoardProps.Item<D>): string` - the function to create the ARIA label for a navigation board item or an empty slot.\n"
+    },
+    {
+      "name": "items",
+      "type": "ReadonlyArray<BoardProps.Item<D>>",
+      "optional": false,
+      "description": "Specifies the items displayed in the board. Each item includes its position on the board and\noptional data. The content of an item is controlled by the `renderItem` property.\nThe BoardProps.Item includes:\n* `id` (string) - the unique item identifier. The IDs of any two items in a page must be different.\n* `definition.minRowSpan` (number, optional) - the minimal number of rows the item is allowed to take. It can't be less than two. Defaults to two.\n* `definition.minColumnSpan` (number, optional) - the minimal number of columns the item is allowed to take. It can't be less than one. Defaults to one.\n* `definition.defaultRowSpan` (number, optional) - the number or rows the item will take when inserted to the board. It can't be less than `definition.minRowSpan`.\n* `definition.defaultColumnSpan` (number, optional) - the number or columns the item will take when inserted in the board. It can't be less than `definition.minColumnSpan`.\n* `columnOffset` (mapping, optional) - the item's offset from the first column (per layout) starting from zero. The value is updated by `onItemsChange` after an update is committed.\n* `rowSpan` (number, optional) - the item's vertical size starting from two. The value is updated by `onItemsChange` after an update is committed.\n* `columnSpan` (number, optional) - the item's horizontal size starting from one. The value is updated by `onItemsChange` after an update is committed.\n* `data` (D) - optional item data which can include the specific configurations of an item, such as its title.\n"
+    },
+    {
+      "name": "renderItem",
+      "type": "(item: BoardProps.Item<D>, actions: BoardProps.ItemActions) => Element",
+      "optional": false,
+      "description": "Specifies a function to render content for board items. The return value must include board item component.\nThe function takes the item and its associated actions (BoardProps.ItemActions) that include:\n* `removeItem(): void` - the callback to issue the item's removal. Once issued, the `onItemsChange` will fire to update the state.\n"
+    }
+  ],
+  "events": [
+    {
+      "name": "onItemsChange",
+      "description": "Fired when a user interaction changes size or position of board items.\nThe change detail has the following properties:\n* `items`: (readonly Item<D>[]) - the updated items array.\n* `addedItem`: (Item<D>, optional) - the item that was added as part of the update, if available.\n* `removedItem`: (Item<D>, optional) - the item that was removed as part of the update, if available.\n",
+      "cancelable": false,
+      "detailType": "BoardProps.ItemsChangeDetail<D>",
+      "detailInlineType": {
+        "name": "BoardProps.ItemsChangeDetail",
+        "type": "object",
+        "properties": [
+          {
+            "name": "addedItem",
+            "type": "BoardProps.Item<D>",
+            "optional": true
+          },
+          {
+            "name": "items",
+            "type": "ReadonlyArray<BoardProps.Item<D>>",
+            "optional": false
+          },
+          {
+            "name": "removedItem",
+            "type": "BoardProps.Item<D>",
+            "optional": true
+          }
+        ]
+      }
+    }
+  ]
+};