@cloudscape-design/board-components 3.0.25 → 3.0.27

package/board/internal.js

@@ -7,6 +7,7 @@ import { getDataAttributes } from "../internal/base-component/get-data-attribute
 import { useContainerColumns } from "../internal/breakpoints";
 import { TRANSITION_DURATION_MS } from "../internal/constants";
 import { useDragSubscription } from "../internal/dnd-controller/controller";
+import { useGlobalDragStateStyles } from "../internal/global-drag-state-styles";
 import Grid from "../internal/grid";
 import { ItemContainer } from "../internal/item-container";
 import { LayoutEngine } from "../internal/layout-engine/engine";
@@ -28,6 +29,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
     const [currentColumns, containerQueryRef] = useContainerColumns();
     const containerRef = useMergeRefs(containerAccessRef, containerQueryRef);
     const itemContainerRef = useRef({});
+    useGlobalDragStateStyles();
     const autoScrollHandlers = useAutoScroll();
     const [transitionState, dispatch] = useTransition();
     const transition = transitionState.transition;
@@ -97,7 +99,6 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
             collisionIds: interactionType === "pointer" && isElementOverBoard(collisionRect) ? collisionIds : [],
         });
         autoScrollHandlers.addPointerEventHandlers();
-        document.body.classList.add(styles[`current-operation-${operation}`]);
     });
     useDragSubscription("update", ({ interactionType, collisionIds, positionOffset, collisionRect }) => {
         dispatch({
@@ -110,7 +111,6 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
     useDragSubscription("submit", () => {
         dispatch({ type: "submit" });
         autoScrollHandlers.removePointerEventHandlers();
-        document.body.classList.remove(styles["current-operation-reorder"], styles["current-operation-resize"]);
         if (!transition) {
             throw new Error("Invariant violation: no transition.");
         }
@@ -130,7 +130,6 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
     });
     useDragSubscription("discard", () => {
         dispatch({ type: "discard" });
-        document.body.classList.remove(styles["current-operation-reorder"], styles["current-operation-resize"]);
         autoScrollHandlers.removePointerEventHandlers();
     });
     useDragSubscription("acquire", ({ droppableId, draggableItem, acquiredItemElement }) => {

package/board/styles.css.js

@@ -1,12 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "placeholder": "awsui_placeholder_1h7dk_1vsa2_1",
-  "placeholder--active": "awsui_placeholder--active_1h7dk_1vsa2_5",
-  "placeholder--hover": "awsui_placeholder--hover_1h7dk_1vsa2_8",
-  "root": "awsui_root_1h7dk_1vsa2_12",
-  "empty": "awsui_empty_1h7dk_1vsa2_16",
-  "current-operation-reorder": "awsui_current-operation-reorder_1h7dk_1vsa2_25",
-  "current-operation-resize": "awsui_current-operation-resize_1h7dk_1vsa2_29"
+  "placeholder": "awsui_placeholder_1h7dk_1yaxu_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_1yaxu_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_1yaxu_8",
+  "root": "awsui_root_1h7dk_1yaxu_12",
+  "empty": "awsui_empty_1h7dk_1yaxu_16"
 };
   

package/board/styles.scoped.css

@@ -1,31 +1,23 @@
-.awsui_placeholder_1h7dk_1vsa2_1:not(#\9) {
+.awsui_placeholder_1h7dk_1yaxu_1:not(#\9) {
   border-radius: var(--border-radius-container-pmtq2d, 16px);
   height: 100%;
 }
-.awsui_placeholder--active_1h7dk_1vsa2_5:not(#\9) {
+.awsui_placeholder--active_1h7dk_1yaxu_5:not(#\9) {
   background-color: var(--color-board-placeholder-active-kxfgmn, #e9ebed);
 }
-.awsui_placeholder--hover_1h7dk_1vsa2_8:not(#\9) {
+.awsui_placeholder--hover_1h7dk_1yaxu_8:not(#\9) {
   background-color: var(--color-board-placeholder-hover-8tcom5, #d3e7f9);
 }
 
-.awsui_root_1h7dk_1vsa2_12:not(#\9) {
+.awsui_root_1h7dk_1yaxu_12:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_empty_1h7dk_1vsa2_16:not(#\9) {
+.awsui_empty_1h7dk_1yaxu_16:not(#\9) {
   box-sizing: border-box;
   width: 100%;
   padding: var(--space-scaled-m-gxhdpl, 16px) var(--space-scaled-l-2rs0gk, 20px) var(--space-scaled-l-2rs0gk, 20px);
   color: var(--color-text-empty-v5xueo, #5f6b7a);
   display: flex;
   justify-content: center;
-}
-
-.awsui_current-operation-reorder_1h7dk_1vsa2_25:not(#\9) {
-  cursor: grabbing;
-}
-
-.awsui_current-operation-resize_1h7dk_1vsa2_29:not(#\9) {
-  cursor: nwse-resize;
 }

package/board/styles.selectors.js

@@ -2,12 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "placeholder": "awsui_placeholder_1h7dk_1vsa2_1",
-  "placeholder--active": "awsui_placeholder--active_1h7dk_1vsa2_5",
-  "placeholder--hover": "awsui_placeholder--hover_1h7dk_1vsa2_8",
-  "root": "awsui_root_1h7dk_1vsa2_12",
-  "empty": "awsui_empty_1h7dk_1vsa2_16",
-  "current-operation-reorder": "awsui_current-operation-reorder_1h7dk_1vsa2_25",
-  "current-operation-resize": "awsui_current-operation-resize_1h7dk_1vsa2_29"
+  "placeholder": "awsui_placeholder_1h7dk_1yaxu_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_1yaxu_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_1yaxu_8",
+  "root": "awsui_root_1h7dk_1yaxu_12",
+  "empty": "awsui_empty_1h7dk_1yaxu_16"
 };
   

package/board-item/header.js

@@ -2,7 +2,9 @@ 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 { useVisualRefresh } from "../internal/base-component/use-visual-refresh.js";
 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] }));
+    const isVisualRefresh = useVisualRefresh();
+    return (_jsxs("div", { className: clsx(styles.header, isVisualRefresh && styles.refresh), 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/styles.css.js

@@ -1,15 +1,16 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_9ckv7_tgeft_1",
-  "container-override": "awsui_container-override_9ckv7_tgeft_6",
-  "active": "awsui_active_9ckv7_tgeft_6",
-  "header": "awsui_header_9ckv7_tgeft_31",
-  "flexible": "awsui_flexible_9ckv7_tgeft_37",
-  "handle": "awsui_handle_9ckv7_tgeft_41",
-  "header-content": "awsui_header-content_9ckv7_tgeft_45",
-  "settings": "awsui_settings_9ckv7_tgeft_49",
-  "fixed": "awsui_fixed_9ckv7_tgeft_54",
-  "resizer": "awsui_resizer_9ckv7_tgeft_58"
+  "root": "awsui_root_9ckv7_h85wa_1",
+  "container-override": "awsui_container-override_9ckv7_h85wa_6",
+  "active": "awsui_active_9ckv7_h85wa_6",
+  "header": "awsui_header_9ckv7_h85wa_31",
+  "flexible": "awsui_flexible_9ckv7_h85wa_37",
+  "handle": "awsui_handle_9ckv7_h85wa_41",
+  "refresh": "awsui_refresh_9ckv7_h85wa_44",
+  "header-content": "awsui_header-content_9ckv7_h85wa_48",
+  "settings": "awsui_settings_9ckv7_h85wa_52",
+  "fixed": "awsui_fixed_9ckv7_h85wa_60",
+  "resizer": "awsui_resizer_9ckv7_h85wa_64"
 };
   

package/board-item/styles.scoped.css

@@ -1,21 +1,21 @@
-.awsui_root_9ckv7_tgeft_1:not(#\9) {
+.awsui_root_9ckv7_h85wa_1:not(#\9) {
   display: contents;
 }
 
 /* TODO: use container API instead of styles override */
-.awsui_container-override_9ckv7_tgeft_6.awsui_active_9ckv7_tgeft_6:not(#\9) {
+.awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9) {
   box-shadow: var(--shadow-container-active-x0fzbz, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_tgeft_6.awsui_active_9ckv7_tgeft_6:not(#\9) {
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9) {
   position: relative;
   box-sizing: border-box;
   outline: none;
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_tgeft_6.awsui_active_9ckv7_tgeft_6:not(#\9) {
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: -1px;
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_tgeft_6.awsui_active_9ckv7_tgeft_6:not(#\9)::before {
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -28,34 +28,40 @@
   border: 2px solid var(--color-border-item-focused-4t19h5, #0972d3);
 }
 
-.awsui_header_9ckv7_tgeft_31:not(#\9) {
+.awsui_header_9ckv7_h85wa_31:not(#\9) {
   display: flex;
   justify-items: center;
   padding: var(--space-scaled-s-913kwi, 12px) calc(var(--space-container-horizontal-jxdgil, 20px) - var(--space-scaled-xs-wbfgrv, 8px));
 }
 
-.awsui_flexible_9ckv7_tgeft_37:not(#\9) {
+.awsui_flexible_9ckv7_h85wa_37:not(#\9) {
   flex: 1 1 min-content;
 }
 
-.awsui_handle_9ckv7_tgeft_41:not(#\9) {
+.awsui_handle_9ckv7_h85wa_41:not(#\9) {
   margin-top: calc(var(--space-scaled-xxs-t2t62i, 4px) + 1px);
 }
+.awsui_refresh_9ckv7_h85wa_44 > .awsui_handle_9ckv7_h85wa_41:not(#\9) {
+  margin-top: calc(var(--space-static-xxxs-b6tgp7, 2px) + 1px);
+}
 
-.awsui_header-content_9ckv7_tgeft_45:not(#\9) {
+.awsui_header-content_9ckv7_h85wa_48:not(#\9) {
   margin-left: var(--space-scaled-xxs-t2t62i, 4px);
 }
 
-.awsui_settings_9ckv7_tgeft_49:not(#\9) {
+.awsui_settings_9ckv7_h85wa_52:not(#\9) {
   margin-top: calc(var(--space-scaled-xxxs-jdgipl, 2px) + 1px);
   margin-left: var(--space-static-xs-zgeph4, 8px);
 }
+.awsui_refresh_9ckv7_h85wa_44 > .awsui_settings_9ckv7_h85wa_52:not(#\9) {
+  margin-top: 0px;
+}
 
-.awsui_fixed_9ckv7_tgeft_54:not(#\9) {
+.awsui_fixed_9ckv7_h85wa_60:not(#\9) {
   flex: 0 0 auto;
 }
 
-.awsui_resizer_9ckv7_tgeft_58:not(#\9) {
+.awsui_resizer_9ckv7_h85wa_64:not(#\9) {
   position: absolute;
   bottom: calc(var(--space-static-xs-zgeph4, 8px) - var(--space-static-xxxs-b6tgp7, 2px));
   right: calc(var(--space-static-xs-zgeph4, 8px) - var(--space-static-xxxs-b6tgp7, 2px));

package/board-item/styles.selectors.js

@@ -2,15 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_9ckv7_tgeft_1",
-  "container-override": "awsui_container-override_9ckv7_tgeft_6",
-  "active": "awsui_active_9ckv7_tgeft_6",
-  "header": "awsui_header_9ckv7_tgeft_31",
-  "flexible": "awsui_flexible_9ckv7_tgeft_37",
-  "handle": "awsui_handle_9ckv7_tgeft_41",
-  "header-content": "awsui_header-content_9ckv7_tgeft_45",
-  "settings": "awsui_settings_9ckv7_tgeft_49",
-  "fixed": "awsui_fixed_9ckv7_tgeft_54",
-  "resizer": "awsui_resizer_9ckv7_tgeft_58"
+  "root": "awsui_root_9ckv7_h85wa_1",
+  "container-override": "awsui_container-override_9ckv7_h85wa_6",
+  "active": "awsui_active_9ckv7_h85wa_6",
+  "header": "awsui_header_9ckv7_h85wa_31",
+  "flexible": "awsui_flexible_9ckv7_h85wa_37",
+  "handle": "awsui_handle_9ckv7_h85wa_41",
+  "refresh": "awsui_refresh_9ckv7_h85wa_44",
+  "header-content": "awsui_header-content_9ckv7_h85wa_48",
+  "settings": "awsui_settings_9ckv7_h85wa_52",
+  "fixed": "awsui_fixed_9ckv7_h85wa_60",
+  "resizer": "awsui_resizer_9ckv7_h85wa_64"
 };
   

package/internal/environment.js

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

package/internal/global-drag-state-styles/index.d.ts

@@ -0,0 +1 @@
+export declare function useGlobalDragStateStyles(): void;

package/internal/global-drag-state-styles/index.js

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useDragSubscription } from "../dnd-controller/controller";
+import styles from "./styles.css.js";
+function assertNever(value) {
+    throw new Error("Unexpected value: " + value);
+}
+function setup({ operation, interactionType }) {
+    switch (operation) {
+        case "insert":
+        case "reorder":
+            document.body.classList.add(styles["show-grab-cursor"]);
+            break;
+        case "resize":
+            document.body.classList.add(styles["show-resize-cursor"]);
+            break;
+        default:
+            // there will be a type error if not all operation types are handled
+            assertNever(operation);
+    }
+    if (interactionType === "pointer") {
+        document.body.classList.add(styles["disable-selection"]);
+    }
+}
+function teardown() {
+    document.body.classList.remove(styles["show-grab-cursor"], styles["show-resize-cursor"], styles["disable-selection"]);
+}
+export function useGlobalDragStateStyles() {
+    useDragSubscription("start", setup);
+    useDragSubscription("discard", teardown);
+    useDragSubscription("submit", teardown);
+}

package/internal/global-drag-state-styles/styles.css.js

@@ -0,0 +1,8 @@
+
+    import './styles.scoped.css';
+    export default {
+  "show-grab-cursor": "awsui_show-grab-cursor_1fgk7_1nqmi_1",
+  "show-resize-cursor": "awsui_show-resize-cursor_1fgk7_1nqmi_5",
+  "disable-selection": "awsui_disable-selection_1fgk7_1nqmi_9"
+};
+  

package/internal/global-drag-state-styles/styles.scoped.css

@@ -0,0 +1,12 @@
+.awsui_show-grab-cursor_1fgk7_1nqmi_1 *:not(#\9) {
+  cursor: grabbing;
+}
+
+.awsui_show-resize-cursor_1fgk7_1nqmi_5 *:not(#\9) {
+  cursor: nwse-resize;
+}
+
+.awsui_disable-selection_1fgk7_1nqmi_9 *:not(#\9) {
+  -webkit-user-select: none;
+          user-select: none;
+}

package/internal/global-drag-state-styles/styles.selectors.js

@@ -0,0 +1,9 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "show-grab-cursor": "awsui_show-grab-cursor_1fgk7_1nqmi_1",
+  "show-resize-cursor": "awsui_show-resize-cursor_1fgk7_1nqmi_5",
+  "disable-selection": "awsui_disable-selection_1fgk7_1nqmi_9"
+};
+  

package/internal/item-container/index.js

@@ -4,6 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CSS as CSSUtil } from "@dnd-kit/utilities";
 import clsx from "clsx";
 import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
 import { useDragSubscription, useDraggable, } from "../dnd-controller/controller";
 import { Coordinates } from "../utils/coordinates";
 import { getNormalizedElementRect } from "../utils/screen";
@@ -99,6 +100,17 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         // draggableApi is not expected to change
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [item.id, transitionInteractionType, transitionItemId]);
+    useEffect(() => {
+        if (transitionInteractionType === "keyboard" && transitionItemId === item.id) {
+            const onPointerDown = () => draggableApi.submitTransition();
+            window.addEventListener("pointerdown", onPointerDown, true);
+            return () => {
+                window.removeEventListener("pointerdown", onPointerDown, true);
+            };
+        }
+        // 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.
@@ -175,11 +187,11 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         }
     }
     function onBlur() {
-        // When drag- or resize handle loses focus the transition must be discarded with two exceptions:
+        // When drag- or resize handle loses focus the transition must be submitted with two exceptions:
         // 1. If the last interaction is not "keyboard" (the user clicked on another handle issuing a new transition);
         // 2. If the item is borrowed (in that case the focus moves to the acquired item which is expected).
         if (transition && transition.interactionType === "keyboard" && !transition.isBorrowed) {
-            draggableApi.discardTransition();
+            draggableApi.submitTransition();
         }
     }
     function onDragHandlePointerDown(event) {
@@ -254,11 +266,13 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         focusDragHandle: () => { var _a; return (_a = dragHandleRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
     }));
     const isActive = (!!transition && !transition.isBorrowed) || !!acquired;
+    const shouldUsePortal = ((transition === null || transition === void 0 ? void 0 : transition.operation) === "insert" || (transition === null || transition === void 0 ? void 0 : transition.operation) === "reorder") &&
+        (transition === null || transition === void 0 ? void 0 : transition.interactionType) === "pointer";
     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: {
+    const content = (_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,
@@ -274,4 +288,5 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
                     }
                     : null,
             }, children: childrenRef.current }) }));
+    return shouldUsePortal ? _jsx("div", { children: createPortal(content, document.body) }) : content;
 }

package/internal/item-container/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_lljvd_udubn_1",
-  "inTransition": "awsui_inTransition_lljvd_udubn_7",
-  "transformed": "awsui_transformed_lljvd_udubn_12",
-  "removed": "awsui_removed_lljvd_udubn_17",
-  "dragged": "awsui_dragged_lljvd_udubn_21",
-  "resized": "awsui_resized_lljvd_udubn_26",
-  "borrowed": "awsui_borrowed_lljvd_udubn_31"
+  "root": "awsui_root_lljvd_1nttw_1",
+  "inTransition": "awsui_inTransition_lljvd_1nttw_7",
+  "transformed": "awsui_transformed_lljvd_1nttw_12",
+  "removed": "awsui_removed_lljvd_1nttw_17",
+  "dragged": "awsui_dragged_lljvd_1nttw_21",
+  "resized": "awsui_resized_lljvd_1nttw_26",
+  "borrowed": "awsui_borrowed_lljvd_1nttw_31"
 };
   

package/internal/item-container/styles.scoped.css

@@ -1,33 +1,33 @@
-.awsui_root_lljvd_udubn_1:not(#\9) {
+.awsui_root_lljvd_1nttw_1:not(#\9) {
   touch-action: none;
   position: relative;
   height: 100%;
 }
 
-.awsui_inTransition_lljvd_udubn_7:not(#\9) {
+.awsui_inTransition_lljvd_1nttw_7:not(#\9) {
   transition: transform 200ms;
   transition-timing-function: ease;
 }
 
-.awsui_transformed_lljvd_udubn_12:not(#\9) {
+.awsui_transformed_lljvd_1nttw_12:not(#\9) {
   position: absolute;
   z-index: 1;
 }
 
-.awsui_removed_lljvd_udubn_17:not(#\9) {
+.awsui_removed_lljvd_1nttw_17:not(#\9) {
   display: none;
 }
 
-.awsui_dragged_lljvd_udubn_21:not(#\9) {
-  z-index: 5000;
+.awsui_dragged_lljvd_1nttw_21:not(#\9) {
+  z-index: 2000;
   position: fixed;
 }
 
-.awsui_resized_lljvd_udubn_26:not(#\9) {
-  z-index: 5000;
+.awsui_resized_lljvd_1nttw_26:not(#\9) {
+  z-index: 2000;
   position: absolute;
 }
 
-.awsui_borrowed_lljvd_udubn_31:not(#\9) {
-  opacity: 0.5;
+.awsui_borrowed_lljvd_1nttw_31:not(#\9) {
+  display: none;
 }

package/internal/item-container/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_lljvd_udubn_1",
-  "inTransition": "awsui_inTransition_lljvd_udubn_7",
-  "transformed": "awsui_transformed_lljvd_udubn_12",
-  "removed": "awsui_removed_lljvd_udubn_17",
-  "dragged": "awsui_dragged_lljvd_udubn_21",
-  "resized": "awsui_resized_lljvd_udubn_26",
-  "borrowed": "awsui_borrowed_lljvd_udubn_31"
+  "root": "awsui_root_lljvd_1nttw_1",
+  "inTransition": "awsui_inTransition_lljvd_1nttw_7",
+  "transformed": "awsui_transformed_lljvd_1nttw_12",
+  "removed": "awsui_removed_lljvd_1nttw_17",
+  "dragged": "awsui_dragged_lljvd_1nttw_21",
+  "resized": "awsui_resized_lljvd_1nttw_26",
+  "borrowed": "awsui_borrowed_lljvd_1nttw_31"
 };
   

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "c4526c624ca8da79074743777269704dac807809"
+  "commit": "a1dd58c7cb3157d4d806d7d6c3910b9cc8376b7d"
 }

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

@@ -51,10 +51,11 @@ export function useAutoScroll() {
         scrollIntoViewTimerRef.current && clearTimeout(scrollIntoViewTimerRef.current);
         const activeElementBeforeDelay = document.activeElement;
         scrollIntoViewTimerRef.current = setTimeout(() => {
+            var _a, _b;
             if (document.activeElement &&
                 document.activeElement === activeElementBeforeDelay &&
                 getLastInteraction() === "keyboard") {
-                document.activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                (_b = (_a = document.activeElement).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { behavior: "smooth", block: "nearest" });
             }
         }, delay);
     }, [getLastInteraction]);

package/package.json

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

package/test-utils/dom/board/index.js

@@ -7,7 +7,7 @@ const styles_selectors_js_1 = require("../../../board/styles.selectors.js");
 const board_item_1 = require("../board-item");
 class BoardWrapper extends dom_1.ComponentWrapper {
     findItemById(itemId) {
-        return this.findComponent(`[data-item-id="${itemId}"]`, board_item_1.default);
+        return (0, dom_1.createWrapper)().findComponent(`[data-item-id="${itemId}"]`, board_item_1.default);
     }
 }
 exports.default = BoardWrapper;

package/test-utils/dom/board/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/board/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0E;AAC1E,4EAA6D;AAC7D,8CAA6C;AAE7C,MAAqB,YAAa,SAAQ,sBAAgB;IAGxD,YAAY,CAAC,MAAc;QACzB,OAAO,IAAI,CAAC,aAAa,CAAC,kBAAkB,MAAM,IAAI,EAAE,oBAAgB,CAAC,CAAC;IAC5E,CAAC;;AALH,+BAMC;AALQ,yBAAY,GAAW,6BAAW,CAAC,IAAI,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/board/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAAyF;AACzF,4EAA6D;AAC7D,8CAA6C;AAE7C,MAAqB,YAAa,SAAQ,sBAAgB;IAGxD,YAAY,CAAC,MAAc;QACzB,OAAO,IAAA,mBAAa,GAAE,CAAC,aAAa,CAAC,kBAAkB,MAAM,IAAI,EAAE,oBAAgB,CAAC,CAAC;IACvF,CAAC;;AALH,+BAMC;AALQ,yBAAY,GAAW,6BAAW,CAAC,IAAI,CAAC"}

package/test-utils/selectors/board/index.js

@@ -7,7 +7,7 @@ const styles_selectors_js_1 = require("../../../board/styles.selectors.js");
 const board_item_1 = require("../board-item");
 class BoardWrapper extends selectors_1.ComponentWrapper {
     findItemById(itemId) {
-        return this.findComponent(`[data-item-id="${itemId}"]`, board_item_1.default);
+        return (0, selectors_1.createWrapper)().findComponent(`[data-item-id="${itemId}"]`, board_item_1.default);
     }
 }
 exports.default = BoardWrapper;

package/test-utils/selectors/board/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/board/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgF;AAChF,4EAA6D;AAC7D,8CAA6C;AAC7C,MAAqB,YAAa,SAAQ,4BAAgB;IAExD,YAAY,CAAC,MAAc;QACzB,OAAO,IAAI,CAAC,aAAa,CAAC,kBAAkB,MAAM,IAAI,EAAE,oBAAgB,CAAC,CAAC;IAC5E,CAAC;;AAJH,+BAKC;AAJQ,yBAAY,GAAW,6BAAW,CAAC,IAAI,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/board/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAA+F;AAC/F,4EAA6D;AAC7D,8CAA6C;AAC7C,MAAqB,YAAa,SAAQ,4BAAgB;IAExD,YAAY,CAAC,MAAc;QACzB,OAAO,IAAA,yBAAa,GAAE,CAAC,aAAa,CAAC,kBAAkB,MAAM,IAAI,EAAE,oBAAgB,CAAC,CAAC;IACvF,CAAC;;AAJH,+BAKC;AAJQ,yBAAY,GAAW,6BAAW,CAAC,IAAI,CAAC"}