@cloudscape-design/board-components 3.0.20 → 3.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/board/interfaces.d.ts
CHANGED
|
@@ -47,12 +47,15 @@ export interface BoardProps<D = DataFallbackType> {
|
|
|
47
47
|
*/
|
|
48
48
|
i18nStrings: BoardProps.I18nStrings<D>;
|
|
49
49
|
/**
|
|
50
|
-
*
|
|
50
|
+
* Called when a user modifies the size or position of board items.
|
|
51
51
|
*
|
|
52
52
|
* The change detail has the following properties:
|
|
53
|
+
*
|
|
53
54
|
* * `items`: (readonly Item<D>[]) - the updated items array.
|
|
54
|
-
* * `addedItem`: (Item<D>, optional) - the item that was added as part of the update, if
|
|
55
|
-
* * `removedItem`: (Item<D>, optional) - the item that was removed as part of the update, if
|
|
55
|
+
* * `addedItem`: (Item<D>, optional) - the item that was added as part of the update, if applicable.
|
|
56
|
+
* * `removedItem`: (Item<D>, optional) - the item that was removed as part of the update, if applicable.
|
|
57
|
+
* * `resizedItem`: (Item<D>, optional) - the item that was resized as part of the update, if applicable.
|
|
58
|
+
* * `movedItem`: (Item<D>, optional) - the item that was moved as part of the update, if applicable.
|
|
56
59
|
*/
|
|
57
60
|
onItemsChange: NonCancelableEventHandler<BoardProps.ItemsChangeDetail<D>>;
|
|
58
61
|
/**
|
|
@@ -69,6 +72,8 @@ export declare namespace BoardProps {
|
|
|
69
72
|
}
|
|
70
73
|
interface ItemsChangeDetail<D = DataFallbackType> {
|
|
71
74
|
items: ReadonlyArray<Item<D>>;
|
|
75
|
+
movedItem?: Item<D>;
|
|
76
|
+
resizedItem?: Item<D>;
|
|
72
77
|
addedItem?: Item<D>;
|
|
73
78
|
removedItem?: Item<D>;
|
|
74
79
|
}
|
package/board/internal.js
CHANGED
|
@@ -25,7 +25,7 @@ import { createItemsChangeEvent } from "./utils/events";
|
|
|
25
25
|
export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStrings, __internalRootRef, ...rest }) {
|
|
26
26
|
var _a, _b;
|
|
27
27
|
const containerAccessRef = useRef(null);
|
|
28
|
-
const [
|
|
28
|
+
const [currentColumns, containerQueryRef] = useContainerColumns();
|
|
29
29
|
const containerRef = useMergeRefs(containerAccessRef, containerQueryRef);
|
|
30
30
|
const itemContainerRef = useRef({});
|
|
31
31
|
const autoScrollHandlers = useAutoScroll();
|
|
@@ -34,6 +34,8 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
|
|
|
34
34
|
const removeTransition = transitionState.removeTransition;
|
|
35
35
|
const transitionAnnouncement = transitionState.announcement;
|
|
36
36
|
const acquiredItem = (_a = transition === null || transition === void 0 ? void 0 : transition.acquiredItem) !== null && _a !== void 0 ? _a : null;
|
|
37
|
+
// Using cached columns from transition to ensure no unexpected changes in the process.
|
|
38
|
+
const columns = transition ? transition.itemsLayout.columns : currentColumns;
|
|
37
39
|
// Use previous items while remove transition is in progress.
|
|
38
40
|
items = (_b = removeTransition === null || removeTransition === void 0 ? void 0 : removeTransition.items) !== null && _b !== void 0 ? _b : items;
|
|
39
41
|
// The acquired item is the one being inserting at the moment but not submitted yet.
|
|
@@ -71,7 +73,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
|
|
|
71
73
|
return () => clearTimeout(timeoutId);
|
|
72
74
|
}, [removeTransition, items]);
|
|
73
75
|
const rows = selectTransitionRows(transitionState) || itemsLayout.rows;
|
|
74
|
-
const placeholdersLayout = createPlaceholdersLayout(rows, columns);
|
|
76
|
+
const placeholdersLayout = createPlaceholdersLayout(rows, itemsLayout.columns);
|
|
75
77
|
function isElementOverBoard(rect) {
|
|
76
78
|
const board = containerAccessRef.current;
|
|
77
79
|
const boardContains = (target) => board === target || board.contains(target);
|
|
@@ -158,9 +160,9 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
|
|
|
158
160
|
}
|
|
159
161
|
}
|
|
160
162
|
const announcement = transitionAnnouncement
|
|
161
|
-
? announcementToString(transitionAnnouncement, items, i18nStrings, columns)
|
|
163
|
+
? announcementToString(transitionAnnouncement, items, i18nStrings, itemsLayout.columns)
|
|
162
164
|
: "";
|
|
163
|
-
return (_jsxs("div", { ref: __internalRootRef, ...getDataAttributes(rest), children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: i18nStrings.navigationItemAriaLabel, onActivateItem: focusItem }), _jsx("div", { ref: containerRef, className: clsx(styles.root, { [styles.empty]: rows === 0 }), children: rows > 0 ? (_jsx(Grid, { columns: columns, layout: [...placeholdersLayout.items, ...itemsLayout.items], children: (gridContext) => {
|
|
165
|
+
return (_jsxs("div", { ref: __internalRootRef, ...getDataAttributes(rest), children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: i18nStrings.navigationItemAriaLabel, onActivateItem: focusItem }), _jsx("div", { ref: containerRef, className: clsx(styles.root, { [styles.empty]: rows === 0 }), children: rows > 0 ? (_jsx(Grid, { columns: itemsLayout.columns, layout: [...placeholdersLayout.items, ...itemsLayout.items], children: (gridContext) => {
|
|
164
166
|
var _a;
|
|
165
167
|
const layoutShift = (_a = transition === null || transition === void 0 ? void 0 : transition.layoutShift) !== null && _a !== void 0 ? _a : removeTransition === null || removeTransition === void 0 ? void 0 : removeTransition.layoutShift;
|
|
166
168
|
const transforms = layoutShift ? createTransforms(itemsLayout, layoutShift.moves, gridContext) : {};
|
|
@@ -172,16 +174,16 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
|
|
|
172
174
|
/* Placeholders are rendered even when there is no transition to support the first collisions check. */
|
|
173
175
|
placeholdersLayout.items.forEach((placeholder) => {
|
|
174
176
|
var _a;
|
|
175
|
-
return children.push(_jsx(Placeholder, { id: placeholder.id, state: transition ? (((_a = transition.collisionIds) === null || _a === void 0 ? void 0 : _a.has(placeholder.id)) ? "hover" : "active") : "default", gridContext: gridContext, columns: columns }, placeholder.id));
|
|
177
|
+
return children.push(_jsx(Placeholder, { id: placeholder.id, state: transition ? (((_a = transition.collisionIds) === null || _a === void 0 ? void 0 : _a.has(placeholder.id)) ? "hover" : "active") : "default", gridContext: gridContext, columns: itemsLayout.columns }, placeholder.id));
|
|
176
178
|
});
|
|
177
179
|
items.forEach((item) => {
|
|
178
180
|
const layoutItem = layoutItemById.get(item.id);
|
|
179
181
|
const isResizing = (transition === null || transition === void 0 ? void 0 : transition.operation) === "resize" && (transition === null || transition === void 0 ? void 0 : transition.draggableItem.id) === item.id;
|
|
180
182
|
const itemSize = layoutItem !== null && layoutItem !== void 0 ? layoutItem : {
|
|
181
|
-
width: getDefaultColumnSpan(item, columns),
|
|
183
|
+
width: getDefaultColumnSpan(item, itemsLayout.columns),
|
|
182
184
|
height: getDefaultRowSpan(item),
|
|
183
185
|
};
|
|
184
|
-
const itemMaxSize = isResizing && layoutItem ? { width: columns - layoutItem.x, height: 999 } : itemSize;
|
|
186
|
+
const itemMaxSize = isResizing && layoutItem ? { width: itemsLayout.columns - layoutItem.x, height: 999 } : itemSize;
|
|
185
187
|
children.push(_jsx(ItemContainer, { ref: (elem) => {
|
|
186
188
|
if (elem) {
|
|
187
189
|
itemContainerRef.current[item.id] = elem;
|
|
@@ -191,7 +193,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
|
|
|
191
193
|
}
|
|
192
194
|
}, item: item, transform: transforms[item.id], inTransition: !!transition || !!removeTransition, placed: true, acquired: item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), getItemSize: () => ({
|
|
193
195
|
width: gridContext.getWidth(itemSize.width),
|
|
194
|
-
minWidth: gridContext.getWidth(getMinColumnSpan(item, columns)),
|
|
196
|
+
minWidth: gridContext.getWidth(getMinColumnSpan(item, itemsLayout.columns)),
|
|
195
197
|
maxWidth: gridContext.getWidth(itemMaxSize.width),
|
|
196
198
|
height: gridContext.getHeight(itemSize.height),
|
|
197
199
|
minHeight: gridContext.getHeight(getMinRowSpan(item)),
|
package/board/utils/events.js
CHANGED
|
@@ -3,12 +3,17 @@
|
|
|
3
3
|
import { createCustomEvent } from "../../internal/utils/events";
|
|
4
4
|
import { transformItems } from "../../internal/utils/layout";
|
|
5
5
|
export function createItemsChangeEvent(items, layoutShift) {
|
|
6
|
-
var _a, _b, _c, _d, _e, _f;
|
|
6
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
7
7
|
const insertTarget = (_b = (_a = layoutShift.moves.find((move) => move.type === "INSERT")) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : null;
|
|
8
|
-
const
|
|
9
|
-
const
|
|
8
|
+
const moveTarget = (_d = (_c = layoutShift.moves.find((move) => move.type === "MOVE")) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : null;
|
|
9
|
+
const removeTarget = (_f = (_e = layoutShift.moves.find((move) => move.type === "REMOVE")) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : null;
|
|
10
|
+
const resizeTarget = (_h = (_g = layoutShift.moves.find((move) => move.type === "RESIZE")) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : null;
|
|
10
11
|
const newItems = transformItems(items, layoutShift.next, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : insertTarget);
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
return createCustomEvent({
|
|
13
|
+
items: newItems,
|
|
14
|
+
addedItem: newItems.find((it) => it.id === insertTarget),
|
|
15
|
+
removedItem: newItems.find((it) => it.id === removeTarget),
|
|
16
|
+
resizedItem: newItems.find((it) => it.id === resizeTarget),
|
|
17
|
+
movedItem: !insertTarget ? newItems.find((it) => it.id === moveTarget) : undefined,
|
|
18
|
+
});
|
|
14
19
|
}
|
|
@@ -88,7 +88,7 @@ module.exports = {
|
|
|
88
88
|
"events": [
|
|
89
89
|
{
|
|
90
90
|
"name": "onItemsChange",
|
|
91
|
-
"description": "
|
|
91
|
+
"description": "Called when a user modifies the size or position of board items.\nThe change detail has the following properties:\n\n* `items`: (readonly Item<D>[]) - the updated items array.\n* `addedItem`: (Item<D>, optional) - the item that was added as part of the update, if applicable.\n* `removedItem`: (Item<D>, optional) - the item that was removed as part of the update, if applicable.\n* `resizedItem`: (Item<D>, optional) - the item that was resized as part of the update, if applicable.\n* `movedItem`: (Item<D>, optional) - the item that was moved as part of the update, if applicable.\n",
|
|
92
92
|
"cancelable": false,
|
|
93
93
|
"detailType": "BoardProps.ItemsChangeDetail<D>",
|
|
94
94
|
"detailInlineType": {
|
|
@@ -105,10 +105,20 @@ module.exports = {
|
|
|
105
105
|
"type": "ReadonlyArray<BoardProps.Item<D>>",
|
|
106
106
|
"optional": false
|
|
107
107
|
},
|
|
108
|
+
{
|
|
109
|
+
"name": "movedItem",
|
|
110
|
+
"type": "BoardProps.Item<D>",
|
|
111
|
+
"optional": true
|
|
112
|
+
},
|
|
108
113
|
{
|
|
109
114
|
"name": "removedItem",
|
|
110
115
|
"type": "BoardProps.Item<D>",
|
|
111
116
|
"optional": true
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"name": "resizedItem",
|
|
120
|
+
"type": "BoardProps.Item<D>",
|
|
121
|
+
"optional": true
|
|
112
122
|
}
|
|
113
123
|
]
|
|
114
124
|
}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED