@cloudscape-design/board-components 3.0.20 → 3.0.21
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/internal.js +10 -8
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
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/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED