@cloudscape-design/board-components 3.0.10 → 3.0.12

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) : {};
@@ -185,14 +186,14 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
                                     else {
                                         delete itemContainerRef.current[item.id];
                                     }
-                                }, item: item, transform: transforms[item.id], inTransition: !!layoutShift, placed: true, acquired: item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), getItemSize: () => ({
+                                }, item: item, transform: transforms[item.id], inTransition: !!transition || !!removeTransition, placed: true, acquired: item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), getItemSize: () => ({
                                     width: gridContext.getWidth(itemSize.width),
                                     minWidth: gridContext.getWidth(getMinColumnSpan(item, columns)),
                                     maxWidth: gridContext.getWidth(itemMaxSize.width),
                                     height: gridContext.getHeight(itemSize.height),
                                     minHeight: gridContext.getHeight(getMinRowSpan(item)),
                                     maxHeight: gridContext.getHeight(itemMaxSize.height),
-                                }), onKeyMove: onItemMove, children: renderItem(item, { removeItem: () => removeItemAction(item) }) }, item.id));
+                                }), onKeyMove: onItemMove, children: () => renderItem(item, { removeItem: () => removeItemAction(item) }) }, item.id));
                         });
                         return children;
                     } })) : (empty) }), _jsx(LiveRegion, { children: announcement })] }));

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/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 (15818dea)";
+export var PACKAGE_VERSION = "3.0.0 (e54f625f)";
 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.
  *
@@ -43,6 +44,7 @@ export interface ItemContainerProps {
         maxHeight: number;
     };
     onKeyMove?(direction: Direction): void;
-    children: ReactNode;
+    children: () => ReactNode;
 }
 export declare const ItemContainer: import("react").ForwardRefExoticComponent<ItemContainerProps & import("react").RefAttributes<ItemContainerRef>>;
+export {};

package/internal/item-container/index.js

@@ -11,9 +11,9 @@ 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.");
     }
@@ -253,8 +253,13 @@ 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: {
-                isActive: (!!transition && !transition.isBorrowed) || !!acquired,
+    const isActive = (!!transition && !transition.isBorrowed) || !!acquired;
+    const childrenRef = useRef(null);
+    if (!inTransition || isActive) {
+        childrenRef.current = children();
+    }
+    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,
                 dragHandle: {
                     ref: dragHandleRef,
                     onPointerDown: onDragHandlePointerDown,
@@ -266,5 +271,5 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
                         onKeyDown: onResizeHandleKeyDown,
                     }
                     : null,
-            }, children: children }) }));
+            }, children: childrenRef.current }) }));
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "15818dea059d8aaa61ad7c3a37cfeb228d48fa53"
+  "commit": "e54f625f9918c8ec22794da2af6fc13af4b62c12"
 }

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/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;
                             }
@@ -67,7 +68,7 @@ export function InternalItemsPalette({ items, renderItem, i18nStrings, __interna
                             }
                             const { width, height } = dropContext.scale(item);
                             return { width, minWidth: width, maxWidth: width, height, minHeight: height, maxHeight: height };
-                        }, children: renderItem(item, {
+                        }, children: () => renderItem(item, {
                             showPreview: (dropState === null || dropState === void 0 ? void 0 : dropState.id) === item.id && dropState.isExpanded,
                         }) }, item.id))) }) }), _jsx(LiveRegion, { children: announcement })] }));
 }

package/package.json

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