@react-aria/toolbar 3.0.0-nightly.4624 → 3.0.0-nightly.4637
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/useToolbar.main.js
CHANGED
|
@@ -24,7 +24,7 @@ $parcel$export(module.exports, "useToolbar", () => $b132ee173e26a273$export$fa14
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
function $b132ee173e26a273$export$fa142eb1681c520(props, ref) {
|
|
27
|
-
const {
|
|
27
|
+
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, orientation: orientation = 'horizontal' } = props;
|
|
28
28
|
let [isInToolbar, setInToolbar] = (0, $37ePF$react.useState)(false);
|
|
29
29
|
// should be safe because re-calling set state with the same value it already has is a no-op
|
|
30
30
|
// this will allow us to react should a parent re-render and change its role though
|
|
@@ -34,18 +34,18 @@ function $b132ee173e26a273$export$fa142eb1681c520(props, ref) {
|
|
|
34
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
35
|
});
|
|
36
36
|
const { direction: direction } = (0, $37ePF$reactariai18n.useLocale)();
|
|
37
|
-
const shouldReverse = direction ===
|
|
37
|
+
const shouldReverse = direction === 'rtl' && orientation === 'horizontal';
|
|
38
38
|
let focusManager = (0, $37ePF$reactariafocus.createFocusManager)(ref);
|
|
39
39
|
const onKeyDown = (e)=>{
|
|
40
40
|
// don't handle portalled events
|
|
41
41
|
if (!e.currentTarget.contains(e.target)) return;
|
|
42
|
-
if (orientation ===
|
|
42
|
+
if (orientation === 'horizontal' && e.key === 'ArrowRight' || orientation === 'vertical' && e.key === 'ArrowDown') {
|
|
43
43
|
if (shouldReverse) focusManager.focusPrevious();
|
|
44
44
|
else focusManager.focusNext();
|
|
45
|
-
} else if (orientation ===
|
|
45
|
+
} else if (orientation === 'horizontal' && e.key === 'ArrowLeft' || orientation === 'vertical' && e.key === 'ArrowUp') {
|
|
46
46
|
if (shouldReverse) focusManager.focusNext();
|
|
47
47
|
else focusManager.focusPrevious();
|
|
48
|
-
} else if (e.key ===
|
|
48
|
+
} else if (e.key === 'Tab') {
|
|
49
49
|
// When the tab key is pressed, we want to move focus
|
|
50
50
|
// out of the entire toolbar. To do this, move focus
|
|
51
51
|
// to the first or last focusable child, and let the
|
|
@@ -79,10 +79,10 @@ function $b132ee173e26a273$export$fa142eb1681c520(props, ref) {
|
|
|
79
79
|
};
|
|
80
80
|
return {
|
|
81
81
|
toolbarProps: {
|
|
82
|
-
role: !isInToolbar ?
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
82
|
+
role: !isInToolbar ? 'toolbar' : 'group',
|
|
83
|
+
'aria-orientation': orientation,
|
|
84
|
+
'aria-label': ariaLabel,
|
|
85
|
+
'aria-labelledby': ariaLabel == null ? ariaLabelledBy : undefined,
|
|
86
86
|
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
|
|
87
87
|
onFocusCapture: !isInToolbar ? onFocus : undefined,
|
|
88
88
|
onBlurCapture: !isInToolbar ? onBlur : undefined
|
package/dist/useToolbar.mjs
CHANGED
|
@@ -18,7 +18,7 @@ import {useLocale as $k3LOe$useLocale} from "@react-aria/i18n";
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
21
|
-
const {
|
|
21
|
+
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, orientation: orientation = 'horizontal' } = props;
|
|
22
22
|
let [isInToolbar, setInToolbar] = (0, $k3LOe$useState)(false);
|
|
23
23
|
// should be safe because re-calling set state with the same value it already has is a no-op
|
|
24
24
|
// this will allow us to react should a parent re-render and change its role though
|
|
@@ -28,18 +28,18 @@ function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
|
28
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
29
|
});
|
|
30
30
|
const { direction: direction } = (0, $k3LOe$useLocale)();
|
|
31
|
-
const shouldReverse = direction ===
|
|
31
|
+
const shouldReverse = direction === 'rtl' && orientation === 'horizontal';
|
|
32
32
|
let focusManager = (0, $k3LOe$createFocusManager)(ref);
|
|
33
33
|
const onKeyDown = (e)=>{
|
|
34
34
|
// don't handle portalled events
|
|
35
35
|
if (!e.currentTarget.contains(e.target)) return;
|
|
36
|
-
if (orientation ===
|
|
36
|
+
if (orientation === 'horizontal' && e.key === 'ArrowRight' || orientation === 'vertical' && e.key === 'ArrowDown') {
|
|
37
37
|
if (shouldReverse) focusManager.focusPrevious();
|
|
38
38
|
else focusManager.focusNext();
|
|
39
|
-
} else if (orientation ===
|
|
39
|
+
} else if (orientation === 'horizontal' && e.key === 'ArrowLeft' || orientation === 'vertical' && e.key === 'ArrowUp') {
|
|
40
40
|
if (shouldReverse) focusManager.focusNext();
|
|
41
41
|
else focusManager.focusPrevious();
|
|
42
|
-
} else if (e.key ===
|
|
42
|
+
} else if (e.key === 'Tab') {
|
|
43
43
|
// When the tab key is pressed, we want to move focus
|
|
44
44
|
// out of the entire toolbar. To do this, move focus
|
|
45
45
|
// to the first or last focusable child, and let the
|
|
@@ -73,10 +73,10 @@ function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
|
73
73
|
};
|
|
74
74
|
return {
|
|
75
75
|
toolbarProps: {
|
|
76
|
-
role: !isInToolbar ?
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
role: !isInToolbar ? 'toolbar' : 'group',
|
|
77
|
+
'aria-orientation': orientation,
|
|
78
|
+
'aria-label': ariaLabel,
|
|
79
|
+
'aria-labelledby': ariaLabel == null ? ariaLabelledBy : undefined,
|
|
80
80
|
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
|
|
81
81
|
onFocusCapture: !isInToolbar ? onFocus : undefined,
|
|
82
82
|
onBlurCapture: !isInToolbar ? onBlur : undefined
|
|
@@ -18,7 +18,7 @@ import {useLocale as $k3LOe$useLocale} from "@react-aria/i18n";
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
21
|
-
const {
|
|
21
|
+
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, orientation: orientation = 'horizontal' } = props;
|
|
22
22
|
let [isInToolbar, setInToolbar] = (0, $k3LOe$useState)(false);
|
|
23
23
|
// should be safe because re-calling set state with the same value it already has is a no-op
|
|
24
24
|
// this will allow us to react should a parent re-render and change its role though
|
|
@@ -28,18 +28,18 @@ function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
|
28
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
29
|
});
|
|
30
30
|
const { direction: direction } = (0, $k3LOe$useLocale)();
|
|
31
|
-
const shouldReverse = direction ===
|
|
31
|
+
const shouldReverse = direction === 'rtl' && orientation === 'horizontal';
|
|
32
32
|
let focusManager = (0, $k3LOe$createFocusManager)(ref);
|
|
33
33
|
const onKeyDown = (e)=>{
|
|
34
34
|
// don't handle portalled events
|
|
35
35
|
if (!e.currentTarget.contains(e.target)) return;
|
|
36
|
-
if (orientation ===
|
|
36
|
+
if (orientation === 'horizontal' && e.key === 'ArrowRight' || orientation === 'vertical' && e.key === 'ArrowDown') {
|
|
37
37
|
if (shouldReverse) focusManager.focusPrevious();
|
|
38
38
|
else focusManager.focusNext();
|
|
39
|
-
} else if (orientation ===
|
|
39
|
+
} else if (orientation === 'horizontal' && e.key === 'ArrowLeft' || orientation === 'vertical' && e.key === 'ArrowUp') {
|
|
40
40
|
if (shouldReverse) focusManager.focusNext();
|
|
41
41
|
else focusManager.focusPrevious();
|
|
42
|
-
} else if (e.key ===
|
|
42
|
+
} else if (e.key === 'Tab') {
|
|
43
43
|
// When the tab key is pressed, we want to move focus
|
|
44
44
|
// out of the entire toolbar. To do this, move focus
|
|
45
45
|
// to the first or last focusable child, and let the
|
|
@@ -73,10 +73,10 @@ function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
|
|
|
73
73
|
};
|
|
74
74
|
return {
|
|
75
75
|
toolbarProps: {
|
|
76
|
-
role: !isInToolbar ?
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
role: !isInToolbar ? 'toolbar' : 'group',
|
|
77
|
+
'aria-orientation': orientation,
|
|
78
|
+
'aria-label': ariaLabel,
|
|
79
|
+
'aria-labelledby': ariaLabel == null ? ariaLabelledBy : undefined,
|
|
80
80
|
onKeyDownCapture: !isInToolbar ? onKeyDown : undefined,
|
|
81
81
|
onFocusCapture: !isInToolbar ? onFocus : undefined,
|
|
82
82
|
onBlurCapture: !isInToolbar ? onBlur : undefined
|
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.4637+c57671e7f",
|
|
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.2925+c57671e7f",
|
|
26
|
+
"@react-aria/i18n": "3.0.0-nightly.2925+c57671e7f",
|
|
27
|
+
"@react-aria/utils": "3.0.0-nightly.2925+c57671e7f",
|
|
28
|
+
"@react-types/shared": "3.0.0-nightly.2925+c57671e7f",
|
|
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": "c57671e7f57c4ffe59640a174f084cf660968913"
|
|
38
38
|
}
|