@cloudscape-design/board-components 3.0.0

package/internal/utils/layout.js

@@ -0,0 +1,132 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { MIN_COL_SPAN, MIN_ROW_SPAN } from "../constants";
+/**
+ * The function produces grid layout from board items and given number of columns.
+ * The positional data is taken from the items when available or the default placement is used otherwise.
+ */
+export function interpretItems(items, columns) {
+    const layoutItems = [];
+    const columnHeights = Array(columns).fill(0);
+    function getColumnSpan(item) {
+        var _a;
+        const minColumnSpan = getMinColumnSpan(item, columns);
+        const columnSpan = (_a = item.columnSpan) !== null && _a !== void 0 ? _a : getDefaultColumnSpan(item, columns);
+        return Math.min(columns, Math.max(minColumnSpan, columnSpan));
+    }
+    function getRowSpan(item) {
+        var _a;
+        const minRowSpan = getMinRowSpan(item);
+        const rowSpan = (_a = item.rowSpan) !== null && _a !== void 0 ? _a : getDefaultRowSpan(item);
+        return Math.max(minRowSpan, rowSpan);
+    }
+    function getColumnOffset(item, currentOffset) {
+        var _a, _b;
+        const columnSpan = getColumnSpan(item);
+        const rowSpan = getRowSpan(item);
+        const columnOffset = (_b = (_a = item.columnOffset) === null || _a === void 0 ? void 0 : _a[columns]) !== null && _b !== void 0 ? _b : findOptimalColumnOffset(currentOffset, columnSpan, rowSpan);
+        return columnOffset + columnSpan <= columns ? columnOffset : 0;
+    }
+    function findOptimalColumnOffset(currentColumnOffset, columnSpan, rowSpan) {
+        for (let colOffset = currentColumnOffset; colOffset + columnSpan <= columns; colOffset++) {
+            if (getRowOffset(colOffset, columnSpan) + rowSpan <= getRowOffset(0, columns)) {
+                return colOffset;
+            }
+        }
+        for (let colOffset = 0; colOffset + columnSpan <= columns; colOffset++) {
+            if (getRowOffset(colOffset, columnSpan) + rowSpan <= getRowOffset(0, columns)) {
+                return colOffset;
+            }
+        }
+        return currentColumnOffset;
+    }
+    function getRowOffset(columnOffset, columnSpan) {
+        let rowOffset = 0;
+        for (let col = columnOffset; col < columnOffset + columnSpan; col++) {
+            rowOffset = Math.max(rowOffset, columnHeights[col]);
+        }
+        return rowOffset;
+    }
+    for (let index = 0, columnOffset = 0, rowOffset = 0; index < items.length; index++, rowOffset = 0) {
+        const columnSpan = getColumnSpan(items[index]);
+        const rowSpan = getRowSpan(items[index]);
+        columnOffset = getColumnOffset(items[index], columnOffset);
+        rowOffset = getRowOffset(columnOffset, columnSpan);
+        layoutItems.push({ id: items[index].id, width: columnSpan, height: rowSpan, x: columnOffset, y: rowOffset });
+        for (let col = columnOffset; col < columnOffset + columnSpan; col++) {
+            columnHeights[col] = rowOffset + rowSpan;
+        }
+        columnOffset += columnSpan;
+    }
+    layoutItems.sort(itemComparator);
+    return { items: layoutItems, columns, rows: getRowOffset(0, columns) };
+}
+/**
+ * The function produces new items from the current state and updated grid layout.
+ * The positional data for the given number of columns is preserved as is while the other layouts are partially invalidated.
+ */
+export function transformItems(sourceItems, gridLayout, resizeTarget) {
+    const itemById = new Map(sourceItems.map((item) => [item.id, item]));
+    const getItem = (itemId) => {
+        const item = itemById.get(itemId);
+        if (!item) {
+            throw new Error("Invariant violation: no matching source item found.");
+        }
+        return item;
+    };
+    const sortedLayout = gridLayout.items.slice().sort(itemComparator);
+    const items = [];
+    let changeFromIndex = sortedLayout.findIndex(({ id }, index) => id !== sourceItems[index].id || id === resizeTarget);
+    changeFromIndex = changeFromIndex !== -1 ? changeFromIndex : sortedLayout.length;
+    function setColumnOffset(item, layout, value) {
+        if (!item.columnOffset) {
+            item.columnOffset = {};
+        }
+        item.columnOffset[layout] = value;
+    }
+    for (let index = 0; index < sortedLayout.length; index++) {
+        const { id, x, width, height } = sortedLayout[index];
+        const item = { ...getItem(id) };
+        if (index >= changeFromIndex) {
+            item.columnOffset = undefined;
+        }
+        setColumnOffset(item, gridLayout.columns, x);
+        if (item.id === resizeTarget) {
+            item.columnSpan = width;
+            item.rowSpan = height;
+        }
+        items.push(item);
+    }
+    return items;
+}
+export function createPlaceholdersLayout(rows, columns) {
+    const layoutItems = [];
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < columns; col++) {
+            layoutItems.push({ id: `awsui-placeholder-${row}-${col}`, x: col, y: row, width: 1, height: 1 });
+        }
+    }
+    return { items: layoutItems, columns, rows };
+}
+export function getMinColumnSpan(item, columns) {
+    var _a, _b;
+    return Math.min(columns, Math.max(MIN_COL_SPAN, (_b = (_a = item.definition) === null || _a === void 0 ? void 0 : _a.minColumnSpan) !== null && _b !== void 0 ? _b : 0));
+}
+export function getDefaultColumnSpan(item, columns) {
+    var _a, _b;
+    return Math.min(columns, Math.max(getMinColumnSpan(item, columns), (_b = (_a = item.definition) === null || _a === void 0 ? void 0 : _a.defaultColumnSpan) !== null && _b !== void 0 ? _b : 0));
+}
+export function getMinRowSpan(item) {
+    var _a, _b;
+    return Math.max(MIN_ROW_SPAN, (_b = (_a = item.definition) === null || _a === void 0 ? void 0 : _a.minRowSpan) !== null && _b !== void 0 ? _b : 0);
+}
+export function getDefaultRowSpan(item) {
+    var _a, _b;
+    return Math.max(getMinRowSpan(item), (_b = (_a = item.definition) === null || _a === void 0 ? void 0 : _a.defaultRowSpan) !== null && _b !== void 0 ? _b : 0);
+}
+function itemComparator(a, b) {
+    if (a.y !== b.y) {
+        return a.y > b.y ? 1 : -1;
+    }
+    return a.x > b.x ? 1 : -1;
+}

package/internal/utils/position.d.ts

@@ -0,0 +1,9 @@
+export declare class Position {
+    readonly __type = "Position";
+    readonly x: number;
+    readonly y: number;
+    constructor({ x, y }: {
+        x: number;
+        y: number;
+    });
+}

package/internal/utils/position.js

@@ -0,0 +1,9 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export class Position {
+    constructor({ x, y }) {
+        this.__type = "Position";
+        this.x = x;
+        this.y = y;
+    }
+}

package/internal/utils/rects.d.ts

@@ -0,0 +1,6 @@
+import { Direction, Rect } from "../interfaces";
+export declare function isInside(rect: Rect, bounds: Rect): boolean;
+export declare function isIntersecting(rect1: Rect, rect2: Rect): boolean;
+export declare function getIntersectionArea(rect1: Rect, rect2: Rect): number;
+export declare function getGridPlacement(target: Rect, grid: readonly Rect[]): Rect;
+export declare function getClosestNeighbor(target: Rect, sources: readonly Rect[], direction: Direction): null | Rect;

package/internal/utils/rects.js

@@ -0,0 +1,76 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export function isInside(rect, bounds) {
+    return (rect.top >= bounds.top && rect.left >= bounds.left && rect.right <= bounds.right && rect.bottom <= bounds.bottom);
+}
+export function isIntersecting(rect1, rect2) {
+    return getIntersectionArea(rect1, rect2) > 0;
+}
+export function getIntersectionArea(rect1, rect2) {
+    let horizontalIntersectionLength = 0;
+    if (rect2.left <= rect1.left && rect1.left <= rect2.right) {
+        horizontalIntersectionLength = Math.min(rect1.right, rect2.right) - rect1.left;
+    }
+    else if (rect2.left <= rect1.right && rect1.right <= rect2.right) {
+        horizontalIntersectionLength = rect1.right - Math.max(rect1.left, rect2.left);
+    }
+    else if (rect1.left <= rect2.left && rect2.left <= rect1.right) {
+        horizontalIntersectionLength = Math.min(rect1.right, rect2.right) - rect2.left;
+    }
+    else if (rect1.left <= rect2.right && rect2.right <= rect1.right) {
+        horizontalIntersectionLength = rect2.right - Math.max(rect1.left, rect2.left);
+    }
+    let verticalIntersectionLength = 0;
+    if (rect2.top <= rect1.top && rect1.top <= rect2.bottom) {
+        verticalIntersectionLength = Math.min(rect1.bottom, rect2.bottom) - rect1.top;
+    }
+    else if (rect2.top <= rect1.bottom && rect1.bottom <= rect2.bottom) {
+        verticalIntersectionLength = rect1.bottom - Math.max(rect1.top, rect2.top);
+    }
+    else if (rect1.top <= rect2.top && rect2.top <= rect1.bottom) {
+        verticalIntersectionLength = Math.min(rect1.bottom, rect2.bottom) - rect2.top;
+    }
+    else if (rect1.top <= rect2.bottom && rect2.bottom <= rect1.bottom) {
+        verticalIntersectionLength = rect2.bottom - Math.max(rect1.top, rect2.top);
+    }
+    return horizontalIntersectionLength * verticalIntersectionLength;
+}
+export function getGridPlacement(target, grid) {
+    function getMinDistance(min, current, collision) {
+        const minDistance = Math.abs(min - collision);
+        const currentDistance = Math.abs(current - collision);
+        return currentDistance < minDistance ? current : min;
+    }
+    let placement = {
+        top: Number.POSITIVE_INFINITY,
+        left: Number.POSITIVE_INFINITY,
+        right: Number.POSITIVE_INFINITY,
+        bottom: Number.POSITIVE_INFINITY,
+    };
+    for (const rect of grid) {
+        if (isIntersecting(rect, target)) {
+            placement = {
+                top: getMinDistance(placement.top, rect.top, target.top),
+                left: getMinDistance(placement.left, rect.left, target.left),
+                right: getMinDistance(placement.right, rect.right, target.right),
+                bottom: getMinDistance(placement.bottom, rect.bottom, target.bottom),
+            };
+        }
+    }
+    return placement;
+}
+export function getClosestNeighbor(target, sources, direction) {
+    const getFirst = (rects) => { var _a; return (_a = rects[0]) !== null && _a !== void 0 ? _a : null; };
+    const verticalDiff = (r1, r2) => Math.abs(r1.top - target.top) - Math.abs(r2.top - target.top);
+    const horizontalDiff = (r1, r2) => Math.abs(r1.left - target.left) - Math.abs(r2.left - target.left);
+    switch (direction) {
+        case "left":
+            return getFirst(sources.filter((rect) => rect.right <= target.left).sort((r1, r2) => r2.left - r1.left || verticalDiff(r1, r2)));
+        case "right":
+            return getFirst(sources.filter((rect) => rect.left >= target.right).sort((r1, r2) => r1.left - r2.left || verticalDiff(r1, r2)));
+        case "up":
+            return getFirst(sources.filter((rect) => rect.bottom <= target.top).sort((r1, r2) => r2.top - r1.top || horizontalDiff(r1, r2)));
+        case "down":
+            return getFirst(sources.filter((rect) => rect.top >= target.bottom).sort((r1, r2) => r1.top - r2.top || horizontalDiff(r1, r2)));
+    }
+}

package/internal/utils/screen.d.ts

@@ -0,0 +1 @@
+export declare function getNormalizedElementRect(element: HTMLElement): DOMRect;

package/internal/utils/screen.js

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export function getNormalizedElementRect(element) {
+    const { x, y, left, right, top, bottom, width, height } = element.getBoundingClientRect();
+    const xOffset = element.ownerDocument.defaultView.pageXOffset - window.scrollX;
+    const yOffset = element.ownerDocument.defaultView.pageYOffset - window.scrollY;
+    return {
+        x: x + xOffset,
+        left: left + xOffset,
+        right: right + xOffset,
+        y: y + yOffset,
+        top: top + yOffset,
+        bottom: bottom + yOffset,
+        width: width,
+        height: height,
+    };
+}

package/internal/utils/stack-set.d.ts

@@ -0,0 +1,8 @@
+export declare class StackSet<T> implements Iterable<T> {
+    private list;
+    private set;
+    constructor(input?: Iterable<T>);
+    push(value: T): void;
+    pop(): null | T;
+    [Symbol.iterator](): Iterator<T>;
+}

package/internal/utils/stack-set.js

@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export class StackSet {
+    constructor(input = []) {
+        this.list = [...input];
+        this.set = new Set(this.list);
+    }
+    push(value) {
+        if (!this.set.has(value)) {
+            this.list.push(value);
+            this.set.add(value);
+        }
+    }
+    pop() {
+        var _a;
+        const value = (_a = this.list.pop()) !== null && _a !== void 0 ? _a : null;
+        value && this.set.delete(value);
+        return value;
+    }
+    [Symbol.iterator]() {
+        return this.list[Symbol.iterator]();
+    }
+}

package/internal/utils/throttle.d.ts

@@ -0,0 +1,5 @@
+export interface ThrottledFunction<F extends (...args: any) => any> {
+    (...args: Parameters<F>): void;
+    cancel(): void;
+}
+export declare function throttle<F extends (...args: any) => any>(func: F, delay: number): ThrottledFunction<F>;

package/internal/utils/throttle.js

@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export function throttle(func, delay) {
+    let pending = null;
+    let lastInvokeTime = null;
+    let timerId = null;
+    // Runs on every animation frame until timer stopped.
+    function pendingFunc() {
+        if (pending === null || lastInvokeTime === null) {
+            return;
+        }
+        const invokeTime = Date.now();
+        const shouldInvoke = invokeTime - lastInvokeTime >= delay;
+        if (shouldInvoke) {
+            func.apply(pending.this, pending.args);
+            lastInvokeTime = invokeTime;
+            pending = null;
+            timerId = null;
+        }
+        else {
+            startTimer();
+        }
+    }
+    function startTimer() {
+        if (timerId) {
+            cancelAnimationFrame(timerId);
+        }
+        timerId = requestAnimationFrame(pendingFunc);
+    }
+    // Decorated client function with delay mechanism.
+    function throttled(...args) {
+        if (lastInvokeTime === null) {
+            lastInvokeTime = Date.now();
+            func.apply(this, args);
+        }
+        else {
+            pending = { this: this, args };
+            startTimer();
+        }
+    }
+    // Prevents delayed function from execution when no longer needed.
+    throttled.cancel = () => {
+        if (timerId) {
+            cancelAnimationFrame(timerId);
+        }
+        pending = null;
+        lastInvokeTime = null;
+        timerId = null;
+    };
+    return throttled;
+}

package/internal/utils/use-auto-scroll.d.ts

@@ -0,0 +1,5 @@
+export declare function useAutoScroll(): {
+    addPointerEventHandlers: () => void;
+    removePointerEventHandlers: () => void;
+    scheduleActiveElementScrollIntoView: (delay: number) => void;
+};

package/internal/utils/use-auto-scroll.js

@@ -0,0 +1,62 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLastInteraction } from "./use-last-interaction";
+export function useAutoScroll() {
+    const [activeAutoScroll, setActiveAutoScroll] = useState("none");
+    const scrollIntoViewTimerRef = useRef(null);
+    const getLastInteraction = useLastInteraction();
+    // Scroll window repeatedly if activeAutoScroll="up" or activeAutoScroll="down".
+    useEffect(() => {
+        if (activeAutoScroll === "none") {
+            return;
+        }
+        const direction = activeAutoScroll === "up" ? -1 : 1;
+        let timer;
+        function scrollLoop() {
+            timer = setTimeout(() => {
+                window.scrollBy({ top: direction * 5 });
+                scrollLoop();
+            }, 10);
+        }
+        scrollLoop();
+        return () => clearTimeout(timer);
+    }, [activeAutoScroll]);
+    const onPointerMove = useCallback((event) => {
+        const autoScrollMargin = 50;
+        if (event.clientY > window.innerHeight - autoScrollMargin) {
+            setActiveAutoScroll("down");
+        }
+        else if (event.clientY < autoScrollMargin) {
+            setActiveAutoScroll("up");
+        }
+        else {
+            setActiveAutoScroll("none");
+        }
+    }, []);
+    const onPointerUp = useCallback(() => {
+        setActiveAutoScroll("none");
+    }, []);
+    const addPointerEventHandlers = useCallback(() => {
+        if (getLastInteraction() === "pointer") {
+            window.addEventListener("pointermove", onPointerMove);
+            window.addEventListener("pointerup", onPointerUp);
+        }
+    }, [getLastInteraction, onPointerMove, onPointerUp]);
+    const removePointerEventHandlers = useCallback(() => {
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+    }, [onPointerMove, onPointerUp]);
+    const scheduleActiveElementScrollIntoView = useCallback((delay) => {
+        scrollIntoViewTimerRef.current && clearTimeout(scrollIntoViewTimerRef.current);
+        const activeElementBeforeDelay = document.activeElement;
+        scrollIntoViewTimerRef.current = setTimeout(() => {
+            if (document.activeElement &&
+                document.activeElement === activeElementBeforeDelay &&
+                getLastInteraction() === "keyboard") {
+                document.activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            }
+        }, delay);
+    }, [getLastInteraction]);
+    return { addPointerEventHandlers, removePointerEventHandlers, scheduleActiveElementScrollIntoView };
+}

package/internal/utils/use-last-interaction.d.ts

@@ -0,0 +1 @@
+export declare function useLastInteraction(): () => "pointer" | "keyboard";

package/internal/utils/use-last-interaction.js

@@ -0,0 +1,22 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useEffect, useRef } from "react";
+export function useLastInteraction() {
+    const lastInteractionRef = useRef("pointer");
+    useEffect(() => {
+        const onPointerDown = () => {
+            lastInteractionRef.current = "pointer";
+        };
+        const onKeyDown = () => {
+            lastInteractionRef.current = "keyboard";
+        };
+        window.addEventListener("pointerdown", onPointerDown);
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+            window.removeEventListener("pointerdown", onPointerDown);
+            window.removeEventListener("keydown", onKeyDown);
+        };
+    }, []);
+    const getLastEvent = useCallback(() => lastInteractionRef.current, []);
+    return getLastEvent;
+}

package/internal/utils/use-merge-refs.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject, RefCallback } from "react";
+/**
+ * useMergeRefs merges multiple refs into a single ref callback.
+ *
+ * For example:
+ *  const mergedRef = useMergeRefs(ref1, ref2, ref3)
+ *  <div ref={refs}>...</div>
+ */
+export declare function useMergeRefs(...refs: Array<RefCallback<any> | MutableRefObject<any> | null | undefined>): ((value: any) => void) | null;

package/internal/utils/use-merge-refs.js

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useMemo } from "react";
+/**
+ * useMergeRefs merges multiple refs into a single ref callback.
+ *
+ * For example:
+ *  const mergedRef = useMergeRefs(ref1, ref2, ref3)
+ *  <div ref={refs}>...</div>
+ */
+export function useMergeRefs(...refs) {
+    return useMemo(() => {
+        if (refs.every((ref) => ref === null || ref === undefined)) {
+            return null;
+        }
+        return (value) => {
+            refs.forEach((ref) => {
+                if (typeof ref === "function") {
+                    ref(value);
+                }
+                else if (ref !== null && ref !== undefined) {
+                    ref.current = value;
+                }
+            });
+        };
+        // ESLint expects an array literal which we can not provide here
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}

package/internal/utils/use-stable-event-handler.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A callback that stays stable between renders even as the dependencies change.
+ * Not a recommended React pattern, so it should be used sparingly and only if
+ * the callback is an event handler (i.e. not used during rendering) and causing
+ * clear performance issues.
+ *
+ * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+ */
+export declare function useStableEventHandler<T extends (...args: any[]) => any>(fn: T): T;

package/internal/utils/use-stable-event-handler.js

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useEffect, useRef } from "react";
+// The code is copied from https://github.com/cloudscape-design/components/blob/main/src/internal/hooks/use-stable-event-handler/index.ts
+/**
+ * A callback that stays stable between renders even as the dependencies change.
+ * Not a recommended React pattern, so it should be used sparingly and only if
+ * the callback is an event handler (i.e. not used during rendering) and causing
+ * clear performance issues.
+ *
+ * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+ */
+export function useStableEventHandler(fn) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.apply(undefined, args); }, []);
+}

package/internal/utils/use-throttled-event-handler.d.ts

@@ -0,0 +1 @@
+export declare function useThrottledEventHandler<T extends (...args: any[]) => void>(callback: T, delay: number): import("./throttle").ThrottledFunction<T>;

package/internal/utils/use-throttled-event-handler.js

@@ -0,0 +1,11 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback } from "react";
+import { throttle } from "./throttle";
+import { useStableEventHandler } from "./use-stable-event-handler";
+export function useThrottledEventHandler(callback, delay) {
+    const stableCallback = useStableEventHandler(callback);
+    // ESLint rule requires an inline function which we cannot provide here
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useCallback(throttle(((...args) => stableCallback(...args)), delay), []);
+}

package/internal/utils/zip-arrays.d.ts

@@ -0,0 +1 @@
+export declare function zipTwoArrays<A, B>(a: readonly A[], b: readonly B[]): readonly [A, B][];

package/internal/utils/zip-arrays.js

@@ -0,0 +1,8 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export function zipTwoArrays(a, b) {
+    const longest = a.length >= b.length ? a : b;
+    return longest.map((_, idx) => {
+        return [a[idx], b[idx]];
+    });
+}

package/items-palette/index.d.ts

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

package/items-palette/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 { InternalItemsPalette } from "./internal";
+export default function ItemsPalette(props) {
+    const baseComponentProps = useBaseComponent("ItemsPalette");
+    return _jsx(InternalItemsPalette, { ...props, ...baseComponentProps });
+}
+applyDisplayName(ItemsPalette, "ItemsPalette");

package/items-palette/interfaces.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { BoardItemDefinitionBase, DataFallbackType } from "../internal/interfaces";
+export interface ItemsPaletteProps<D = DataFallbackType> {
+    /**
+     * Specifies the items displayed in the palette. The content of each item is controlled by the `renderItem` property.
+     *
+     * The ItemsPaletteProps.Item includes:
+     * * `id` (string) - the unique item identifier. The IDs of any two items in a page must be different.
+     * * `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.
+     * * `definition.minColumnSpan` (number, optional) - the minimal number of columns the item is allowed to take (in a 4 column layout). It can't be less than one. Defaults to one.
+     * * `definition.defaultRowSpan` (number) - the number or rows the item will take when inserted to the board. It can't be less than `definition.minRowSpan`.
+     * * `definition.defaultColumnSpan` (number) - the number or columns the item will take (in a 4 column layout) when inserted to the board. It can't be less than `definition.minColumnSpan`.
+     * * `data` (D) - optional item data which can include the specific configurations of an item, such as its title.
+     */
+    items: ReadonlyArray<ItemsPaletteProps.Item<D>>;
+    /**
+     * Specifies a function to render content for a palette item. The return value must include board item component.
+     *
+     * The function takes the item and its associated context (ItemsPaletteProps.ItemContext) that include:
+     * * `showPreview` (boolean) - a flag that indicates if the item's content needs to be rendered in preview mode.
+     */
+    renderItem: (item: ItemsPaletteProps.Item<D>, context: ItemsPaletteProps.ItemContext) => JSX.Element;
+    /**
+     * An object containing all the necessary localized strings required by the component.
+     *
+     * Live announcements:
+     * * `liveAnnouncementDndStarted` (string) - live announcement string to indicate start of DnD.
+     * * `liveAnnouncementDndDiscarded` (string) - live announcement string to indicate discard of DnD.
+     *
+     * Navigation labels:
+     * * `navigationAriaLabel` (string) - the ARIA label for the accessible board navigation element.
+     * * `navigationAriaDescription` (string, optional) - the ARIA description for the accessible board navigation element.
+     * * `navigationItemAriaLabel(null | BoardProps.Item<D>): string` - the function to create the ARIA label for a navigation board item.
+     */
+    i18nStrings: ItemsPaletteProps.I18nStrings<D>;
+}
+export declare namespace ItemsPaletteProps {
+    type Item<D = DataFallbackType> = BoardItemDefinitionBase<D>;
+    interface ItemContext {
+        showPreview: boolean;
+    }
+    interface I18nStrings<D> {
+        liveAnnouncementDndStarted: string;
+        liveAnnouncementDndDiscarded: string;
+        navigationAriaLabel: string;
+        navigationAriaDescription?: string;
+        navigationItemAriaLabel: (item: ItemsPaletteProps.Item<D>) => string;
+    }
+}

package/items-palette/interfaces.js

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

package/items-palette/internal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
+import { ItemsPaletteProps } from "./interfaces";
+export declare function InternalItemsPalette<D>({ items, renderItem, i18nStrings, __internalRootRef, }: ItemsPaletteProps<D> & InternalBaseComponentProps): JSX.Element;