@cloudscape-design/board-components 3.0.26 → 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/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (a2fe5f8e)";
+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";
@@ -265,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,
@@ -285,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_gj9xm_1",
-  "inTransition": "awsui_inTransition_lljvd_gj9xm_7",
-  "transformed": "awsui_transformed_lljvd_gj9xm_12",
-  "removed": "awsui_removed_lljvd_gj9xm_17",
-  "dragged": "awsui_dragged_lljvd_gj9xm_21",
-  "resized": "awsui_resized_lljvd_gj9xm_26",
-  "borrowed": "awsui_borrowed_lljvd_gj9xm_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_gj9xm_1:not(#\9) {
+.awsui_root_lljvd_1nttw_1:not(#\9) {
   touch-action: none;
   position: relative;
   height: 100%;
 }
 
-.awsui_inTransition_lljvd_gj9xm_7:not(#\9) {
+.awsui_inTransition_lljvd_1nttw_7:not(#\9) {
   transition: transform 200ms;
   transition-timing-function: ease;
 }
 
-.awsui_transformed_lljvd_gj9xm_12:not(#\9) {
+.awsui_transformed_lljvd_1nttw_12:not(#\9) {
   position: absolute;
   z-index: 1;
 }
 
-.awsui_removed_lljvd_gj9xm_17:not(#\9) {
+.awsui_removed_lljvd_1nttw_17:not(#\9) {
   display: none;
 }
 
-.awsui_dragged_lljvd_gj9xm_21:not(#\9) {
-  z-index: 5000;
+.awsui_dragged_lljvd_1nttw_21:not(#\9) {
+  z-index: 2000;
   position: fixed;
 }
 
-.awsui_resized_lljvd_gj9xm_26:not(#\9) {
-  z-index: 5000;
+.awsui_resized_lljvd_1nttw_26:not(#\9) {
+  z-index: 2000;
   position: absolute;
 }
 
-.awsui_borrowed_lljvd_gj9xm_31:not(#\9) {
+.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_gj9xm_1",
-  "inTransition": "awsui_inTransition_lljvd_gj9xm_7",
-  "transformed": "awsui_transformed_lljvd_gj9xm_12",
-  "removed": "awsui_removed_lljvd_gj9xm_17",
-  "dragged": "awsui_dragged_lljvd_gj9xm_21",
-  "resized": "awsui_resized_lljvd_gj9xm_26",
-  "borrowed": "awsui_borrowed_lljvd_gj9xm_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": "a2fe5f8eb68cda2710cf0e62974bbea6e998da30"
+  "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.26",
+  "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"}