@cloudscape-design/board-components 3.0.32 → 3.0.34

package/board/internal.js

@@ -10,7 +10,6 @@ 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";
 import LiveRegion from "../internal/live-region";
 import { ScreenReaderGridNavigation } from "../internal/screenreader-grid-navigation";
 import { createPlaceholdersLayout, getDefaultColumnSpan, getDefaultRowSpan, getMinColumnSpan, getMinRowSpan, interpretItems, } from "../internal/utils/layout";
@@ -72,9 +71,10 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
             const removedItemIndex = items.findIndex((it) => it.id === removeTransition.removedItem.id);
             const nextIndexToFocus = removedItemIndex !== items.length - 1 ? removedItemIndex : items.length - 2;
             focusNextRenderIndexRef.current = nextIndexToFocus;
+            onItemsChange(createItemsChangeEvent(items, removeTransition.layoutShift));
         }, TRANSITION_DURATION_MS);
         return () => clearTimeout(timeoutId);
-    }, [removeTransition, items]);
+    }, [removeTransition, items, onItemsChange]);
     const rows = selectTransitionRows(transitionState) || itemsLayout.rows;
     const placeholdersLayout = createPlaceholdersLayout(rows, itemsLayout.columns);
     function isElementOverBoard(rect) {
@@ -148,8 +148,6 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
     });
     const removeItemAction = (removedItem) => {
         dispatch({ type: "init-remove", items, itemsLayout, removedItem });
-        const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id);
-        onItemsChange(createItemsChangeEvent(items, layoutShift));
     };
     function focusItem(itemId) {
         itemContainerRef.current[itemId].focusDragHandle();

package/board/styles.css.js

@@ -1,10 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "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"
+  "placeholder": "awsui_placeholder_1h7dk_inx8o_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8",
+  "root": "awsui_root_1h7dk_inx8o_12",
+  "empty": "awsui_empty_1h7dk_inx8o_16"
 };
   

package/board/styles.scoped.css

@@ -1,23 +1,23 @@
-.awsui_placeholder_1h7dk_1yaxu_1:not(#\9) {
-  border-radius: var(--border-radius-container-pmtq2d, 16px);
+.awsui_placeholder_1h7dk_inx8o_1:not(#\9) {
+  border-radius: var(--border-radius-container-wqv1zi, 16px);
   height: 100%;
 }
-.awsui_placeholder--active_1h7dk_1yaxu_5:not(#\9) {
-  background-color: var(--color-board-placeholder-active-kxfgmn, #e9ebed);
+.awsui_placeholder--active_1h7dk_inx8o_5:not(#\9) {
+  background-color: var(--color-board-placeholder-active-jh49z8, #e9ebed);
 }
-.awsui_placeholder--hover_1h7dk_1yaxu_8:not(#\9) {
-  background-color: var(--color-board-placeholder-hover-8tcom5, #d3e7f9);
+.awsui_placeholder--hover_1h7dk_inx8o_8:not(#\9) {
+  background-color: var(--color-board-placeholder-hover-ombmcs, #d3e7f9);
 }
 
-.awsui_root_1h7dk_1yaxu_12:not(#\9) {
+.awsui_root_1h7dk_inx8o_12:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_empty_1h7dk_1yaxu_16:not(#\9) {
+.awsui_empty_1h7dk_inx8o_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);
+  padding: var(--space-scaled-m-mo5yse, 16px) var(--space-scaled-l-0hpmd7, 20px) var(--space-scaled-l-0hpmd7, 20px);
+  color: var(--color-text-empty-2wfcyr, #5f6b7a);
   display: flex;
   justify-content: center;
 }

package/board/styles.selectors.js

@@ -2,10 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "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"
+  "placeholder": "awsui_placeholder_1h7dk_inx8o_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8",
+  "root": "awsui_root_1h7dk_inx8o_12",
+  "empty": "awsui_empty_1h7dk_inx8o_16"
 };
   

package/board-item/styles.css.js

@@ -1,16 +1,16 @@
 
     import './styles.scoped.css';
     export default {
-  "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"
+  "root": "awsui_root_9ckv7_1p0lm_1",
+  "container-override": "awsui_container-override_9ckv7_1p0lm_6",
+  "active": "awsui_active_9ckv7_1p0lm_6",
+  "header": "awsui_header_9ckv7_1p0lm_31",
+  "flexible": "awsui_flexible_9ckv7_1p0lm_37",
+  "handle": "awsui_handle_9ckv7_1p0lm_41",
+  "refresh": "awsui_refresh_9ckv7_1p0lm_44",
+  "header-content": "awsui_header-content_9ckv7_1p0lm_48",
+  "settings": "awsui_settings_9ckv7_1p0lm_52",
+  "fixed": "awsui_fixed_9ckv7_1p0lm_60",
+  "resizer": "awsui_resizer_9ckv7_1p0lm_64"
 };
   

package/board-item/styles.scoped.css

@@ -1,21 +1,21 @@
-.awsui_root_9ckv7_h85wa_1:not(#\9) {
+.awsui_root_9ckv7_1p0lm_1:not(#\9) {
   display: contents;
 }
 
 /* TODO: use container API instead of styles override */
-.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));
+.awsui_container-override_9ckv7_1p0lm_6.awsui_active_9ckv7_1p0lm_6:not(#\9) {
+  box-shadow: var(--shadow-container-active-7yvi6w, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9) {
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_1p0lm_6.awsui_active_9ckv7_1p0lm_6:not(#\9) {
   position: relative;
   box-sizing: border-box;
   outline: none;
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9) {
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_1p0lm_6.awsui_active_9ckv7_1p0lm_6:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: -1px;
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9)::before {
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_1p0lm_6.awsui_active_9ckv7_1p0lm_6:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -24,45 +24,45 @@
   top: calc(-1 * 0px);
   width: calc(100% + 2 * 0px);
   height: calc(100% + 2 * 0px);
-  border-radius: var(--border-radius-container-pmtq2d, 16px);
-  border: 2px solid var(--color-border-item-focused-4t19h5, #0972d3);
+  border-radius: var(--border-radius-container-wqv1zi, 16px);
+  border: 2px solid var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_header_9ckv7_h85wa_31:not(#\9) {
+.awsui_header_9ckv7_1p0lm_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));
+  padding: var(--space-scaled-s-aqzyko, 12px) calc(var(--space-container-horizontal-wfukh3, 20px) - var(--space-scaled-xs-26e2du, 8px));
 }
 
-.awsui_flexible_9ckv7_h85wa_37:not(#\9) {
+.awsui_flexible_9ckv7_1p0lm_37:not(#\9) {
   flex: 1 1 min-content;
 }
 
-.awsui_handle_9ckv7_h85wa_41:not(#\9) {
-  margin-top: calc(var(--space-scaled-xxs-t2t62i, 4px) + 1px);
+.awsui_handle_9ckv7_1p0lm_41:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxs-7597g1, 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_refresh_9ckv7_1p0lm_44 > .awsui_handle_9ckv7_1p0lm_41:not(#\9) {
+  margin-top: calc(var(--space-static-xxxs-3gu9os, 2px) + 1px);
 }
 
-.awsui_header-content_9ckv7_h85wa_48:not(#\9) {
-  margin-left: var(--space-scaled-xxs-t2t62i, 4px);
+.awsui_header-content_9ckv7_1p0lm_48:not(#\9) {
+  margin-left: var(--space-scaled-xxs-7597g1, 4px);
 }
 
-.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_settings_9ckv7_1p0lm_52:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxxs-27y4hv, 2px) + 1px);
+  margin-left: var(--space-static-xs-7sfb63, 8px);
 }
-.awsui_refresh_9ckv7_h85wa_44 > .awsui_settings_9ckv7_h85wa_52:not(#\9) {
+.awsui_refresh_9ckv7_1p0lm_44 > .awsui_settings_9ckv7_1p0lm_52:not(#\9) {
   margin-top: 0px;
 }
 
-.awsui_fixed_9ckv7_h85wa_60:not(#\9) {
+.awsui_fixed_9ckv7_1p0lm_60:not(#\9) {
   flex: 0 0 auto;
 }
 
-.awsui_resizer_9ckv7_h85wa_64:not(#\9) {
+.awsui_resizer_9ckv7_1p0lm_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));
+  bottom: calc(var(--space-static-xs-7sfb63, 8px) - var(--space-static-xxxs-3gu9os, 2px));
+  right: calc(var(--space-static-xs-7sfb63, 8px) - var(--space-static-xxxs-3gu9os, 2px));
 }

package/board-item/styles.selectors.js

@@ -2,16 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "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"
+  "root": "awsui_root_9ckv7_1p0lm_1",
+  "container-override": "awsui_container-override_9ckv7_1p0lm_6",
+  "active": "awsui_active_9ckv7_1p0lm_6",
+  "header": "awsui_header_9ckv7_1p0lm_31",
+  "flexible": "awsui_flexible_9ckv7_1p0lm_37",
+  "handle": "awsui_handle_9ckv7_1p0lm_41",
+  "refresh": "awsui_refresh_9ckv7_1p0lm_44",
+  "header-content": "awsui_header-content_9ckv7_1p0lm_48",
+  "settings": "awsui_settings_9ckv7_1p0lm_52",
+  "fixed": "awsui_fixed_9ckv7_1p0lm_60",
+  "resizer": "awsui_resizer_9ckv7_1p0lm_64"
 };
   

package/internal/dnd-controller/controller.js

@@ -1,8 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { useStableCallback } from "@cloudscape-design/component-toolkit/internal";
 import { useEffect } from "react";
 import { Coordinates } from "../utils/coordinates";
-import { useStableEventHandler } from "../utils/use-stable-event-handler";
 import { EventEmitter } from "./event-emitter";
 import { getHoveredDroppables } from "./get-hovered-droppables";
 class DragAndDropController extends EventEmitter {
@@ -98,7 +98,7 @@ class DragAndDropController extends EventEmitter {
 // Controller is a singleton and is shared between all d&d elements.
 const controller = new DragAndDropController();
 export function useDragSubscription(event, handler) {
-    const stableHandler = useStableEventHandler(handler);
+    const stableHandler = useStableCallback(handler);
     useEffect(() => controller.on(event, stableHandler), [event, stableHandler]);
 }
 export function useDraggable({ draggableItem, getCollisionRect, }) {

package/internal/environment.js

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

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "board-components",
-  "PACKAGE_VERSION": "3.0.0 (4a7c9c80)",
+  "PACKAGE_VERSION": "3.0.0 (b095e397)",
   "THEME": "open-source-visual-refresh",
   "ALWAYS_VISUAL_REFRESH": true
 }

package/internal/handle/styles.css.js

@@ -1,6 +1,6 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_cc1pu_1yi9f_1"
+  "handle": "awsui_handle_cc1pu_y0i9t_1"
 };
   

package/internal/handle/styles.scoped.css

@@ -1,11 +1,11 @@
-.awsui_handle_cc1pu_1yi9f_1:not(#\9) {
+.awsui_handle_cc1pu_y0i9t_1:not(#\9) {
   -webkit-appearance: none;
           appearance: none;
   background: transparent;
   border: none;
-  padding: var(--space-scaled-xxs-t2t62i, 4px);
-  color: var(--color-text-interactive-default-2sml2m, #414d5c);
+  padding: var(--space-scaled-xxs-7597g1, 4px);
+  color: var(--color-text-interactive-default-lnx6lk, #414d5c);
 }
-.awsui_handle_cc1pu_1yi9f_1:not(#\9):hover {
-  color: var(--color-text-interactive-hover-8bpozs, #000716);
+.awsui_handle_cc1pu_y0i9t_1:not(#\9):hover {
+  color: var(--color-text-interactive-hover-mj8add, #000716);
 }

package/internal/handle/styles.selectors.js

@@ -2,6 +2,6 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_cc1pu_1yi9f_1"
+  "handle": "awsui_handle_cc1pu_y0i9t_1"
 };
   

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "4a7c9c80e8d3f01df0e46772e037635bd3aee13c"
+  "commit": "b095e3972410e6135f434232cab514cd9af8fd8a"
 }

package/package.json

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

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

@@ -1,9 +0,0 @@
-/**
- * A callback that stays stable between renders even as the dependencies change.
- * Not a recommended React pattern, so it should be used sparingly and only if
- * the callback is an event handler (i.e. not used during rendering) and causing
- * clear performance issues.
- *
- * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
- */
-export declare function useStableEventHandler<T extends (...args: any[]) => any>(fn: T): T;

package/internal/utils/use-stable-event-handler.js

@@ -1,19 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import { useCallback, useEffect, useRef } from "react";
-// The code is copied from https://github.com/cloudscape-design/components/blob/main/src/internal/hooks/use-stable-event-handler/index.ts
-/**
- * A callback that stays stable between renders even as the dependencies change.
- * Not a recommended React pattern, so it should be used sparingly and only if
- * the callback is an event handler (i.e. not used during rendering) and causing
- * clear performance issues.
- *
- * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
- */
-export function useStableEventHandler(fn) {
-    const ref = useRef();
-    useEffect(() => {
-        ref.current = fn;
-    });
-    return useCallback((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.apply(undefined, args); }, []);
-}