@cloudscape-design/board-components 3.0.25 → 3.0.26

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 (a2fe5f8e)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/item-container/index.js

@@ -99,6 +99,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 +186,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) {

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_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"
 };
   

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

@@ -1,33 +1,33 @@
-.awsui_root_lljvd_udubn_1:not(#\9) {
+.awsui_root_lljvd_gj9xm_1:not(#\9) {
   touch-action: none;
   position: relative;
   height: 100%;
 }
 
-.awsui_inTransition_lljvd_udubn_7:not(#\9) {
+.awsui_inTransition_lljvd_gj9xm_7:not(#\9) {
   transition: transform 200ms;
   transition-timing-function: ease;
 }
 
-.awsui_transformed_lljvd_udubn_12:not(#\9) {
+.awsui_transformed_lljvd_gj9xm_12:not(#\9) {
   position: absolute;
   z-index: 1;
 }
 
-.awsui_removed_lljvd_udubn_17:not(#\9) {
+.awsui_removed_lljvd_gj9xm_17:not(#\9) {
   display: none;
 }
 
-.awsui_dragged_lljvd_udubn_21:not(#\9) {
+.awsui_dragged_lljvd_gj9xm_21:not(#\9) {
   z-index: 5000;
   position: fixed;
 }
 
-.awsui_resized_lljvd_udubn_26:not(#\9) {
+.awsui_resized_lljvd_gj9xm_26:not(#\9) {
   z-index: 5000;
   position: absolute;
 }
 
-.awsui_borrowed_lljvd_udubn_31:not(#\9) {
-  opacity: 0.5;
+.awsui_borrowed_lljvd_gj9xm_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_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"
 };
   

package/internal/manifest.json

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

package/package.json

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