@cloudscape-design/board-components 3.0.8 → 3.0.10

package/board-item/styles.css.js

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_9ckv7_7y7kt_1",
-  "container-override": "awsui_container-override_9ckv7_7y7kt_6",
-  "active": "awsui_active_9ckv7_7y7kt_6",
-  "header": "awsui_header_9ckv7_7y7kt_10",
-  "flexible": "awsui_flexible_9ckv7_7y7kt_16",
-  "handle": "awsui_handle_9ckv7_7y7kt_20",
-  "header-content": "awsui_header-content_9ckv7_7y7kt_24",
-  "settings": "awsui_settings_9ckv7_7y7kt_28",
-  "fixed": "awsui_fixed_9ckv7_7y7kt_33",
-  "resizer": "awsui_resizer_9ckv7_7y7kt_37"
+  "root": "awsui_root_9ckv7_o6rfp_1",
+  "container-override": "awsui_container-override_9ckv7_o6rfp_6",
+  "active": "awsui_active_9ckv7_o6rfp_6",
+  "header": "awsui_header_9ckv7_o6rfp_10",
+  "flexible": "awsui_flexible_9ckv7_o6rfp_16",
+  "handle": "awsui_handle_9ckv7_o6rfp_20",
+  "header-content": "awsui_header-content_9ckv7_o6rfp_24",
+  "settings": "awsui_settings_9ckv7_o6rfp_28",
+  "fixed": "awsui_fixed_9ckv7_o6rfp_33",
+  "resizer": "awsui_resizer_9ckv7_o6rfp_37"
 };
   

package/board-item/styles.scoped.css

@@ -1,40 +1,40 @@
-.awsui_root_9ckv7_7y7kt_1:not(#\9) {
+.awsui_root_9ckv7_o6rfp_1:not(#\9) {
   display: contents;
 }
 
 /* TODO: use container API instead of styles override */
-.awsui_container-override_9ckv7_7y7kt_6.awsui_active_9ckv7_7y7kt_6:not(#\9) {
+.awsui_container-override_9ckv7_o6rfp_6.awsui_active_9ckv7_o6rfp_6:not(#\9) {
   box-shadow: var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
 }
 
-.awsui_header_9ckv7_7y7kt_10:not(#\9) {
+.awsui_header_9ckv7_o6rfp_10:not(#\9) {
   display: flex;
   justify-items: center;
   padding: var(--space-scaled-s-cu1hzn, 12px) calc(var(--space-container-horizontal-tlw03i, 20px) - var(--space-scaled-xs-6859qs, 8px));
 }
 
-.awsui_flexible_9ckv7_7y7kt_16:not(#\9) {
+.awsui_flexible_9ckv7_o6rfp_16:not(#\9) {
   flex: 1 1 min-content;
 }
 
-.awsui_handle_9ckv7_7y7kt_20:not(#\9) {
+.awsui_handle_9ckv7_o6rfp_20:not(#\9) {
   margin-top: calc(var(--space-scaled-xxs-95dhkm, 4px) + 1px);
 }
 
-.awsui_header-content_9ckv7_7y7kt_24:not(#\9) {
+.awsui_header-content_9ckv7_o6rfp_24:not(#\9) {
   margin-left: var(--space-scaled-xxs-95dhkm, 4px);
 }
 
-.awsui_settings_9ckv7_7y7kt_28:not(#\9) {
-  margin-top: calc(var(--space-scaled-xxxs-b6dm8t, 2px) + 1px);
+.awsui_settings_9ckv7_o6rfp_28:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxxs-lo883m, 2px) + 1px);
   margin-left: var(--space-static-xs-9adq92, 8px);
 }
 
-.awsui_fixed_9ckv7_7y7kt_33:not(#\9) {
+.awsui_fixed_9ckv7_o6rfp_33:not(#\9) {
   flex: 0 0 auto;
 }
 
-.awsui_resizer_9ckv7_7y7kt_37:not(#\9) {
+.awsui_resizer_9ckv7_o6rfp_37:not(#\9) {
   position: absolute;
   bottom: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));
   right: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));

package/board-item/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_9ckv7_7y7kt_1",
-  "container-override": "awsui_container-override_9ckv7_7y7kt_6",
-  "active": "awsui_active_9ckv7_7y7kt_6",
-  "header": "awsui_header_9ckv7_7y7kt_10",
-  "flexible": "awsui_flexible_9ckv7_7y7kt_16",
-  "handle": "awsui_handle_9ckv7_7y7kt_20",
-  "header-content": "awsui_header-content_9ckv7_7y7kt_24",
-  "settings": "awsui_settings_9ckv7_7y7kt_28",
-  "fixed": "awsui_fixed_9ckv7_7y7kt_33",
-  "resizer": "awsui_resizer_9ckv7_7y7kt_37"
+  "root": "awsui_root_9ckv7_o6rfp_1",
+  "container-override": "awsui_container-override_9ckv7_o6rfp_6",
+  "active": "awsui_active_9ckv7_o6rfp_6",
+  "header": "awsui_header_9ckv7_o6rfp_10",
+  "flexible": "awsui_flexible_9ckv7_o6rfp_16",
+  "handle": "awsui_handle_9ckv7_o6rfp_20",
+  "header-content": "awsui_header-content_9ckv7_o6rfp_24",
+  "settings": "awsui_settings_9ckv7_o6rfp_28",
+  "fixed": "awsui_fixed_9ckv7_o6rfp_33",
+  "resizer": "awsui_resizer_9ckv7_o6rfp_37"
 };
   

package/internal/drag-handle/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { Icon } from "@cloudscape-design/components";
 import { forwardRef } from "react";
 import Handle from "../handle";
-import DragHandleIcon from "./icon";
 import styles from "./styles.css.js";
 function DragHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown }, ref) {
-    return (_jsx(Handle, { ref: ref, className: styles.handle, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(DragHandleIcon, {}) }));
+    return (_jsx(Handle, { ref: ref, className: styles.handle, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(Icon, { name: "drag-indicator" }) }));
 }
 export default forwardRef(DragHandle);

package/internal/environment.js

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

package/internal/item-container/index.js

@@ -7,8 +7,7 @@ import { createContext, forwardRef, useContext, useEffect, useImperativeHandle,
 import { useDragSubscription, useDraggable, } from "../dnd-controller/controller";
 import { Coordinates } from "../utils/coordinates";
 import { getNormalizedElementRect } from "../utils/screen";
-import { useStableEventHandler } from "../utils/use-stable-event-handler";
-import { useThrottledEventHandler } from "../utils/use-throttled-event-handler";
+import { throttle } from "../utils/throttle";
 import { getCollisionRect } from "./get-collision-rect";
 import { getNextDroppable } from "./get-next-droppable";
 import styles from "./styles.css.js";
@@ -35,18 +34,6 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
             return getCollisionRect(operation, itemRef.current, coordinates, sizeOverride);
         },
     });
-    const onPointerMove = useThrottledEventHandler((event) => {
-        var _a, _b, _c, _d;
-        const coordinates = Coordinates.fromEvent(event);
-        draggableApi.updateTransition(new Coordinates({
-            x: Math.max(coordinates.x, (_b = (_a = pointerBoundariesRef.current) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : Number.NEGATIVE_INFINITY),
-            y: Math.max(coordinates.y, (_d = (_c = pointerBoundariesRef.current) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : Number.NEGATIVE_INFINITY),
-        }));
-    }, 10);
-    const onPointerUp = useStableEventHandler(() => {
-        onPointerMove.cancel();
-        draggableApi.submitTransition();
-    });
     function updateTransition({ operation, interactionType, draggableItem, collisionRect, coordinates, dropTarget, }) {
         if (item.id === draggableItem.id) {
             const [width, height] = [collisionRect.right - collisionRect.left, collisionRect.bottom - collisionRect.top];
@@ -89,6 +76,18 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     const transitionInteractionType = (_a = transition === null || transition === void 0 ? void 0 : transition.interactionType) !== null && _a !== void 0 ? _a : null;
     const transitionItemId = (_b = transition === null || transition === void 0 ? void 0 : transition.itemId) !== null && _b !== void 0 ? _b : null;
     useEffect(() => {
+        const onPointerMove = throttle((event) => {
+            var _a, _b, _c, _d;
+            const coordinates = Coordinates.fromEvent(event);
+            draggableApi.updateTransition(new Coordinates({
+                x: Math.max(coordinates.x, (_b = (_a = pointerBoundariesRef.current) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : Number.NEGATIVE_INFINITY),
+                y: Math.max(coordinates.y, (_d = (_c = pointerBoundariesRef.current) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : Number.NEGATIVE_INFINITY),
+            }));
+        }, 10);
+        const onPointerUp = () => {
+            onPointerMove.cancel();
+            draggableApi.submitTransition();
+        };
         if (transitionInteractionType === "pointer" && transitionItemId === item.id) {
             window.addEventListener("pointermove", onPointerMove);
             window.addEventListener("pointerup", onPointerUp);
@@ -97,7 +96,9 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
             window.removeEventListener("pointermove", onPointerMove);
             window.removeEventListener("pointerup", onPointerUp);
         };
-    }, [item.id, transitionInteractionType, transitionItemId, onPointerMove, onPointerUp]);
+        // 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.

package/internal/manifest.json

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

package/internal/resize-handle/index.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { Icon } from "@cloudscape-design/components";
 import Handle from "../handle";
-import { ResizeHandleIcon } from "./icon";
 import styles from "./styles.css.js";
 export default function ResizeHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown }) {
-    return (_jsx(Handle, { className: styles.handle, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(ResizeHandleIcon, {}) }));
+    return (_jsx(Handle, { className: styles.handle, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(Icon, { name: "resize-area" }) }));
 }

package/internal/utils/throttle.js

@@ -1,12 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 export function throttle(func, delay) {
+    let cancelled = false;
     let pending = null;
     let lastInvokeTime = null;
     let timerId = null;
     // Runs on every animation frame until timer stopped.
     function pendingFunc() {
-        if (pending === null || lastInvokeTime === null) {
+        if (cancelled === true || pending === null || lastInvokeTime === null) {
             return;
         }
         const invokeTime = Date.now();
@@ -46,6 +47,7 @@ export function throttle(func, delay) {
         pending = null;
         lastInvokeTime = null;
         timerId = null;
+        cancelled = true;
     };
     return throttled;
 }

package/package.json

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

package/internal/drag-handle/icon.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-declare function DragHandleIcon(): JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof DragHandleIcon>;
-export default _default;

package/internal/drag-handle/icon.js

@@ -1,12 +0,0 @@
-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 Icon from "@cloudscape-design/components/icon";
-import { memo } from "react";
-function DragHandleIcon() {
-    return _jsx(Icon, { svg: _jsx(SVG, {}) });
-}
-function SVG() {
-    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "5.5", cy: "2.5", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "5.5", cy: "13.5", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "5.5", cy: "8", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "10.5", cy: "2.5", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "10.5", cy: "13.5", r: "0.5", className: "filled", strokeWidth: "2" }), _jsx("circle", { cx: "10.5", cy: "8", r: "0.5", className: "filled", strokeWidth: "2" })] }));
-}
-export default memo(DragHandleIcon);

package/internal/resize-handle/icon.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare function ResizeHandleIcon(): JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof ResizeHandleIcon>;
-export default _default;

package/internal/resize-handle/icon.js

@@ -1,12 +0,0 @@
-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 Icon from "@cloudscape-design/components/icon";
-import { memo } from "react";
-export function ResizeHandleIcon() {
-    return _jsx(Icon, { svg: _jsx(SVG, {}) });
-}
-function SVG() {
-    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M9.5 14.5L14.5 9.5", strokeWidth: "2" }), _jsx("path", { d: "M4 14.5L14.5 4", strokeWidth: "2" })] }));
-}
-export default memo(ResizeHandleIcon);

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

@@ -1 +0,0 @@
-export declare function useThrottledEventHandler<T extends (...args: any[]) => void>(callback: T, delay: number): import("./throttle").ThrottledFunction<T>;

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

@@ -1,11 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import { useCallback } from "react";
-import { throttle } from "./throttle";
-import { useStableEventHandler } from "./use-stable-event-handler";
-export function useThrottledEventHandler(callback, delay) {
-    const stableCallback = useStableEventHandler(callback);
-    // ESLint rule requires an inline function which we cannot provide here
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return useCallback(throttle(((...args) => stableCallback(...args)), delay), []);
-}