@react-aria/toolbar 3.0.0-nightly.4552 → 3.0.0-nightly.4558
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/dist/import.mjs +1 -92
- package/dist/main.js +1 -92
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -92
- package/dist/module.js.map +1 -1
- package/dist/useToolbar.main.js +94 -0
- package/dist/useToolbar.main.js.map +1 -0
- package/dist/useToolbar.mjs +89 -0
- package/dist/useToolbar.module.js +89 -0
- package/dist/useToolbar.module.js.map +1 -0
- package/package.json +6 -6
package/dist/import.mjs
CHANGED
|
@@ -1,25 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {useState as $gw6el$useState, useRef as $gw6el$useRef} from "react";
|
|
3
|
-
import {useLayoutEffect as $gw6el$useLayoutEffect} from "@react-aria/utils";
|
|
4
|
-
import {useLocale as $gw6el$useLocale} from "@react-aria/i18n";
|
|
1
|
+
import {useToolbar as $2680b1829e803644$export$fa142eb1681c520} from "./useToolbar.mjs";
|
|
5
2
|
|
|
6
|
-
|
|
7
|
-
function $parcel$export(e, n, v, s) {
|
|
8
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
9
|
-
}
|
|
10
|
-
/*
|
|
11
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
12
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
13
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
15
|
-
*
|
|
16
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
17
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
18
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19
|
-
* governing permissions and limitations under the License.
|
|
20
|
-
*/ var $2680b1829e803644$exports = {};
|
|
21
|
-
|
|
22
|
-
$parcel$export($2680b1829e803644$exports, "useToolbar", () => $2680b1829e803644$export$fa142eb1681c520);
|
|
23
3
|
/*
|
|
24
4
|
* Copyright 2023 Adobe. All rights reserved.
|
|
25
5
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -33,76 +13,5 @@ $parcel$export($2680b1829e803644$exports, "useToolbar", () => $2680b1829e803644$
|
|
|
33
13
|
*/
|
|
34
14
|
|
|
35
15
|
|
|
36
|
-
|
|
37
|
-
function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
38
|
-
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props;
|
|
39
|
-
let [isInToolbar, setInToolbar] = (0, $gw6el$useState)(false);
|
|
40
|
-
// should be safe because re-calling set state with the same value it already has is a no-op
|
|
41
|
-
// this will allow us to react should a parent re-render and change its role though
|
|
42
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
43
|
-
(0, $gw6el$useLayoutEffect)(()=>{
|
|
44
|
-
var _ref_current_parentElement;
|
|
45
|
-
setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
|
|
46
|
-
});
|
|
47
|
-
const { direction: direction } = (0, $gw6el$useLocale)();
|
|
48
|
-
const shouldReverse = direction === "rtl" && orientation === "horizontal";
|
|
49
|
-
let focusManager = (0, $gw6el$createFocusManager)(ref);
|
|
50
|
-
const onKeyDown = (e)=>{
|
|
51
|
-
// don't handle portalled events
|
|
52
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
53
|
-
if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
|
|
54
|
-
if (shouldReverse) focusManager.focusPrevious();
|
|
55
|
-
else focusManager.focusNext();
|
|
56
|
-
} else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
|
|
57
|
-
if (shouldReverse) focusManager.focusNext();
|
|
58
|
-
else focusManager.focusPrevious();
|
|
59
|
-
} else if (e.key === "Tab") {
|
|
60
|
-
// When the tab key is pressed, we want to move focus
|
|
61
|
-
// out of the entire toolbar. To do this, move focus
|
|
62
|
-
// to the first or last focusable child, and let the
|
|
63
|
-
// browser handle the Tab key as usual from there.
|
|
64
|
-
e.stopPropagation();
|
|
65
|
-
lastFocused.current = document.activeElement;
|
|
66
|
-
if (e.shiftKey) focusManager.focusFirst();
|
|
67
|
-
else focusManager.focusLast();
|
|
68
|
-
return;
|
|
69
|
-
} else // if we didn't handle anything, return early so we don't preventDefault
|
|
70
|
-
return;
|
|
71
|
-
// Prevent arrow keys from being handled by nested action groups.
|
|
72
|
-
e.stopPropagation();
|
|
73
|
-
e.preventDefault();
|
|
74
|
-
};
|
|
75
|
-
// Record the last focused child when focus moves out of the toolbar.
|
|
76
|
-
const lastFocused = (0, $gw6el$useRef)(null);
|
|
77
|
-
const onBlur = (e)=>{
|
|
78
|
-
if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
|
|
79
|
-
};
|
|
80
|
-
// Restore focus to the last focused child when focus returns into the toolbar.
|
|
81
|
-
// If the element was removed, do nothing, either the first item in the first group,
|
|
82
|
-
// or the last item in the last group will be focused, depending on direction.
|
|
83
|
-
const onFocus = (e)=>{
|
|
84
|
-
var _ref_current;
|
|
85
|
-
if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
|
|
86
|
-
var _lastFocused_current;
|
|
87
|
-
(_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
|
|
88
|
-
lastFocused.current = null;
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
return {
|
|
92
|
-
toolbarProps: {
|
|
93
|
-
role: !isInToolbar ? "toolbar" : "group",
|
|
94
|
-
"aria-orientation": orientation,
|
|
95
|
-
"aria-label": ariaLabel,
|
|
96
|
-
"aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined,
|
|
97
|
-
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
|
|
98
|
-
onFocusCapture: !isInToolbar ? onFocus : undefined,
|
|
99
|
-
onBlurCapture: !isInToolbar ? onBlur : undefined
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
16
|
export {$2680b1829e803644$export$fa142eb1681c520 as useToolbar};
|
|
108
17
|
//# sourceMappingURL=module.js.map
|
package/dist/main.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $8sZuk$react = require("react");
|
|
3
|
-
var $8sZuk$reactariautils = require("@react-aria/utils");
|
|
4
|
-
var $8sZuk$reactariai18n = require("@react-aria/i18n");
|
|
1
|
+
var $b132ee173e26a273$exports = require("./useToolbar.main.js");
|
|
5
2
|
|
|
6
3
|
|
|
7
4
|
function $parcel$exportWildcard(dest, source) {
|
|
@@ -20,23 +17,6 @@ function $parcel$exportWildcard(dest, source) {
|
|
|
20
17
|
|
|
21
18
|
return dest;
|
|
22
19
|
}
|
|
23
|
-
|
|
24
|
-
function $parcel$export(e, n, v, s) {
|
|
25
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
26
|
-
}
|
|
27
|
-
/*
|
|
28
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
29
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
30
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
31
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
32
|
-
*
|
|
33
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
34
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
35
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
36
|
-
* governing permissions and limitations under the License.
|
|
37
|
-
*/ var $b132ee173e26a273$exports = {};
|
|
38
|
-
|
|
39
|
-
$parcel$export($b132ee173e26a273$exports, "useToolbar", () => $b132ee173e26a273$export$fa142eb1681c520);
|
|
40
20
|
/*
|
|
41
21
|
* Copyright 2023 Adobe. All rights reserved.
|
|
42
22
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -48,77 +28,6 @@ $parcel$export($b132ee173e26a273$exports, "useToolbar", () => $b132ee173e26a273$
|
|
|
48
28
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
49
29
|
* governing permissions and limitations under the License.
|
|
50
30
|
*/
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
function $b132ee173e26a273$export$fa142eb1681c520(props, ref) {
|
|
55
|
-
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props;
|
|
56
|
-
let [isInToolbar, setInToolbar] = (0, $8sZuk$react.useState)(false);
|
|
57
|
-
// should be safe because re-calling set state with the same value it already has is a no-op
|
|
58
|
-
// this will allow us to react should a parent re-render and change its role though
|
|
59
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
60
|
-
(0, $8sZuk$reactariautils.useLayoutEffect)(()=>{
|
|
61
|
-
var _ref_current_parentElement;
|
|
62
|
-
setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
|
|
63
|
-
});
|
|
64
|
-
const { direction: direction } = (0, $8sZuk$reactariai18n.useLocale)();
|
|
65
|
-
const shouldReverse = direction === "rtl" && orientation === "horizontal";
|
|
66
|
-
let focusManager = (0, $8sZuk$reactariafocus.createFocusManager)(ref);
|
|
67
|
-
const onKeyDown = (e)=>{
|
|
68
|
-
// don't handle portalled events
|
|
69
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
70
|
-
if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
|
|
71
|
-
if (shouldReverse) focusManager.focusPrevious();
|
|
72
|
-
else focusManager.focusNext();
|
|
73
|
-
} else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
|
|
74
|
-
if (shouldReverse) focusManager.focusNext();
|
|
75
|
-
else focusManager.focusPrevious();
|
|
76
|
-
} else if (e.key === "Tab") {
|
|
77
|
-
// When the tab key is pressed, we want to move focus
|
|
78
|
-
// out of the entire toolbar. To do this, move focus
|
|
79
|
-
// to the first or last focusable child, and let the
|
|
80
|
-
// browser handle the Tab key as usual from there.
|
|
81
|
-
e.stopPropagation();
|
|
82
|
-
lastFocused.current = document.activeElement;
|
|
83
|
-
if (e.shiftKey) focusManager.focusFirst();
|
|
84
|
-
else focusManager.focusLast();
|
|
85
|
-
return;
|
|
86
|
-
} else // if we didn't handle anything, return early so we don't preventDefault
|
|
87
|
-
return;
|
|
88
|
-
// Prevent arrow keys from being handled by nested action groups.
|
|
89
|
-
e.stopPropagation();
|
|
90
|
-
e.preventDefault();
|
|
91
|
-
};
|
|
92
|
-
// Record the last focused child when focus moves out of the toolbar.
|
|
93
|
-
const lastFocused = (0, $8sZuk$react.useRef)(null);
|
|
94
|
-
const onBlur = (e)=>{
|
|
95
|
-
if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
|
|
96
|
-
};
|
|
97
|
-
// Restore focus to the last focused child when focus returns into the toolbar.
|
|
98
|
-
// If the element was removed, do nothing, either the first item in the first group,
|
|
99
|
-
// or the last item in the last group will be focused, depending on direction.
|
|
100
|
-
const onFocus = (e)=>{
|
|
101
|
-
var _ref_current;
|
|
102
|
-
if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
|
|
103
|
-
var _lastFocused_current;
|
|
104
|
-
(_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
|
|
105
|
-
lastFocused.current = null;
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
return {
|
|
109
|
-
toolbarProps: {
|
|
110
|
-
role: !isInToolbar ? "toolbar" : "group",
|
|
111
|
-
"aria-orientation": orientation,
|
|
112
|
-
"aria-label": ariaLabel,
|
|
113
|
-
"aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined,
|
|
114
|
-
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
|
|
115
|
-
onFocusCapture: !isInToolbar ? onFocus : undefined,
|
|
116
|
-
onBlurCapture: !isInToolbar ? onBlur : undefined
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
|
|
122
31
|
$parcel$exportWildcard(module.exports, $b132ee173e26a273$exports);
|
|
123
32
|
|
|
124
33
|
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/toolbar/src/index.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useToolbar';\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -1,25 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {useState as $gw6el$useState, useRef as $gw6el$useRef} from "react";
|
|
3
|
-
import {useLayoutEffect as $gw6el$useLayoutEffect} from "@react-aria/utils";
|
|
4
|
-
import {useLocale as $gw6el$useLocale} from "@react-aria/i18n";
|
|
1
|
+
import {useToolbar as $2680b1829e803644$export$fa142eb1681c520} from "./useToolbar.module.js";
|
|
5
2
|
|
|
6
|
-
|
|
7
|
-
function $parcel$export(e, n, v, s) {
|
|
8
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
9
|
-
}
|
|
10
|
-
/*
|
|
11
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
12
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
13
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
15
|
-
*
|
|
16
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
17
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
18
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19
|
-
* governing permissions and limitations under the License.
|
|
20
|
-
*/ var $2680b1829e803644$exports = {};
|
|
21
|
-
|
|
22
|
-
$parcel$export($2680b1829e803644$exports, "useToolbar", () => $2680b1829e803644$export$fa142eb1681c520);
|
|
23
3
|
/*
|
|
24
4
|
* Copyright 2023 Adobe. All rights reserved.
|
|
25
5
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -33,76 +13,5 @@ $parcel$export($2680b1829e803644$exports, "useToolbar", () => $2680b1829e803644$
|
|
|
33
13
|
*/
|
|
34
14
|
|
|
35
15
|
|
|
36
|
-
|
|
37
|
-
function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
38
|
-
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props;
|
|
39
|
-
let [isInToolbar, setInToolbar] = (0, $gw6el$useState)(false);
|
|
40
|
-
// should be safe because re-calling set state with the same value it already has is a no-op
|
|
41
|
-
// this will allow us to react should a parent re-render and change its role though
|
|
42
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
43
|
-
(0, $gw6el$useLayoutEffect)(()=>{
|
|
44
|
-
var _ref_current_parentElement;
|
|
45
|
-
setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
|
|
46
|
-
});
|
|
47
|
-
const { direction: direction } = (0, $gw6el$useLocale)();
|
|
48
|
-
const shouldReverse = direction === "rtl" && orientation === "horizontal";
|
|
49
|
-
let focusManager = (0, $gw6el$createFocusManager)(ref);
|
|
50
|
-
const onKeyDown = (e)=>{
|
|
51
|
-
// don't handle portalled events
|
|
52
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
53
|
-
if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
|
|
54
|
-
if (shouldReverse) focusManager.focusPrevious();
|
|
55
|
-
else focusManager.focusNext();
|
|
56
|
-
} else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
|
|
57
|
-
if (shouldReverse) focusManager.focusNext();
|
|
58
|
-
else focusManager.focusPrevious();
|
|
59
|
-
} else if (e.key === "Tab") {
|
|
60
|
-
// When the tab key is pressed, we want to move focus
|
|
61
|
-
// out of the entire toolbar. To do this, move focus
|
|
62
|
-
// to the first or last focusable child, and let the
|
|
63
|
-
// browser handle the Tab key as usual from there.
|
|
64
|
-
e.stopPropagation();
|
|
65
|
-
lastFocused.current = document.activeElement;
|
|
66
|
-
if (e.shiftKey) focusManager.focusFirst();
|
|
67
|
-
else focusManager.focusLast();
|
|
68
|
-
return;
|
|
69
|
-
} else // if we didn't handle anything, return early so we don't preventDefault
|
|
70
|
-
return;
|
|
71
|
-
// Prevent arrow keys from being handled by nested action groups.
|
|
72
|
-
e.stopPropagation();
|
|
73
|
-
e.preventDefault();
|
|
74
|
-
};
|
|
75
|
-
// Record the last focused child when focus moves out of the toolbar.
|
|
76
|
-
const lastFocused = (0, $gw6el$useRef)(null);
|
|
77
|
-
const onBlur = (e)=>{
|
|
78
|
-
if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
|
|
79
|
-
};
|
|
80
|
-
// Restore focus to the last focused child when focus returns into the toolbar.
|
|
81
|
-
// If the element was removed, do nothing, either the first item in the first group,
|
|
82
|
-
// or the last item in the last group will be focused, depending on direction.
|
|
83
|
-
const onFocus = (e)=>{
|
|
84
|
-
var _ref_current;
|
|
85
|
-
if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
|
|
86
|
-
var _lastFocused_current;
|
|
87
|
-
(_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
|
|
88
|
-
lastFocused.current = null;
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
return {
|
|
92
|
-
toolbarProps: {
|
|
93
|
-
role: !isInToolbar ? "toolbar" : "group",
|
|
94
|
-
"aria-orientation": orientation,
|
|
95
|
-
"aria-label": ariaLabel,
|
|
96
|
-
"aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined,
|
|
97
|
-
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
|
|
98
|
-
onFocusCapture: !isInToolbar ? onFocus : undefined,
|
|
99
|
-
onBlurCapture: !isInToolbar ? onBlur : undefined
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
16
|
export {$2680b1829e803644$export$fa142eb1681c520 as useToolbar};
|
|
108
17
|
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/toolbar/src/index.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useToolbar';\n"],"names":[],"version":3,"file":"module.js.map"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
var $37ePF$reactariafocus = require("@react-aria/focus");
|
|
2
|
+
var $37ePF$react = require("react");
|
|
3
|
+
var $37ePF$reactariautils = require("@react-aria/utils");
|
|
4
|
+
var $37ePF$reactariai18n = require("@react-aria/i18n");
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
function $parcel$export(e, n, v, s) {
|
|
8
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
$parcel$export(module.exports, "useToolbar", () => $b132ee173e26a273$export$fa142eb1681c520);
|
|
12
|
+
/*
|
|
13
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
14
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
15
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
16
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
17
|
+
*
|
|
18
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
19
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
21
|
+
* governing permissions and limitations under the License.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
function $b132ee173e26a273$export$fa142eb1681c520(props, ref) {
|
|
27
|
+
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props;
|
|
28
|
+
let [isInToolbar, setInToolbar] = (0, $37ePF$react.useState)(false);
|
|
29
|
+
// should be safe because re-calling set state with the same value it already has is a no-op
|
|
30
|
+
// this will allow us to react should a parent re-render and change its role though
|
|
31
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
32
|
+
(0, $37ePF$reactariautils.useLayoutEffect)(()=>{
|
|
33
|
+
var _ref_current_parentElement;
|
|
34
|
+
setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
|
|
35
|
+
});
|
|
36
|
+
const { direction: direction } = (0, $37ePF$reactariai18n.useLocale)();
|
|
37
|
+
const shouldReverse = direction === "rtl" && orientation === "horizontal";
|
|
38
|
+
let focusManager = (0, $37ePF$reactariafocus.createFocusManager)(ref);
|
|
39
|
+
const onKeyDown = (e)=>{
|
|
40
|
+
// don't handle portalled events
|
|
41
|
+
if (!e.currentTarget.contains(e.target)) return;
|
|
42
|
+
if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
|
|
43
|
+
if (shouldReverse) focusManager.focusPrevious();
|
|
44
|
+
else focusManager.focusNext();
|
|
45
|
+
} else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
|
|
46
|
+
if (shouldReverse) focusManager.focusNext();
|
|
47
|
+
else focusManager.focusPrevious();
|
|
48
|
+
} else if (e.key === "Tab") {
|
|
49
|
+
// When the tab key is pressed, we want to move focus
|
|
50
|
+
// out of the entire toolbar. To do this, move focus
|
|
51
|
+
// to the first or last focusable child, and let the
|
|
52
|
+
// browser handle the Tab key as usual from there.
|
|
53
|
+
e.stopPropagation();
|
|
54
|
+
lastFocused.current = document.activeElement;
|
|
55
|
+
if (e.shiftKey) focusManager.focusFirst();
|
|
56
|
+
else focusManager.focusLast();
|
|
57
|
+
return;
|
|
58
|
+
} else // if we didn't handle anything, return early so we don't preventDefault
|
|
59
|
+
return;
|
|
60
|
+
// Prevent arrow keys from being handled by nested action groups.
|
|
61
|
+
e.stopPropagation();
|
|
62
|
+
e.preventDefault();
|
|
63
|
+
};
|
|
64
|
+
// Record the last focused child when focus moves out of the toolbar.
|
|
65
|
+
const lastFocused = (0, $37ePF$react.useRef)(null);
|
|
66
|
+
const onBlur = (e)=>{
|
|
67
|
+
if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
|
|
68
|
+
};
|
|
69
|
+
// Restore focus to the last focused child when focus returns into the toolbar.
|
|
70
|
+
// If the element was removed, do nothing, either the first item in the first group,
|
|
71
|
+
// or the last item in the last group will be focused, depending on direction.
|
|
72
|
+
const onFocus = (e)=>{
|
|
73
|
+
var _ref_current;
|
|
74
|
+
if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
|
|
75
|
+
var _lastFocused_current;
|
|
76
|
+
(_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
|
|
77
|
+
lastFocused.current = null;
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
return {
|
|
81
|
+
toolbarProps: {
|
|
82
|
+
role: !isInToolbar ? "toolbar" : "group",
|
|
83
|
+
"aria-orientation": orientation,
|
|
84
|
+
"aria-label": ariaLabel,
|
|
85
|
+
"aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined,
|
|
86
|
+
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
|
|
87
|
+
onFocusCapture: !isInToolbar ? onFocus : undefined,
|
|
88
|
+
onBlurCapture: !isInToolbar ? onBlur : undefined
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
//# sourceMappingURL=useToolbar.main.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA6BM,SAAS,yCAAW,KAAuB,EAAE,GAA8B;IAChF,MAAM,EACJ,cAAc,SAAS,EACvB,mBAAmB,cAAc,eACjC,cAAc,cACf,GAAG;IACJ,IAAI,CAAC,aAAa,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC3C,4FAA4F;IAC5F,mFAAmF;IACnF,uDAAuD;IACvD,CAAA,GAAA,qCAAc,EAAE;YACiB;QAA/B,aAAa,CAAC,CAAE,CAAA,IAAI,OAAO,MAAI,6BAAA,IAAI,OAAO,CAAC,aAAa,cAAzB,iDAAA,2BAA2B,OAAO,CAAC,oBAAkB;IACtF;IACA,MAAM,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC5B,MAAM,gBAAgB,cAAc,SAAS,gBAAgB;IAC7D,IAAI,eAAe,CAAA,GAAA,wCAAiB,EAAE;IAEtC,MAAM,YAAkC,CAAC;QACvC,gCAAgC;QAChC,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GACpC;QAEF,IACE,AAAC,gBAAgB,gBAAgB,EAAE,GAAG,KAAK,gBACvC,gBAAgB,cAAc,EAAE,GAAG,KAAK;YAC5C,IAAI,eACF,aAAa,aAAa;iBAE1B,aAAa,SAAS;eAEnB,IACL,AAAC,gBAAgB,gBAAgB,EAAE,GAAG,KAAK,eACvC,gBAAgB,cAAc,EAAE,GAAG,KAAK;YAC5C,IAAI,eACF,aAAa,SAAS;iBAEtB,aAAa,aAAa;eAEvB,IAAI,EAAE,GAAG,KAAK,OAAO;YAC1B,qDAAqD;YACrD,oDAAoD;YACpD,oDAAoD;YACpD,kDAAkD;YAClD,EAAE,eAAe;YACjB,YAAY,OAAO,GAAG,SAAS,aAAa;YAC5C,IAAI,EAAE,QAAQ,EACZ,aAAa,UAAU;iBAEvB,aAAa,SAAS;YAExB;QACF,OACE,wEAAwE;QACxE;QAGF,iEAAiE;QACjE,EAAE,eAAe;QACjB,EAAE,cAAc;IAClB;IAEA,qEAAqE;IACrE,MAAM,cAAc,CAAA,GAAA,mBAAK,EAAsB;IAC/C,MAAM,SAAS,CAAC;QACd,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,aAAa,KAAK,CAAC,YAAY,OAAO,EACpE,YAAY,OAAO,GAAG,EAAE,MAAM;IAElC;IAEA,+EAA+E;IAC/E,oFAAoF;IACpF,8EAA8E;IAC9E,MAAM,UAAU,CAAC;YAC0D;QAAzE,IAAI,YAAY,OAAO,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,aAAa,OAAK,eAAA,IAAI,OAAO,cAAX,mCAAA,aAAa,QAAQ,CAAC,EAAE,MAAM,IAAG;gBACxG;aAAA,uBAAA,YAAY,OAAO,cAAnB,2CAAA,qBAAqB,KAAK;YAC1B,YAAY,OAAO,GAAG;QACxB;IACF;IAEA,OAAO;QACL,cAAc;YACZ,MAAM,CAAC,cAAc,YAAY;YACjC,oBAAoB;YACpB,cAAc;YACd,mBAAmB,aAAa,OAAO,iBAAiB;YACxD,kBAAkB,CAAC,cAAc,YAAY;YAC7C,gBAAgB,CAAC,cAAc,UAAU;YACzC,eAAe,CAAC,cAAc,SAAS;QACzC;IACF;AACF","sources":["packages/@react-aria/toolbar/src/useToolbar.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, Orientation} from '@react-types/shared';\nimport {createFocusManager} from '@react-aria/focus';\nimport {HTMLAttributes, KeyboardEventHandler, RefObject, useRef, useState} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaToolbarProps extends AriaLabelingProps {\n /**\n * The orientation of the entire toolbar.\n * @default 'horizontal'\n */\n orientation?: Orientation\n}\n\nexport interface ToolbarAria {\n /**\n * Props for the toolbar container.\n */\n toolbarProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n * @param props - Props to be applied to the toolbar.\n * @param ref - A ref to a DOM element for the toolbar.\n */\nexport function useToolbar(props: AriaToolbarProps, ref: RefObject<HTMLDivElement>): ToolbarAria {\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n orientation = 'horizontal'\n } = props;\n let [isInToolbar, setInToolbar] = useState(false);\n // should be safe because re-calling set state with the same value it already has is a no-op\n // this will allow us to react should a parent re-render and change its role though\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n setInToolbar(!!(ref.current && ref.current.parentElement?.closest('[role=\"toolbar\"]')));\n });\n const {direction} = useLocale();\n const shouldReverse = direction === 'rtl' && orientation === 'horizontal';\n let focusManager = createFocusManager(ref);\n\n const onKeyDown: KeyboardEventHandler = (e) => {\n // don't handle portalled events\n if (!e.currentTarget.contains(e.target as HTMLElement)) {\n return;\n }\n if (\n (orientation === 'horizontal' && e.key === 'ArrowRight')\n || (orientation === 'vertical' && e.key === 'ArrowDown')) {\n if (shouldReverse) {\n focusManager.focusPrevious();\n } else {\n focusManager.focusNext();\n }\n } else if (\n (orientation === 'horizontal' && e.key === 'ArrowLeft')\n || (orientation === 'vertical' && e.key === 'ArrowUp')) {\n if (shouldReverse) {\n focusManager.focusNext();\n } else {\n focusManager.focusPrevious();\n }\n } else if (e.key === 'Tab') {\n // When the tab key is pressed, we want to move focus\n // out of the entire toolbar. To do this, move focus\n // to the first or last focusable child, and let the\n // browser handle the Tab key as usual from there.\n e.stopPropagation();\n lastFocused.current = document.activeElement as HTMLElement;\n if (e.shiftKey) {\n focusManager.focusFirst();\n } else {\n focusManager.focusLast();\n }\n return;\n } else {\n // if we didn't handle anything, return early so we don't preventDefault\n return;\n }\n\n // Prevent arrow keys from being handled by nested action groups.\n e.stopPropagation();\n e.preventDefault();\n };\n\n // Record the last focused child when focus moves out of the toolbar.\n const lastFocused = useRef<HTMLElement | null>(null);\n const onBlur = (e) => {\n if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) {\n lastFocused.current = e.target;\n }\n };\n\n // Restore focus to the last focused child when focus returns into the toolbar.\n // If the element was removed, do nothing, either the first item in the first group,\n // or the last item in the last group will be focused, depending on direction.\n const onFocus = (e) => {\n if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ref.current?.contains(e.target)) {\n lastFocused.current?.focus();\n lastFocused.current = null;\n }\n };\n\n return {\n toolbarProps: {\n role: !isInToolbar ? 'toolbar' : 'group',\n 'aria-orientation': orientation,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabel == null ? ariaLabelledBy : undefined,\n onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,\n onFocusCapture: !isInToolbar ? onFocus : undefined,\n onBlurCapture: !isInToolbar ? onBlur : undefined\n }\n };\n}\n"],"names":[],"version":3,"file":"useToolbar.main.js.map"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import {createFocusManager as $k3LOe$createFocusManager} from "@react-aria/focus";
|
|
2
|
+
import {useState as $k3LOe$useState, useRef as $k3LOe$useRef} from "react";
|
|
3
|
+
import {useLayoutEffect as $k3LOe$useLayoutEffect} from "@react-aria/utils";
|
|
4
|
+
import {useLocale as $k3LOe$useLocale} from "@react-aria/i18n";
|
|
5
|
+
|
|
6
|
+
/*
|
|
7
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
8
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
9
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
10
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
+
*
|
|
12
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
13
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
14
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
15
|
+
* governing permissions and limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
21
|
+
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props;
|
|
22
|
+
let [isInToolbar, setInToolbar] = (0, $k3LOe$useState)(false);
|
|
23
|
+
// should be safe because re-calling set state with the same value it already has is a no-op
|
|
24
|
+
// this will allow us to react should a parent re-render and change its role though
|
|
25
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
|
+
(0, $k3LOe$useLayoutEffect)(()=>{
|
|
27
|
+
var _ref_current_parentElement;
|
|
28
|
+
setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
|
|
29
|
+
});
|
|
30
|
+
const { direction: direction } = (0, $k3LOe$useLocale)();
|
|
31
|
+
const shouldReverse = direction === "rtl" && orientation === "horizontal";
|
|
32
|
+
let focusManager = (0, $k3LOe$createFocusManager)(ref);
|
|
33
|
+
const onKeyDown = (e)=>{
|
|
34
|
+
// don't handle portalled events
|
|
35
|
+
if (!e.currentTarget.contains(e.target)) return;
|
|
36
|
+
if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
|
|
37
|
+
if (shouldReverse) focusManager.focusPrevious();
|
|
38
|
+
else focusManager.focusNext();
|
|
39
|
+
} else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
|
|
40
|
+
if (shouldReverse) focusManager.focusNext();
|
|
41
|
+
else focusManager.focusPrevious();
|
|
42
|
+
} else if (e.key === "Tab") {
|
|
43
|
+
// When the tab key is pressed, we want to move focus
|
|
44
|
+
// out of the entire toolbar. To do this, move focus
|
|
45
|
+
// to the first or last focusable child, and let the
|
|
46
|
+
// browser handle the Tab key as usual from there.
|
|
47
|
+
e.stopPropagation();
|
|
48
|
+
lastFocused.current = document.activeElement;
|
|
49
|
+
if (e.shiftKey) focusManager.focusFirst();
|
|
50
|
+
else focusManager.focusLast();
|
|
51
|
+
return;
|
|
52
|
+
} else // if we didn't handle anything, return early so we don't preventDefault
|
|
53
|
+
return;
|
|
54
|
+
// Prevent arrow keys from being handled by nested action groups.
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
e.preventDefault();
|
|
57
|
+
};
|
|
58
|
+
// Record the last focused child when focus moves out of the toolbar.
|
|
59
|
+
const lastFocused = (0, $k3LOe$useRef)(null);
|
|
60
|
+
const onBlur = (e)=>{
|
|
61
|
+
if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
|
|
62
|
+
};
|
|
63
|
+
// Restore focus to the last focused child when focus returns into the toolbar.
|
|
64
|
+
// If the element was removed, do nothing, either the first item in the first group,
|
|
65
|
+
// or the last item in the last group will be focused, depending on direction.
|
|
66
|
+
const onFocus = (e)=>{
|
|
67
|
+
var _ref_current;
|
|
68
|
+
if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
|
|
69
|
+
var _lastFocused_current;
|
|
70
|
+
(_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
|
|
71
|
+
lastFocused.current = null;
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
return {
|
|
75
|
+
toolbarProps: {
|
|
76
|
+
role: !isInToolbar ? "toolbar" : "group",
|
|
77
|
+
"aria-orientation": orientation,
|
|
78
|
+
"aria-label": ariaLabel,
|
|
79
|
+
"aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined,
|
|
80
|
+
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
|
|
81
|
+
onFocusCapture: !isInToolbar ? onFocus : undefined,
|
|
82
|
+
onBlurCapture: !isInToolbar ? onBlur : undefined
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
export {$2680b1829e803644$export$fa142eb1681c520 as useToolbar};
|
|
89
|
+
//# sourceMappingURL=useToolbar.mjs.map
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import {createFocusManager as $k3LOe$createFocusManager} from "@react-aria/focus";
|
|
2
|
+
import {useState as $k3LOe$useState, useRef as $k3LOe$useRef} from "react";
|
|
3
|
+
import {useLayoutEffect as $k3LOe$useLayoutEffect} from "@react-aria/utils";
|
|
4
|
+
import {useLocale as $k3LOe$useLocale} from "@react-aria/i18n";
|
|
5
|
+
|
|
6
|
+
/*
|
|
7
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
8
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
9
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
10
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
+
*
|
|
12
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
13
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
14
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
15
|
+
* governing permissions and limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
21
|
+
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation: orientation = "horizontal" } = props;
|
|
22
|
+
let [isInToolbar, setInToolbar] = (0, $k3LOe$useState)(false);
|
|
23
|
+
// should be safe because re-calling set state with the same value it already has is a no-op
|
|
24
|
+
// this will allow us to react should a parent re-render and change its role though
|
|
25
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
|
+
(0, $k3LOe$useLayoutEffect)(()=>{
|
|
27
|
+
var _ref_current_parentElement;
|
|
28
|
+
setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
|
|
29
|
+
});
|
|
30
|
+
const { direction: direction } = (0, $k3LOe$useLocale)();
|
|
31
|
+
const shouldReverse = direction === "rtl" && orientation === "horizontal";
|
|
32
|
+
let focusManager = (0, $k3LOe$createFocusManager)(ref);
|
|
33
|
+
const onKeyDown = (e)=>{
|
|
34
|
+
// don't handle portalled events
|
|
35
|
+
if (!e.currentTarget.contains(e.target)) return;
|
|
36
|
+
if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
|
|
37
|
+
if (shouldReverse) focusManager.focusPrevious();
|
|
38
|
+
else focusManager.focusNext();
|
|
39
|
+
} else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
|
|
40
|
+
if (shouldReverse) focusManager.focusNext();
|
|
41
|
+
else focusManager.focusPrevious();
|
|
42
|
+
} else if (e.key === "Tab") {
|
|
43
|
+
// When the tab key is pressed, we want to move focus
|
|
44
|
+
// out of the entire toolbar. To do this, move focus
|
|
45
|
+
// to the first or last focusable child, and let the
|
|
46
|
+
// browser handle the Tab key as usual from there.
|
|
47
|
+
e.stopPropagation();
|
|
48
|
+
lastFocused.current = document.activeElement;
|
|
49
|
+
if (e.shiftKey) focusManager.focusFirst();
|
|
50
|
+
else focusManager.focusLast();
|
|
51
|
+
return;
|
|
52
|
+
} else // if we didn't handle anything, return early so we don't preventDefault
|
|
53
|
+
return;
|
|
54
|
+
// Prevent arrow keys from being handled by nested action groups.
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
e.preventDefault();
|
|
57
|
+
};
|
|
58
|
+
// Record the last focused child when focus moves out of the toolbar.
|
|
59
|
+
const lastFocused = (0, $k3LOe$useRef)(null);
|
|
60
|
+
const onBlur = (e)=>{
|
|
61
|
+
if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
|
|
62
|
+
};
|
|
63
|
+
// Restore focus to the last focused child when focus returns into the toolbar.
|
|
64
|
+
// If the element was removed, do nothing, either the first item in the first group,
|
|
65
|
+
// or the last item in the last group will be focused, depending on direction.
|
|
66
|
+
const onFocus = (e)=>{
|
|
67
|
+
var _ref_current;
|
|
68
|
+
if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
|
|
69
|
+
var _lastFocused_current;
|
|
70
|
+
(_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
|
|
71
|
+
lastFocused.current = null;
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
return {
|
|
75
|
+
toolbarProps: {
|
|
76
|
+
role: !isInToolbar ? "toolbar" : "group",
|
|
77
|
+
"aria-orientation": orientation,
|
|
78
|
+
"aria-label": ariaLabel,
|
|
79
|
+
"aria-labelledby": ariaLabel == null ? ariaLabelledBy : undefined,
|
|
80
|
+
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
|
|
81
|
+
onFocusCapture: !isInToolbar ? onFocus : undefined,
|
|
82
|
+
onBlurCapture: !isInToolbar ? onBlur : undefined
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
export {$2680b1829e803644$export$fa142eb1681c520 as useToolbar};
|
|
89
|
+
//# sourceMappingURL=useToolbar.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AA6BM,SAAS,yCAAW,KAAuB,EAAE,GAA8B;IAChF,MAAM,EACJ,cAAc,SAAS,EACvB,mBAAmB,cAAc,eACjC,cAAc,cACf,GAAG;IACJ,IAAI,CAAC,aAAa,aAAa,GAAG,CAAA,GAAA,eAAO,EAAE;IAC3C,4FAA4F;IAC5F,mFAAmF;IACnF,uDAAuD;IACvD,CAAA,GAAA,sBAAc,EAAE;YACiB;QAA/B,aAAa,CAAC,CAAE,CAAA,IAAI,OAAO,MAAI,6BAAA,IAAI,OAAO,CAAC,aAAa,cAAzB,iDAAA,2BAA2B,OAAO,CAAC,oBAAkB;IACtF;IACA,MAAM,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC5B,MAAM,gBAAgB,cAAc,SAAS,gBAAgB;IAC7D,IAAI,eAAe,CAAA,GAAA,yBAAiB,EAAE;IAEtC,MAAM,YAAkC,CAAC;QACvC,gCAAgC;QAChC,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GACpC;QAEF,IACE,AAAC,gBAAgB,gBAAgB,EAAE,GAAG,KAAK,gBACvC,gBAAgB,cAAc,EAAE,GAAG,KAAK;YAC5C,IAAI,eACF,aAAa,aAAa;iBAE1B,aAAa,SAAS;eAEnB,IACL,AAAC,gBAAgB,gBAAgB,EAAE,GAAG,KAAK,eACvC,gBAAgB,cAAc,EAAE,GAAG,KAAK;YAC5C,IAAI,eACF,aAAa,SAAS;iBAEtB,aAAa,aAAa;eAEvB,IAAI,EAAE,GAAG,KAAK,OAAO;YAC1B,qDAAqD;YACrD,oDAAoD;YACpD,oDAAoD;YACpD,kDAAkD;YAClD,EAAE,eAAe;YACjB,YAAY,OAAO,GAAG,SAAS,aAAa;YAC5C,IAAI,EAAE,QAAQ,EACZ,aAAa,UAAU;iBAEvB,aAAa,SAAS;YAExB;QACF,OACE,wEAAwE;QACxE;QAGF,iEAAiE;QACjE,EAAE,eAAe;QACjB,EAAE,cAAc;IAClB;IAEA,qEAAqE;IACrE,MAAM,cAAc,CAAA,GAAA,aAAK,EAAsB;IAC/C,MAAM,SAAS,CAAC;QACd,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,aAAa,KAAK,CAAC,YAAY,OAAO,EACpE,YAAY,OAAO,GAAG,EAAE,MAAM;IAElC;IAEA,+EAA+E;IAC/E,oFAAoF;IACpF,8EAA8E;IAC9E,MAAM,UAAU,CAAC;YAC0D;QAAzE,IAAI,YAAY,OAAO,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,aAAa,OAAK,eAAA,IAAI,OAAO,cAAX,mCAAA,aAAa,QAAQ,CAAC,EAAE,MAAM,IAAG;gBACxG;aAAA,uBAAA,YAAY,OAAO,cAAnB,2CAAA,qBAAqB,KAAK;YAC1B,YAAY,OAAO,GAAG;QACxB;IACF;IAEA,OAAO;QACL,cAAc;YACZ,MAAM,CAAC,cAAc,YAAY;YACjC,oBAAoB;YACpB,cAAc;YACd,mBAAmB,aAAa,OAAO,iBAAiB;YACxD,kBAAkB,CAAC,cAAc,YAAY;YAC7C,gBAAgB,CAAC,cAAc,UAAU;YACzC,eAAe,CAAC,cAAc,SAAS;QACzC;IACF;AACF","sources":["packages/@react-aria/toolbar/src/useToolbar.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, Orientation} from '@react-types/shared';\nimport {createFocusManager} from '@react-aria/focus';\nimport {HTMLAttributes, KeyboardEventHandler, RefObject, useRef, useState} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaToolbarProps extends AriaLabelingProps {\n /**\n * The orientation of the entire toolbar.\n * @default 'horizontal'\n */\n orientation?: Orientation\n}\n\nexport interface ToolbarAria {\n /**\n * Props for the toolbar container.\n */\n toolbarProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n * @param props - Props to be applied to the toolbar.\n * @param ref - A ref to a DOM element for the toolbar.\n */\nexport function useToolbar(props: AriaToolbarProps, ref: RefObject<HTMLDivElement>): ToolbarAria {\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n orientation = 'horizontal'\n } = props;\n let [isInToolbar, setInToolbar] = useState(false);\n // should be safe because re-calling set state with the same value it already has is a no-op\n // this will allow us to react should a parent re-render and change its role though\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n setInToolbar(!!(ref.current && ref.current.parentElement?.closest('[role=\"toolbar\"]')));\n });\n const {direction} = useLocale();\n const shouldReverse = direction === 'rtl' && orientation === 'horizontal';\n let focusManager = createFocusManager(ref);\n\n const onKeyDown: KeyboardEventHandler = (e) => {\n // don't handle portalled events\n if (!e.currentTarget.contains(e.target as HTMLElement)) {\n return;\n }\n if (\n (orientation === 'horizontal' && e.key === 'ArrowRight')\n || (orientation === 'vertical' && e.key === 'ArrowDown')) {\n if (shouldReverse) {\n focusManager.focusPrevious();\n } else {\n focusManager.focusNext();\n }\n } else if (\n (orientation === 'horizontal' && e.key === 'ArrowLeft')\n || (orientation === 'vertical' && e.key === 'ArrowUp')) {\n if (shouldReverse) {\n focusManager.focusNext();\n } else {\n focusManager.focusPrevious();\n }\n } else if (e.key === 'Tab') {\n // When the tab key is pressed, we want to move focus\n // out of the entire toolbar. To do this, move focus\n // to the first or last focusable child, and let the\n // browser handle the Tab key as usual from there.\n e.stopPropagation();\n lastFocused.current = document.activeElement as HTMLElement;\n if (e.shiftKey) {\n focusManager.focusFirst();\n } else {\n focusManager.focusLast();\n }\n return;\n } else {\n // if we didn't handle anything, return early so we don't preventDefault\n return;\n }\n\n // Prevent arrow keys from being handled by nested action groups.\n e.stopPropagation();\n e.preventDefault();\n };\n\n // Record the last focused child when focus moves out of the toolbar.\n const lastFocused = useRef<HTMLElement | null>(null);\n const onBlur = (e) => {\n if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) {\n lastFocused.current = e.target;\n }\n };\n\n // Restore focus to the last focused child when focus returns into the toolbar.\n // If the element was removed, do nothing, either the first item in the first group,\n // or the last item in the last group will be focused, depending on direction.\n const onFocus = (e) => {\n if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ref.current?.contains(e.target)) {\n lastFocused.current?.focus();\n lastFocused.current = null;\n }\n };\n\n return {\n toolbarProps: {\n role: !isInToolbar ? 'toolbar' : 'group',\n 'aria-orientation': orientation,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabel == null ? ariaLabelledBy : undefined,\n onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,\n onFocusCapture: !isInToolbar ? onFocus : undefined,\n onBlurCapture: !isInToolbar ? onBlur : undefined\n }\n };\n}\n"],"names":[],"version":3,"file":"useToolbar.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/toolbar",
|
|
3
|
-
"version": "3.0.0-nightly.
|
|
3
|
+
"version": "3.0.0-nightly.4558+c5e4b3701",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,10 +22,10 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
26
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
27
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
28
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
25
|
+
"@react-aria/focus": "3.0.0-nightly.2846+c5e4b3701",
|
|
26
|
+
"@react-aria/i18n": "3.0.0-nightly.2846+c5e4b3701",
|
|
27
|
+
"@react-aria/utils": "3.0.0-nightly.2846+c5e4b3701",
|
|
28
|
+
"@react-types/shared": "3.0.0-nightly.2846+c5e4b3701",
|
|
29
29
|
"@swc/helpers": "^0.5.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "c5e4b3701fdb89eb551f1b3697ac253f06ef68fa"
|
|
38
38
|
}
|