@cloudscape-design/board-components 3.0.60 → 3.0.61
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 +12 -7
- package/board/internal.js.map +1 -1
- package/board/styles.css.js +5 -5
- package/board/styles.scoped.css +10 -8
- package/board/styles.selectors.js +5 -5
- package/board/transition.d.ts +3 -1
- package/board/transition.js +32 -24
- package/board/transition.js.map +1 -1
- package/board-item/styles.css.js +11 -11
- package/board-item/styles.scoped.css +27 -26
- package/board-item/styles.selectors.js +11 -11
- package/internal/drag-handle/styles.css.js +2 -2
- package/internal/drag-handle/styles.scoped.css +9 -9
- package/internal/drag-handle/styles.selectors.js +2 -2
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/global-drag-state-styles/styles.css.js +3 -3
- package/internal/global-drag-state-styles/styles.scoped.css +6 -3
- package/internal/global-drag-state-styles/styles.selectors.js +3 -3
- package/internal/grid/grid.d.ts +1 -1
- package/internal/grid/grid.js +5 -2
- package/internal/grid/grid.js.map +1 -1
- package/internal/grid/interfaces.d.ts +1 -0
- package/internal/grid/interfaces.js.map +1 -1
- package/internal/handle/styles.css.js +1 -1
- package/internal/handle/styles.scoped.css +4 -3
- package/internal/handle/styles.selectors.js +1 -1
- package/internal/item-container/get-next-droppable.d.ts +6 -1
- package/internal/item-container/get-next-droppable.js +7 -2
- package/internal/item-container/get-next-droppable.js.map +1 -1
- package/internal/item-container/index.d.ts +1 -0
- package/internal/item-container/index.js +30 -18
- package/internal/item-container/index.js.map +1 -1
- package/internal/item-container/styles.css.js +7 -7
- package/internal/item-container/styles.scoped.css +8 -8
- package/internal/item-container/styles.selectors.js +7 -7
- package/internal/manifest.json +1 -1
- package/internal/resize-handle/styles.css.js +2 -2
- package/internal/resize-handle/styles.scoped.css +11 -8
- package/internal/resize-handle/styles.selectors.js +2 -2
- package/internal/screenreader-grid-navigation/styles.css.js +2 -2
- package/internal/screenreader-grid-navigation/styles.scoped.css +4 -3
- package/internal/screenreader-grid-navigation/styles.selectors.js +2 -2
- package/internal/screenreader-only/styles.css.js +1 -1
- package/internal/screenreader-only/styles.scoped.css +3 -3
- package/internal/screenreader-only/styles.selectors.js +1 -1
- package/internal/utils/coordinates.d.ts +3 -1
- package/internal/utils/coordinates.js +5 -2
- package/internal/utils/coordinates.js.map +1 -1
- package/internal/utils/rects.d.ts +6 -1
- package/internal/utils/rects.js +7 -1
- package/internal/utils/rects.js.map +1 -1
- package/internal/utils/screen.d.ts +30 -1
- package/internal/utils/screen.js +46 -11
- package/internal/utils/screen.js.map +1 -1
- package/items-palette/internal.js +3 -1
- package/items-palette/internal.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,26 +1,29 @@
|
|
|
1
|
-
.
|
|
1
|
+
.awsui_handle_19hnz_1bypk_1:not(#\9) {
|
|
2
2
|
cursor: nwse-resize;
|
|
3
3
|
}
|
|
4
|
+
.awsui_handle_19hnz_1bypk_1:not(#\9):dir(rtl) {
|
|
5
|
+
cursor: nesw-resize;
|
|
6
|
+
}
|
|
4
7
|
|
|
5
|
-
.
|
|
8
|
+
.awsui_handle_19hnz_1bypk_1:not(#\9):not(.awsui_active_19hnz_1bypk_8):focus-visible {
|
|
6
9
|
position: relative;
|
|
7
10
|
box-sizing: border-box;
|
|
8
11
|
outline: 2px dotted transparent;
|
|
9
12
|
outline-offset: 3px;
|
|
10
13
|
}
|
|
11
|
-
.
|
|
14
|
+
.awsui_handle_19hnz_1bypk_1:not(#\9):not(.awsui_active_19hnz_1bypk_8):focus-visible::before {
|
|
12
15
|
content: " ";
|
|
13
16
|
display: block;
|
|
14
17
|
position: absolute;
|
|
15
18
|
box-sizing: border-box;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
inset-inline-start: calc(-1 * 4px);
|
|
20
|
+
inset-block-start: calc(-1 * 4px);
|
|
21
|
+
inline-size: calc(100% + 2 * 4px);
|
|
22
|
+
block-size: calc(100% + 2 * 4px);
|
|
20
23
|
border-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
21
24
|
border: 2px solid var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
22
25
|
}
|
|
23
26
|
|
|
24
|
-
.
|
|
27
|
+
.awsui_active_19hnz_1bypk_8:not(#\9) {
|
|
25
28
|
outline: none;
|
|
26
29
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"handle": "
|
|
6
|
-
"active": "
|
|
5
|
+
"handle": "awsui_handle_19hnz_1bypk_1",
|
|
6
|
+
"active": "awsui_active_19hnz_1bypk_8"
|
|
7
7
|
};
|
|
8
8
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"screen-reader-navigation-hidden": "awsui_screen-reader-navigation-
|
|
5
|
-
"screen-reader-navigation-visible": "awsui_screen-reader-navigation-
|
|
4
|
+
"screen-reader-navigation-hidden": "awsui_screen-reader-navigation-hidden_1wuib_1u63w_1",
|
|
5
|
+
"screen-reader-navigation-visible": "awsui_screen-reader-navigation-visible_1wuib_1u63w_6"
|
|
6
6
|
};
|
|
7
7
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
.awsui_screen-reader-navigation-
|
|
1
|
+
.awsui_screen-reader-navigation-hidden_1wuib_1u63w_1:not(#\9) {
|
|
2
2
|
position: absolute !important;
|
|
3
3
|
clip-path: circle(0);
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.awsui_screen-reader-navigation-
|
|
6
|
+
.awsui_screen-reader-navigation-visible_1wuib_1u63w_6:not(#\9) {
|
|
7
7
|
position: fixed;
|
|
8
8
|
background: white;
|
|
9
|
-
padding: 8px;
|
|
9
|
+
padding-block: 8px;
|
|
10
|
+
padding-inline: 8px;
|
|
10
11
|
border: 1px solid black;
|
|
11
12
|
z-index: 10001;
|
|
12
13
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"screen-reader-navigation-hidden": "awsui_screen-reader-navigation-
|
|
6
|
-
"screen-reader-navigation-visible": "awsui_screen-reader-navigation-
|
|
5
|
+
"screen-reader-navigation-hidden": "awsui_screen-reader-navigation-hidden_1wuib_1u63w_1",
|
|
6
|
+
"screen-reader-navigation-visible": "awsui_screen-reader-navigation-visible_1wuib_1u63w_6"
|
|
7
7
|
};
|
|
8
8
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
*/
|
|
5
|
-
.
|
|
5
|
+
.awsui_root_3gfu1_3lgbu_5:not(#\9) {
|
|
6
6
|
position: absolute !important;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
inset-block-start: -9999px !important;
|
|
8
|
+
inset-inline-start: -9999px !important;
|
|
9
9
|
}
|
|
@@ -5,7 +5,9 @@ export declare class Coordinates {
|
|
|
5
5
|
readonly y: number;
|
|
6
6
|
readonly scrollX: number;
|
|
7
7
|
readonly scrollY: number;
|
|
8
|
-
static fromEvent(event: PointerEvent | ReactPointerEvent<unknown
|
|
8
|
+
static fromEvent(event: PointerEvent | ReactPointerEvent<unknown>, { isRtl }: {
|
|
9
|
+
isRtl: boolean;
|
|
10
|
+
}): Coordinates;
|
|
9
11
|
static cursorOffset(current: Coordinates, start: Coordinates): Coordinates;
|
|
10
12
|
constructor({ x, y }: {
|
|
11
13
|
x: number;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { getLogicalClientX } from "./screen";
|
|
3
4
|
export class Coordinates {
|
|
4
|
-
static fromEvent(event) {
|
|
5
|
-
|
|
5
|
+
static fromEvent(event, { isRtl }) {
|
|
6
|
+
const clientX = getLogicalClientX(event, isRtl);
|
|
7
|
+
const clientY = event.clientY;
|
|
8
|
+
return new Coordinates({ x: clientX, y: clientY });
|
|
6
9
|
}
|
|
7
10
|
static cursorOffset(current, start) {
|
|
8
11
|
return new Coordinates({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coordinates.js","sourceRoot":"","sources":["../../../../src/internal/utils/coordinates.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;
|
|
1
|
+
{"version":3,"file":"coordinates.js","sourceRoot":"","sources":["../../../../src/internal/utils/coordinates.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,OAAO,WAAW;IAOtB,MAAM,CAAC,SAAS,CAAC,KAAgD,EAAE,EAAE,KAAK,EAAsB;QAC9F,MAAM,OAAO,GAAG,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAChD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC9B,OAAO,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IACrD,CAAC;IAED,MAAM,CAAC,YAAY,CAAC,OAAoB,EAAE,KAAkB;QAC1D,OAAO,IAAI,WAAW,CAAC;YACrB,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAC1D,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;SAC3D,CAAC,CAAC;IACL,CAAC;IAED,YAAY,EAAE,CAAC,EAAE,CAAC,EAA4B;QAnBrC,WAAM,GAAG,aAAa,CAAC;QAGvB,YAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QACzB,YAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAgBhC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACb,CAAC;CACF","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { PointerEvent as ReactPointerEvent } from \"react\";\nimport { getLogicalClientX } from \"./screen\";\n\nexport class Coordinates {\n readonly __type = \"Coordinates\";\n readonly x: number;\n readonly y: number;\n readonly scrollX = window.scrollX;\n readonly scrollY = window.scrollY;\n\n static fromEvent(event: PointerEvent | ReactPointerEvent<unknown>, { isRtl }: { isRtl: boolean }): Coordinates {\n const clientX = getLogicalClientX(event, isRtl);\n const clientY = event.clientY;\n return new Coordinates({ x: clientX, y: clientY });\n }\n\n static cursorOffset(current: Coordinates, start: Coordinates): Coordinates {\n return new Coordinates({\n x: current.x - start.x + (current.scrollX - start.scrollX),\n y: current.y - start.y + (current.scrollY - start.scrollY),\n });\n }\n\n constructor({ x, y }: { x: number; y: number }) {\n this.x = x;\n this.y = y;\n }\n}\n"]}
|
|
@@ -3,4 +3,9 @@ export declare function isInside(rect: Rect, bounds: Rect): boolean;
|
|
|
3
3
|
export declare function isIntersecting(rect1: Rect, rect2: Rect): boolean;
|
|
4
4
|
export declare function getIntersectionArea(rect1: Rect, rect2: Rect): number;
|
|
5
5
|
export declare function getGridPlacement(target: Rect, grid: readonly Rect[]): Rect;
|
|
6
|
-
export declare function getClosestNeighbor(target
|
|
6
|
+
export declare function getClosestNeighbor({ target, sources, direction, isRtl, }: {
|
|
7
|
+
target: Rect;
|
|
8
|
+
sources: readonly Rect[];
|
|
9
|
+
direction: Direction;
|
|
10
|
+
isRtl: boolean;
|
|
11
|
+
}): null | Rect;
|
package/internal/utils/rects.js
CHANGED
|
@@ -59,10 +59,16 @@ export function getGridPlacement(target, grid) {
|
|
|
59
59
|
}
|
|
60
60
|
return placement;
|
|
61
61
|
}
|
|
62
|
-
export function getClosestNeighbor(target, sources, direction) {
|
|
62
|
+
export function getClosestNeighbor({ target, sources, direction, isRtl, }) {
|
|
63
63
|
const getFirst = (rects) => { var _a; return (_a = rects[0]) !== null && _a !== void 0 ? _a : null; };
|
|
64
64
|
const verticalDiff = (r1, r2) => Math.abs(r1.top - target.top) - Math.abs(r2.top - target.top);
|
|
65
65
|
const horizontalDiff = (r1, r2) => Math.abs(r1.left - target.left) - Math.abs(r2.left - target.left);
|
|
66
|
+
if (isRtl && direction === "left") {
|
|
67
|
+
direction = "right";
|
|
68
|
+
}
|
|
69
|
+
else if (isRtl && direction === "right") {
|
|
70
|
+
direction = "left";
|
|
71
|
+
}
|
|
66
72
|
switch (direction) {
|
|
67
73
|
case "left":
|
|
68
74
|
return getFirst(sources.filter((rect) => rect.right <= target.left).sort((r1, r2) => r2.left - r1.left || verticalDiff(r1, r2)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rects.js","sourceRoot":"","sources":["../../../../src/internal/utils/rects.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"rects.js","sourceRoot":"","sources":["../../../../src/internal/utils/rects.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Direction, Rect } from \"../interfaces\";\n\nexport function isInside(rect: Rect, bounds: Rect) {\n return (\n rect.top >= bounds.top && rect.left >= bounds.left && rect.right <= bounds.right && rect.bottom <= bounds.bottom\n );\n}\n\nexport function isIntersecting(rect1: Rect, rect2: Rect) {\n return getIntersectionArea(rect1, rect2) > 0;\n}\n\nexport function getIntersectionArea(rect1: Rect, rect2: Rect) {\n let horizontalIntersectionLength = 0;\n if (rect2.left <= rect1.left && rect1.left <= rect2.right) {\n horizontalIntersectionLength = Math.min(rect1.right, rect2.right) - rect1.left;\n } else if (rect2.left <= rect1.right && rect1.right <= rect2.right) {\n horizontalIntersectionLength = rect1.right - Math.max(rect1.left, rect2.left);\n } else if (rect1.left <= rect2.left && rect2.left <= rect1.right) {\n horizontalIntersectionLength = Math.min(rect1.right, rect2.right) - rect2.left;\n } else if (rect1.left <= rect2.right && rect2.right <= rect1.right) {\n horizontalIntersectionLength = rect2.right - Math.max(rect1.left, rect2.left);\n }\n\n let verticalIntersectionLength = 0;\n if (rect2.top <= rect1.top && rect1.top <= rect2.bottom) {\n verticalIntersectionLength = Math.min(rect1.bottom, rect2.bottom) - rect1.top;\n } else if (rect2.top <= rect1.bottom && rect1.bottom <= rect2.bottom) {\n verticalIntersectionLength = rect1.bottom - Math.max(rect1.top, rect2.top);\n } else if (rect1.top <= rect2.top && rect2.top <= rect1.bottom) {\n verticalIntersectionLength = Math.min(rect1.bottom, rect2.bottom) - rect2.top;\n } else if (rect1.top <= rect2.bottom && rect2.bottom <= rect1.bottom) {\n verticalIntersectionLength = rect2.bottom - Math.max(rect1.top, rect2.top);\n }\n\n return horizontalIntersectionLength * verticalIntersectionLength;\n}\n\nexport function getGridPlacement(target: Rect, grid: readonly Rect[]): Rect {\n function getMinDistance(min: number, current: number, collision: number) {\n const minDistance = Math.abs(min - collision);\n const currentDistance = Math.abs(current - collision);\n return currentDistance < minDistance ? current : min;\n }\n\n let placement = {\n top: Number.POSITIVE_INFINITY,\n left: Number.POSITIVE_INFINITY,\n right: Number.POSITIVE_INFINITY,\n bottom: Number.POSITIVE_INFINITY,\n };\n\n for (const rect of grid) {\n if (isIntersecting(rect, target)) {\n placement = {\n top: getMinDistance(placement.top, rect.top, target.top),\n left: getMinDistance(placement.left, rect.left, target.left),\n right: getMinDistance(placement.right, rect.right, target.right),\n bottom: getMinDistance(placement.bottom, rect.bottom, target.bottom),\n };\n }\n }\n\n return placement;\n}\n\nexport function getClosestNeighbor({\n target,\n sources,\n direction,\n isRtl,\n}: {\n target: Rect;\n sources: readonly Rect[];\n direction: Direction;\n isRtl: boolean;\n}): null | Rect {\n const getFirst = (rects: Rect[]) => rects[0] ?? null;\n const verticalDiff = (r1: Rect, r2: Rect) => Math.abs(r1.top - target.top) - Math.abs(r2.top - target.top);\n const horizontalDiff = (r1: Rect, r2: Rect) => Math.abs(r1.left - target.left) - Math.abs(r2.left - target.left);\n\n if (isRtl && direction === \"left\") {\n direction = \"right\";\n } else if (isRtl && direction === \"right\") {\n direction = \"left\";\n }\n\n switch (direction) {\n case \"left\":\n return getFirst(\n sources.filter((rect) => rect.right <= target.left).sort((r1, r2) => r2.left - r1.left || verticalDiff(r1, r2)),\n );\n case \"right\":\n return getFirst(\n sources.filter((rect) => rect.left >= target.right).sort((r1, r2) => r1.left - r2.left || verticalDiff(r1, r2)),\n );\n case \"up\":\n return getFirst(\n sources.filter((rect) => rect.bottom <= target.top).sort((r1, r2) => r2.top - r1.top || horizontalDiff(r1, r2)),\n );\n case \"down\":\n return getFirst(\n sources.filter((rect) => rect.top >= target.bottom).sort((r1, r2) => r1.top - r2.top || horizontalDiff(r1, r2)),\n );\n }\n}\n"]}
|
|
@@ -1 +1,30 @@
|
|
|
1
|
-
|
|
1
|
+
import { PointerEvent as ReactPointerEvent } from "react";
|
|
2
|
+
export declare function getNormalizedElementRect(element: HTMLElement): {
|
|
3
|
+
left: number;
|
|
4
|
+
right: number;
|
|
5
|
+
top: number;
|
|
6
|
+
bottom: number;
|
|
7
|
+
width: number;
|
|
8
|
+
height: number;
|
|
9
|
+
};
|
|
10
|
+
export declare function useIsRtl(elementRef: React.RefObject<Element>): () => boolean;
|
|
11
|
+
/**
|
|
12
|
+
* The clientX position needs to be converted so it is relative to the right of
|
|
13
|
+
* the document in order for computations to yield the same result in both
|
|
14
|
+
* element directions.
|
|
15
|
+
*/
|
|
16
|
+
export declare function getLogicalClientX(event: PointerEvent | ReactPointerEvent<unknown>, isRtl: boolean): number;
|
|
17
|
+
/**
|
|
18
|
+
* The getBoundingClientRect() function returns values relative to the top left
|
|
19
|
+
* corner of the document regardless of document direction. The left/right position
|
|
20
|
+
* will be transformed to insetInlineStart based on element direction in order to
|
|
21
|
+
* support direction agnostic position computation.
|
|
22
|
+
*/
|
|
23
|
+
export declare function getLogicalBoundingClientRect(element: HTMLElement | SVGElement): {
|
|
24
|
+
blockSize: number;
|
|
25
|
+
inlineSize: number;
|
|
26
|
+
insetBlockStart: number;
|
|
27
|
+
insetBlockEnd: number;
|
|
28
|
+
insetInlineStart: number;
|
|
29
|
+
insetInlineEnd: number;
|
|
30
|
+
};
|
package/internal/utils/screen.js
CHANGED
|
@@ -1,18 +1,53 @@
|
|
|
1
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
3
1
|
export function getNormalizedElementRect(element) {
|
|
4
|
-
const {
|
|
2
|
+
const { insetInlineStart, insetInlineEnd, insetBlockStart, insetBlockEnd, inlineSize, blockSize } = getLogicalBoundingClientRect(element);
|
|
5
3
|
const xOffset = element.ownerDocument.defaultView.pageXOffset - window.scrollX;
|
|
6
4
|
const yOffset = element.ownerDocument.defaultView.pageYOffset - window.scrollY;
|
|
7
5
|
return {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
left: insetInlineStart + xOffset,
|
|
7
|
+
right: insetInlineEnd + xOffset,
|
|
8
|
+
top: insetBlockStart + yOffset,
|
|
9
|
+
bottom: insetBlockEnd + yOffset,
|
|
10
|
+
width: inlineSize,
|
|
11
|
+
height: blockSize,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
export function useIsRtl(elementRef) {
|
|
15
|
+
const getIsRtl = () => elementRef.current && elementRef.current instanceof Element
|
|
16
|
+
? getComputedStyle(elementRef.current).direction === "rtl"
|
|
17
|
+
: false;
|
|
18
|
+
return getIsRtl;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* The clientX position needs to be converted so it is relative to the right of
|
|
22
|
+
* the document in order for computations to yield the same result in both
|
|
23
|
+
* element directions.
|
|
24
|
+
*/
|
|
25
|
+
export function getLogicalClientX(event, isRtl) {
|
|
26
|
+
return isRtl ? document.documentElement.clientWidth - event.clientX : event.clientX;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* The getBoundingClientRect() function returns values relative to the top left
|
|
30
|
+
* corner of the document regardless of document direction. The left/right position
|
|
31
|
+
* will be transformed to insetInlineStart based on element direction in order to
|
|
32
|
+
* support direction agnostic position computation.
|
|
33
|
+
*/
|
|
34
|
+
export function getLogicalBoundingClientRect(element) {
|
|
35
|
+
const boundingClientRect = element.getBoundingClientRect();
|
|
36
|
+
const blockSize = boundingClientRect.height;
|
|
37
|
+
const inlineSize = boundingClientRect.width;
|
|
38
|
+
const insetBlockStart = boundingClientRect.top;
|
|
39
|
+
const insetBlockEnd = boundingClientRect.bottom;
|
|
40
|
+
const insetInlineStart = element instanceof Element && getComputedStyle(element).direction === "rtl"
|
|
41
|
+
? document.documentElement.clientWidth - boundingClientRect.right
|
|
42
|
+
: boundingClientRect.left;
|
|
43
|
+
const insetInlineEnd = insetInlineStart + inlineSize;
|
|
44
|
+
return {
|
|
45
|
+
blockSize,
|
|
46
|
+
inlineSize,
|
|
47
|
+
insetBlockStart,
|
|
48
|
+
insetBlockEnd,
|
|
49
|
+
insetInlineStart,
|
|
50
|
+
insetInlineEnd,
|
|
16
51
|
};
|
|
17
52
|
}
|
|
18
53
|
//# sourceMappingURL=screen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"screen.js","sourceRoot":"","sources":["../../../../src/internal/utils/screen.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"screen.js","sourceRoot":"","sources":["../../../../src/internal/utils/screen.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,wBAAwB,CAAC,OAAoB;IAQ3D,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,GAC/F,4BAA4B,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,WAAY,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;IAChF,MAAM,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,WAAY,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;IAChF,OAAO;QACL,IAAI,EAAE,gBAAgB,GAAG,OAAO;QAChC,KAAK,EAAE,cAAc,GAAG,OAAO;QAC/B,GAAG,EAAE,eAAe,GAAG,OAAO;QAC9B,MAAM,EAAE,aAAa,GAAG,OAAO;QAC/B,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,SAAS;KAClB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,UAAoC;IAC3D,MAAM,QAAQ,GAAG,GAAY,EAAE,CAC7B,UAAU,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,YAAY,OAAO;QACzD,CAAC,CAAC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK,KAAK;QAC1D,CAAC,CAAC,KAAK,CAAC;IACZ,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAgD,EAAE,KAAc;IAChG,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;AACtF,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,4BAA4B,CAAC,OAAiC;IAC5E,MAAM,kBAAkB,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAE3D,MAAM,SAAS,GAAG,kBAAkB,CAAC,MAAM,CAAC;IAC5C,MAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC;IAC5C,MAAM,eAAe,GAAG,kBAAkB,CAAC,GAAG,CAAC;IAC/C,MAAM,aAAa,GAAG,kBAAkB,CAAC,MAAM,CAAC;IAChD,MAAM,gBAAgB,GACpB,OAAO,YAAY,OAAO,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK,KAAK;QACzE,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC,KAAK;QACjE,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC;IAC9B,MAAM,cAAc,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAErD,OAAO;QACL,SAAS;QACT,UAAU;QACV,eAAe;QACf,aAAa;QACb,gBAAgB;QAChB,cAAc;KACf,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { PointerEvent as ReactPointerEvent } from \"react\";\n\nexport function getNormalizedElementRect(element: HTMLElement): {\n left: number;\n right: number;\n top: number;\n bottom: number;\n width: number;\n height: number;\n} {\n const { insetInlineStart, insetInlineEnd, insetBlockStart, insetBlockEnd, inlineSize, blockSize } =\n getLogicalBoundingClientRect(element);\n const xOffset = element.ownerDocument.defaultView!.pageXOffset - window.scrollX;\n const yOffset = element.ownerDocument.defaultView!.pageYOffset - window.scrollY;\n return {\n left: insetInlineStart + xOffset,\n right: insetInlineEnd + xOffset,\n top: insetBlockStart + yOffset,\n bottom: insetBlockEnd + yOffset,\n width: inlineSize,\n height: blockSize,\n };\n}\n\nexport function useIsRtl(elementRef: React.RefObject<Element>) {\n const getIsRtl = (): boolean =>\n elementRef.current && elementRef.current instanceof Element\n ? getComputedStyle(elementRef.current).direction === \"rtl\"\n : false;\n return getIsRtl;\n}\n\n/**\n * The clientX position needs to be converted so it is relative to the right of\n * the document in order for computations to yield the same result in both\n * element directions.\n */\nexport function getLogicalClientX(event: PointerEvent | ReactPointerEvent<unknown>, isRtl: boolean) {\n return isRtl ? document.documentElement.clientWidth - event.clientX : event.clientX;\n}\n\n/**\n * The getBoundingClientRect() function returns values relative to the top left\n * corner of the document regardless of document direction. The left/right position\n * will be transformed to insetInlineStart based on element direction in order to\n * support direction agnostic position computation.\n */\nexport function getLogicalBoundingClientRect(element: HTMLElement | SVGElement) {\n const boundingClientRect = element.getBoundingClientRect();\n\n const blockSize = boundingClientRect.height;\n const inlineSize = boundingClientRect.width;\n const insetBlockStart = boundingClientRect.top;\n const insetBlockEnd = boundingClientRect.bottom;\n const insetInlineStart =\n element instanceof Element && getComputedStyle(element).direction === \"rtl\"\n ? document.documentElement.clientWidth - boundingClientRect.right\n : boundingClientRect.left;\n const insetInlineEnd = insetInlineStart + inlineSize;\n\n return {\n blockSize,\n inlineSize,\n insetBlockStart,\n insetBlockEnd,\n insetInlineStart,\n insetInlineEnd,\n };\n}\n"]}
|
|
@@ -8,12 +8,14 @@ import { useDragSubscription } from "../internal/dnd-controller/controller";
|
|
|
8
8
|
import { ItemContainer } from "../internal/item-container";
|
|
9
9
|
import LiveRegion from "../internal/live-region";
|
|
10
10
|
import { ScreenReaderGridNavigation } from "../internal/screenreader-grid-navigation";
|
|
11
|
+
import { useIsRtl } from "../internal/utils/screen";
|
|
11
12
|
import styles from "./styles.css.js";
|
|
12
13
|
export function InternalItemsPalette({ items, renderItem, i18nStrings, __internalRootRef, ...rest }) {
|
|
13
14
|
const paletteRef = useRef(null);
|
|
14
15
|
const itemContainerRef = useRef({});
|
|
15
16
|
const [dropState, setDropState] = useState();
|
|
16
17
|
const [announcement, setAnnouncement] = useState("");
|
|
18
|
+
const isRtl = useIsRtl(paletteRef);
|
|
17
19
|
function focusItem(itemId) {
|
|
18
20
|
itemContainerRef.current[itemId].focusDragHandle();
|
|
19
21
|
}
|
|
@@ -68,6 +70,6 @@ export function InternalItemsPalette({ items, renderItem, i18nStrings, __interna
|
|
|
68
70
|
}
|
|
69
71
|
const { width, height } = dropContext.scale(item);
|
|
70
72
|
return { width, minWidth: width, maxWidth: width, height, minHeight: height, maxHeight: height };
|
|
71
|
-
}, children: (hasDropTarget) => renderItem(item, { showPreview: hasDropTarget }) }, item.id))) }) }), _jsx(LiveRegion, { children: announcement })] }));
|
|
73
|
+
}, isRtl: isRtl, children: (hasDropTarget) => renderItem(item, { showPreview: hasDropTarget }) }, item.id))) }) }), _jsx(LiveRegion, { children: announcement })] }));
|
|
72
74
|
}
|
|
73
75
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/items-palette/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,YAAY,MAAM,6CAA6C,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAEnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAoB,MAAM,4BAA4B,CAAC;AAC7E,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/items-palette/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport SpaceBetween from \"@cloudscape-design/components/space-between\";\nimport { useRef, useState } from \"react\";\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { useDragSubscription } from \"../internal/dnd-controller/controller\";\nimport { ItemId } from \"../internal/interfaces\";\nimport { ItemContainer, ItemContainerRef } from \"../internal/item-container\";\nimport LiveRegion from \"../internal/live-region\";\nimport { ScreenReaderGridNavigation } from \"../internal/screenreader-grid-navigation\";\nimport { useIsRtl } from \"../internal/utils/screen\";\nimport { ItemsPaletteProps } from \"./interfaces\";\nimport styles from \"./styles.css.js\";\n\nexport function InternalItemsPalette<D>({\n items,\n renderItem,\n i18nStrings,\n __internalRootRef,\n ...rest\n}: ItemsPaletteProps<D> & InternalBaseComponentProps) {\n const paletteRef = useRef<HTMLDivElement>(null);\n const itemContainerRef = useRef<{ [id: ItemId]: ItemContainerRef }>({});\n const [dropState, setDropState] = useState<{ id: string }>();\n const [announcement, setAnnouncement] = useState(\"\");\n\n const isRtl = useIsRtl(paletteRef);\n\n function focusItem(itemId: ItemId) {\n itemContainerRef.current[itemId].focusDragHandle();\n }\n\n useDragSubscription(\"start\", ({ draggableItem: { id } }) => {\n setDropState({ id });\n\n // Announce only if the target item belongs to the palette.\n if (items.some((it) => it.id === id)) {\n setAnnouncement(i18nStrings.liveAnnouncementDndStarted);\n } else {\n setAnnouncement(\"\");\n }\n });\n\n useDragSubscription(\"update\", ({ draggableItem: { id } }) => {\n setDropState({ id });\n });\n\n useDragSubscription(\"submit\", () => {\n setDropState(undefined);\n\n // Announce only if the target item belongs to the palette.\n if (dropState && items.some((it) => it.id === dropState.id)) {\n setAnnouncement(i18nStrings.liveAnnouncementDndDiscarded);\n }\n });\n\n useDragSubscription(\"discard\", () => {\n setDropState(undefined);\n\n // Announce only if the target item belongs to the palette.\n if (items.some((it) => it.id === dropState?.id)) {\n setAnnouncement(i18nStrings.liveAnnouncementDndDiscarded);\n }\n });\n\n useDragSubscription(\"acquire\", ({ draggableItem }) => {\n // \"Disconnect\" target item from the palette if borrowed.\n if (items.some((it) => it.id === draggableItem.id)) {\n setDropState(undefined);\n }\n });\n\n const itemsLayout = {\n items: items.map((it, index) => ({ id: it.id, x: 0, y: index, width: 1, height: 1 })),\n columns: 1,\n rows: items.length,\n };\n\n return (\n <div ref={__internalRootRef} {...getDataAttributes(rest)}>\n <ScreenReaderGridNavigation\n items={items}\n itemsLayout={itemsLayout}\n ariaLabel={i18nStrings.navigationAriaLabel}\n ariaDescription={i18nStrings.navigationAriaDescription}\n itemAriaLabel={(item) => i18nStrings.navigationItemAriaLabel(item!)}\n onActivateItem={focusItem}\n />\n\n <div ref={paletteRef} className={styles.root}>\n <SpaceBetween size=\"l\">\n {items.map((item) => (\n <ItemContainer\n ref={(elem) => {\n if (elem) {\n itemContainerRef.current[item.id] = elem;\n } else {\n delete itemContainerRef.current[item.id];\n }\n }}\n key={item.id}\n item={item}\n placed={false}\n acquired={false}\n transform={undefined}\n inTransition={false}\n getItemSize={(dropContext) => {\n if (!dropContext) {\n throw new Error(\"Invariant violation: cannot query palette item size with no drop context.\");\n }\n const { width, height } = dropContext.scale(item);\n return { width, minWidth: width, maxWidth: width, height, minHeight: height, maxHeight: height };\n }}\n isRtl={isRtl}\n >\n {(hasDropTarget) => renderItem(item, { showPreview: hasDropTarget })}\n </ItemContainer>\n ))}\n </SpaceBetween>\n </div>\n\n <LiveRegion>{announcement}</LiveRegion>\n </div>\n );\n}\n"]}
|