@cloudscape-design/board-components 3.0.9 → 3.0.11

package/board/internal.d.ts

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

package/board/internal.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
 import clsx from "clsx";
 import { useEffect, useRef } from "react";
+import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { useContainerColumns } from "../internal/breakpoints";
 import { TRANSITION_DURATION_MS } from "../internal/constants";
 import { useDragSubscription } from "../internal/dnd-controller/controller";
@@ -21,7 +22,7 @@ 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, }) {
+export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStrings, __internalRootRef, ...rest }) {
     var _a, _b;
     const containerAccessRef = useRef(null);
     const [columns, containerQueryRef] = useContainerColumns();
@@ -156,7 +157,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
     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, layout: [...placeholdersLayout.items, ...itemsLayout.items], children: (gridContext) => {
+    return (_jsxs("div", { ref: __internalRootRef, ...getDataAttributes(rest), 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, 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) : {};

package/board-item/internal.d.ts

@@ -1,4 +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;
+export declare function InternalBoardItem({ children, header, settings, disableContentPaddings, footer, i18nStrings, __internalRootRef, ...rest }: BoardItemProps & InternalBaseComponentProps): JSX.Element;

package/board-item/internal.js

@@ -4,17 +4,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Container from "@cloudscape-design/components/container";
 import clsx from "clsx";
 import { useId } from "react";
+import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 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, }) {
+export function InternalBoardItem({ children, header, settings, disableContentPaddings, footer, i18nStrings, __internalRootRef, ...rest }) {
     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 })] }));
+    return (_jsxs("div", { ref: __internalRootRef, className: styles.root, ...getDataAttributes(rest), 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

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_9ckv7_7y7kt_1",
-  "container-override": "awsui_container-override_9ckv7_7y7kt_6",
-  "active": "awsui_active_9ckv7_7y7kt_6",
-  "header": "awsui_header_9ckv7_7y7kt_10",
-  "flexible": "awsui_flexible_9ckv7_7y7kt_16",
-  "handle": "awsui_handle_9ckv7_7y7kt_20",
-  "header-content": "awsui_header-content_9ckv7_7y7kt_24",
-  "settings": "awsui_settings_9ckv7_7y7kt_28",
-  "fixed": "awsui_fixed_9ckv7_7y7kt_33",
-  "resizer": "awsui_resizer_9ckv7_7y7kt_37"
+  "root": "awsui_root_9ckv7_o6rfp_1",
+  "container-override": "awsui_container-override_9ckv7_o6rfp_6",
+  "active": "awsui_active_9ckv7_o6rfp_6",
+  "header": "awsui_header_9ckv7_o6rfp_10",
+  "flexible": "awsui_flexible_9ckv7_o6rfp_16",
+  "handle": "awsui_handle_9ckv7_o6rfp_20",
+  "header-content": "awsui_header-content_9ckv7_o6rfp_24",
+  "settings": "awsui_settings_9ckv7_o6rfp_28",
+  "fixed": "awsui_fixed_9ckv7_o6rfp_33",
+  "resizer": "awsui_resizer_9ckv7_o6rfp_37"
 };
   

package/board-item/styles.scoped.css

@@ -1,40 +1,40 @@
-.awsui_root_9ckv7_7y7kt_1:not(#\9) {
+.awsui_root_9ckv7_o6rfp_1:not(#\9) {
   display: contents;
 }
 
 /* TODO: use container API instead of styles override */
-.awsui_container-override_9ckv7_7y7kt_6.awsui_active_9ckv7_7y7kt_6:not(#\9) {
+.awsui_container-override_9ckv7_o6rfp_6.awsui_active_9ckv7_o6rfp_6:not(#\9) {
   box-shadow: var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
 }
 
-.awsui_header_9ckv7_7y7kt_10:not(#\9) {
+.awsui_header_9ckv7_o6rfp_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_7y7kt_16:not(#\9) {
+.awsui_flexible_9ckv7_o6rfp_16:not(#\9) {
   flex: 1 1 min-content;
 }
 
-.awsui_handle_9ckv7_7y7kt_20:not(#\9) {
+.awsui_handle_9ckv7_o6rfp_20:not(#\9) {
   margin-top: calc(var(--space-scaled-xxs-95dhkm, 4px) + 1px);
 }
 
-.awsui_header-content_9ckv7_7y7kt_24:not(#\9) {
+.awsui_header-content_9ckv7_o6rfp_24:not(#\9) {
   margin-left: var(--space-scaled-xxs-95dhkm, 4px);
 }
 
-.awsui_settings_9ckv7_7y7kt_28:not(#\9) {
-  margin-top: calc(var(--space-scaled-xxxs-b6dm8t, 2px) + 1px);
+.awsui_settings_9ckv7_o6rfp_28:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxxs-lo883m, 2px) + 1px);
   margin-left: var(--space-static-xs-9adq92, 8px);
 }
 
-.awsui_fixed_9ckv7_7y7kt_33:not(#\9) {
+.awsui_fixed_9ckv7_o6rfp_33:not(#\9) {
   flex: 0 0 auto;
 }
 
-.awsui_resizer_9ckv7_7y7kt_37:not(#\9) {
+.awsui_resizer_9ckv7_o6rfp_37:not(#\9) {
   position: absolute;
   bottom: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));
   right: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));

package/board-item/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_9ckv7_7y7kt_1",
-  "container-override": "awsui_container-override_9ckv7_7y7kt_6",
-  "active": "awsui_active_9ckv7_7y7kt_6",
-  "header": "awsui_header_9ckv7_7y7kt_10",
-  "flexible": "awsui_flexible_9ckv7_7y7kt_16",
-  "handle": "awsui_handle_9ckv7_7y7kt_20",
-  "header-content": "awsui_header-content_9ckv7_7y7kt_24",
-  "settings": "awsui_settings_9ckv7_7y7kt_28",
-  "fixed": "awsui_fixed_9ckv7_7y7kt_33",
-  "resizer": "awsui_resizer_9ckv7_7y7kt_37"
+  "root": "awsui_root_9ckv7_o6rfp_1",
+  "container-override": "awsui_container-override_9ckv7_o6rfp_6",
+  "active": "awsui_active_9ckv7_o6rfp_6",
+  "header": "awsui_header_9ckv7_o6rfp_10",
+  "flexible": "awsui_flexible_9ckv7_o6rfp_16",
+  "handle": "awsui_handle_9ckv7_o6rfp_20",
+  "header-content": "awsui_header-content_9ckv7_o6rfp_24",
+  "settings": "awsui_settings_9ckv7_o6rfp_28",
+  "fixed": "awsui_fixed_9ckv7_o6rfp_33",
+  "resizer": "awsui_resizer_9ckv7_o6rfp_37"
 };
   

package/internal/base-component/get-data-attributes.d.ts

@@ -0,0 +1 @@
+export declare function getDataAttributes(props: Record<string, string>): Record<string, any>;

package/internal/base-component/get-data-attributes.js

@@ -0,0 +1,11 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export function getDataAttributes(props) {
+    const result = {};
+    Object.keys(props).forEach((prop) => {
+        if (prop.startsWith("data-")) {
+            result[prop] = props[prop];
+        }
+    });
+    return result;
+}

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (d7b7a1cf)";
+export var PACKAGE_VERSION = "3.0.0 (80489570)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/item-container/index.d.ts

@@ -4,7 +4,7 @@ import { BoardItemDefinitionBase, Direction, Transform } from "../interfaces";
 export interface ItemContainerRef {
     focusDragHandle(): void;
 }
-export interface ItemContext {
+interface ItemContextType {
     isActive: boolean;
     dragHandle: {
         ref: RefObject<HTMLButtonElement>;
@@ -16,7 +16,8 @@ export interface ItemContext {
         onKeyDown(event: KeyboardEvent): void;
     };
 }
-export declare function useItemContext(): ItemContext;
+export declare const ItemContext: import("react").Context<ItemContextType | null>;
+export declare function useItemContext(): ItemContextType;
 /**
  * Defines item's parameters and its relation with the layout.
  *
@@ -46,3 +47,4 @@ export interface ItemContainerProps {
     children: ReactNode;
 }
 export declare const ItemContainer: import("react").ForwardRefExoticComponent<ItemContainerProps & import("react").RefAttributes<ItemContainerRef>>;
+export {};

package/internal/item-container/index.js

@@ -7,14 +7,13 @@ import { createContext, forwardRef, useContext, useEffect, useImperativeHandle,
 import { useDragSubscription, useDraggable, } from "../dnd-controller/controller";
 import { Coordinates } from "../utils/coordinates";
 import { getNormalizedElementRect } from "../utils/screen";
-import { useStableEventHandler } from "../utils/use-stable-event-handler";
-import { useThrottledEventHandler } from "../utils/use-throttled-event-handler";
+import { throttle } from "../utils/throttle";
 import { getCollisionRect } from "./get-collision-rect";
 import { getNextDroppable } from "./get-next-droppable";
 import styles from "./styles.css.js";
-const Context = createContext(null);
+export const ItemContext = createContext(null);
 export function useItemContext() {
-    const ctx = useContext(Context);
+    const ctx = useContext(ItemContext);
     if (!ctx) {
         throw new Error("Unable to find BoardItem context.");
     }
@@ -35,18 +34,6 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
             return getCollisionRect(operation, itemRef.current, coordinates, sizeOverride);
         },
     });
-    const onPointerMove = useThrottledEventHandler((event) => {
-        var _a, _b, _c, _d;
-        const coordinates = Coordinates.fromEvent(event);
-        draggableApi.updateTransition(new Coordinates({
-            x: Math.max(coordinates.x, (_b = (_a = pointerBoundariesRef.current) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : Number.NEGATIVE_INFINITY),
-            y: Math.max(coordinates.y, (_d = (_c = pointerBoundariesRef.current) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : Number.NEGATIVE_INFINITY),
-        }));
-    }, 10);
-    const onPointerUp = useStableEventHandler(() => {
-        onPointerMove.cancel();
-        draggableApi.submitTransition();
-    });
     function updateTransition({ operation, interactionType, draggableItem, collisionRect, coordinates, dropTarget, }) {
         if (item.id === draggableItem.id) {
             const [width, height] = [collisionRect.right - collisionRect.left, collisionRect.bottom - collisionRect.top];
@@ -89,6 +76,18 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     const transitionInteractionType = (_a = transition === null || transition === void 0 ? void 0 : transition.interactionType) !== null && _a !== void 0 ? _a : null;
     const transitionItemId = (_b = transition === null || transition === void 0 ? void 0 : transition.itemId) !== null && _b !== void 0 ? _b : null;
     useEffect(() => {
+        const onPointerMove = throttle((event) => {
+            var _a, _b, _c, _d;
+            const coordinates = Coordinates.fromEvent(event);
+            draggableApi.updateTransition(new Coordinates({
+                x: Math.max(coordinates.x, (_b = (_a = pointerBoundariesRef.current) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : Number.NEGATIVE_INFINITY),
+                y: Math.max(coordinates.y, (_d = (_c = pointerBoundariesRef.current) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : Number.NEGATIVE_INFINITY),
+            }));
+        }, 10);
+        const onPointerUp = () => {
+            onPointerMove.cancel();
+            draggableApi.submitTransition();
+        };
         if (transitionInteractionType === "pointer" && transitionItemId === item.id) {
             window.addEventListener("pointermove", onPointerMove);
             window.addEventListener("pointerup", onPointerUp);
@@ -97,7 +96,9 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
             window.removeEventListener("pointermove", onPointerMove);
             window.removeEventListener("pointerup", onPointerUp);
         };
-    }, [item.id, transitionInteractionType, transitionItemId, onPointerMove, onPointerUp]);
+        // draggableApi is not expected to change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [item.id, transitionInteractionType, transitionItemId]);
     function onKeyboardTransitionToggle(operation) {
         // The acquired item is a copy and does not have the transition state.
         // However, pressing "Space" or "Enter" on the acquired item must submit the active transition.
@@ -252,7 +253,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     useImperativeHandle(ref, () => ({
         focusDragHandle: () => { var _a; return (_a = dragHandleRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
     }));
-    return (_jsx("div", { ref: itemRef, className: clsx(styles.root, ...itemTransitionClassNames), style: itemTransitionStyle, "data-item-id": item.id, onBlur: onBlur, children: _jsx(Context.Provider, { value: {
+    return (_jsx("div", { ref: itemRef, className: clsx(styles.root, ...itemTransitionClassNames), style: itemTransitionStyle, "data-item-id": item.id, onBlur: onBlur, children: _jsx(ItemContext.Provider, { value: {
                 isActive: (!!transition && !transition.isBorrowed) || !!acquired,
                 dragHandle: {
                     ref: dragHandleRef,

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "d7b7a1cf21b47243ecc9d552fc84f09cf70bf951"
+  "commit": "80489570231464cdf039fe26f27deedddecb1858"
 }

package/internal/utils/layout.js

@@ -78,19 +78,13 @@ export function transformItems(sourceItems, gridLayout, resizeTarget) {
     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);
+        item.columnOffset = { ...item.columnOffset, [gridLayout.columns]: x };
         if (item.id === resizeTarget) {
             item.columnSpan = width;
             item.rowSpan = height;

package/internal/utils/throttle.js

@@ -1,12 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 export function throttle(func, delay) {
+    let cancelled = false;
     let pending = null;
     let lastInvokeTime = null;
     let timerId = null;
     // Runs on every animation frame until timer stopped.
     function pendingFunc() {
-        if (pending === null || lastInvokeTime === null) {
+        if (cancelled === true || pending === null || lastInvokeTime === null) {
             return;
         }
         const invokeTime = Date.now();
@@ -46,6 +47,7 @@ export function throttle(func, delay) {
         pending = null;
         lastInvokeTime = null;
         timerId = null;
+        cancelled = true;
     };
     return throttled;
 }

package/items-palette/internal.d.ts

@@ -1,4 +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;
+export declare function InternalItemsPalette<D>({ items, renderItem, i18nStrings, __internalRootRef, ...rest }: ItemsPaletteProps<D> & InternalBaseComponentProps): JSX.Element;

package/items-palette/internal.js

@@ -3,12 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
 import SpaceBetween from "@cloudscape-design/components/space-between";
 import { useRef, useState } from "react";
+import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { useDragSubscription } from "../internal/dnd-controller/controller";
 import { ItemContainer } from "../internal/item-container";
 import LiveRegion from "../internal/live-region";
 import { ScreenReaderGridNavigation } from "../internal/screenreader-grid-navigation";
 import styles from "./styles.css.js";
-export function InternalItemsPalette({ items, renderItem, i18nStrings, __internalRootRef, }) {
+export function InternalItemsPalette({ items, renderItem, i18nStrings, __internalRootRef, ...rest }) {
     const paletteRef = useRef(null);
     const itemContainerRef = useRef({});
     const [dropState, setDropState] = useState();
@@ -54,7 +55,7 @@ export function InternalItemsPalette({ items, renderItem, i18nStrings, __interna
         columns: 1,
         rows: items.length,
     };
-    return (_jsxs("div", { ref: __internalRootRef, children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: (item) => i18nStrings.navigationItemAriaLabel(item), onActivateItem: focusItem }), _jsx("div", { ref: paletteRef, className: styles.root, children: _jsx(SpaceBetween, { size: "l", children: items.map((item) => (_jsx(ItemContainer, { ref: (elem) => {
+    return (_jsxs("div", { ref: __internalRootRef, ...getDataAttributes(rest), children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: (item) => i18nStrings.navigationItemAriaLabel(item), onActivateItem: focusItem }), _jsx("div", { ref: paletteRef, className: styles.root, children: _jsx(SpaceBetween, { size: "l", children: items.map((item) => (_jsx(ItemContainer, { ref: (elem) => {
                             if (elem) {
                                 itemContainerRef.current[item.id] = elem;
                             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/board-components",
-  "version": "3.0.9",
+  "version": "3.0.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/board-components.git"

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

@@ -1 +0,0 @@
-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

@@ -1,11 +0,0 @@
-// 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), []);
-}