@react-magma/charts 14.0.0-rc.5 → 14.0.0
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-magma/charts",
|
|
3
|
-
"version": "14.0.0
|
|
3
|
+
"version": "14.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"identity-obj-proxy": "3.0.0",
|
|
51
51
|
"react": "18.3.1",
|
|
52
52
|
"react-dom": "18.3.1",
|
|
53
|
-
"react-magma-dom": "^5.
|
|
53
|
+
"react-magma-dom": "^5.0.0",
|
|
54
54
|
"react-magma-icons": "^3.2.5",
|
|
55
55
|
"rollup": "^4.52.4",
|
|
56
56
|
"rollup-plugin-postcss": "^4.0.2"
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"@emotion/styled": "^11.14.0",
|
|
61
61
|
"react": "^18.3.1",
|
|
62
62
|
"react-dom": "^18.3.1",
|
|
63
|
-
"react-magma-dom": "^5.
|
|
63
|
+
"react-magma-dom": "^5.0.0",
|
|
64
64
|
"react-magma-icons": "^3.2.5"
|
|
65
65
|
},
|
|
66
66
|
"engines": {
|
|
@@ -7,6 +7,7 @@ function getFocusableElements(container: HTMLElement): HTMLElement[] {
|
|
|
7
7
|
return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
|
|
8
8
|
(el): el is HTMLElement => {
|
|
9
9
|
const style = window.getComputedStyle(el);
|
|
10
|
+
|
|
10
11
|
return (
|
|
11
12
|
style.display !== 'none' &&
|
|
12
13
|
style.visibility !== 'hidden' &&
|
|
@@ -18,6 +19,7 @@ function getFocusableElements(container: HTMLElement): HTMLElement[] {
|
|
|
18
19
|
|
|
19
20
|
function findVisibleModal(wrapper: HTMLElement): HTMLElement | null {
|
|
20
21
|
const modal = wrapper.querySelector<HTMLElement>('.cds--modal');
|
|
22
|
+
|
|
21
23
|
if (!modal) return null;
|
|
22
24
|
|
|
23
25
|
const isVisible =
|
|
@@ -40,14 +42,17 @@ export function useCarbonModalFocusManagement(
|
|
|
40
42
|
|
|
41
43
|
React.useEffect(() => {
|
|
42
44
|
const wrapper = wrapperRef.current;
|
|
45
|
+
|
|
43
46
|
if (!wrapper) return;
|
|
44
47
|
|
|
45
48
|
function focusModalCloseButton(modal: HTMLElement) {
|
|
46
49
|
const closeButton = modal.querySelector<HTMLElement>('.cds--modal-close');
|
|
50
|
+
|
|
47
51
|
if (closeButton) {
|
|
48
52
|
closeButton.focus();
|
|
49
53
|
} else {
|
|
50
54
|
const focusable = getFocusableElements(modal);
|
|
55
|
+
|
|
51
56
|
if (focusable.length > 0) {
|
|
52
57
|
focusable[0].focus();
|
|
53
58
|
}
|
|
@@ -62,6 +67,7 @@ export function useCarbonModalFocusManagement(
|
|
|
62
67
|
// (e.g. Carbon's overflow menu returning focus to its trigger).
|
|
63
68
|
focusinHandler.current = (event: FocusEvent) => {
|
|
64
69
|
const target = event.target as HTMLElement;
|
|
70
|
+
|
|
65
71
|
if (!modal.contains(target)) {
|
|
66
72
|
setTimeout(() => {
|
|
67
73
|
if (currentModal.current === modal) {
|
|
@@ -78,11 +84,13 @@ export function useCarbonModalFocusManagement(
|
|
|
78
84
|
if (modal.contains(document.activeElement)) return;
|
|
79
85
|
|
|
80
86
|
const closeBtn = modal.querySelector<HTMLElement>('.cds--modal-close');
|
|
87
|
+
|
|
81
88
|
if (
|
|
82
89
|
closeBtn &&
|
|
83
90
|
window.getComputedStyle(closeBtn).visibility !== 'hidden'
|
|
84
91
|
) {
|
|
85
92
|
closeBtn.focus();
|
|
93
|
+
|
|
86
94
|
return;
|
|
87
95
|
}
|
|
88
96
|
|
|
@@ -90,14 +98,17 @@ export function useCarbonModalFocusManagement(
|
|
|
90
98
|
requestAnimationFrame(pollAndFocus);
|
|
91
99
|
}
|
|
92
100
|
};
|
|
101
|
+
|
|
93
102
|
requestAnimationFrame(pollAndFocus);
|
|
94
103
|
|
|
95
104
|
keydownHandler.current = (event: KeyboardEvent) => {
|
|
96
105
|
if (event.key !== 'Tab') return;
|
|
97
106
|
|
|
98
107
|
const focusable = getFocusableElements(modal);
|
|
108
|
+
|
|
99
109
|
if (focusable.length === 0) {
|
|
100
110
|
event.preventDefault();
|
|
111
|
+
|
|
101
112
|
return;
|
|
102
113
|
}
|
|
103
114
|
|
|
@@ -106,6 +117,7 @@ export function useCarbonModalFocusManagement(
|
|
|
106
117
|
if (focusable[0] !== document.activeElement) {
|
|
107
118
|
focusable[0].focus();
|
|
108
119
|
}
|
|
120
|
+
|
|
109
121
|
return;
|
|
110
122
|
}
|
|
111
123
|
|