@react-aria/actiongroup 3.7.5-nightly.4624 → 3.7.5
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.
|
@@ -24,12 +24,12 @@ $parcel$export(module.exports, "useActionGroup", () => $ceb684449a137553$export$
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
const $ceb684449a137553$var$BUTTON_GROUP_ROLES = {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
'none': 'toolbar',
|
|
28
|
+
'single': 'radiogroup',
|
|
29
|
+
'multiple': 'toolbar'
|
|
30
30
|
};
|
|
31
31
|
function $ceb684449a137553$export$f4bf8d43c16de704(props, state, ref) {
|
|
32
|
-
let { isDisabled: isDisabled, orientation: orientation =
|
|
32
|
+
let { isDisabled: isDisabled, orientation: orientation = 'horizontal' } = props;
|
|
33
33
|
let [isInToolbar, setInToolbar] = (0, $aCPyD$react.useState)(false);
|
|
34
34
|
(0, $aCPyD$reactariautils.useLayoutEffect)(()=>{
|
|
35
35
|
var _ref_current_parentElement;
|
|
@@ -43,26 +43,26 @@ function $ceb684449a137553$export$f4bf8d43c16de704(props, state, ref) {
|
|
|
43
43
|
if (!allKeys.some((key)=>!state.disabledKeys.has(key))) isDisabled = true;
|
|
44
44
|
let { direction: direction } = (0, $aCPyD$reactariai18n.useLocale)();
|
|
45
45
|
let focusManager = (0, $aCPyD$reactariafocus.createFocusManager)(ref);
|
|
46
|
-
let flipDirection = direction ===
|
|
46
|
+
let flipDirection = direction === 'rtl' && orientation === 'horizontal';
|
|
47
47
|
let onKeyDown = (e)=>{
|
|
48
48
|
if (!e.currentTarget.contains(e.target)) return;
|
|
49
49
|
switch(e.key){
|
|
50
|
-
case
|
|
51
|
-
case
|
|
50
|
+
case 'ArrowRight':
|
|
51
|
+
case 'ArrowDown':
|
|
52
52
|
e.preventDefault();
|
|
53
53
|
e.stopPropagation();
|
|
54
|
-
if (e.key ===
|
|
54
|
+
if (e.key === 'ArrowRight' && flipDirection) focusManager.focusPrevious({
|
|
55
55
|
wrap: true
|
|
56
56
|
});
|
|
57
57
|
else focusManager.focusNext({
|
|
58
58
|
wrap: true
|
|
59
59
|
});
|
|
60
60
|
break;
|
|
61
|
-
case
|
|
62
|
-
case
|
|
61
|
+
case 'ArrowLeft':
|
|
62
|
+
case 'ArrowUp':
|
|
63
63
|
e.preventDefault();
|
|
64
64
|
e.stopPropagation();
|
|
65
|
-
if (e.key ===
|
|
65
|
+
if (e.key === 'ArrowLeft' && flipDirection) focusManager.focusNext({
|
|
66
66
|
wrap: true
|
|
67
67
|
});
|
|
68
68
|
else focusManager.focusPrevious({
|
|
@@ -72,15 +72,15 @@ function $ceb684449a137553$export$f4bf8d43c16de704(props, state, ref) {
|
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
74
|
let role = $ceb684449a137553$var$BUTTON_GROUP_ROLES[state.selectionManager.selectionMode];
|
|
75
|
-
if (isInToolbar && role ===
|
|
75
|
+
if (isInToolbar && role === 'toolbar') role = 'group';
|
|
76
76
|
return {
|
|
77
77
|
actionGroupProps: {
|
|
78
78
|
...(0, $aCPyD$reactariautils.filterDOMProps)(props, {
|
|
79
79
|
labelable: true
|
|
80
80
|
}),
|
|
81
81
|
role: role,
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
'aria-orientation': role === 'toolbar' ? orientation : undefined,
|
|
83
|
+
'aria-disabled': isDisabled,
|
|
84
84
|
onKeyDown: onKeyDown
|
|
85
85
|
}
|
|
86
86
|
};
|
package/dist/useActionGroup.mjs
CHANGED
|
@@ -18,12 +18,12 @@ import {useLocale as $6SCDv$useLocale} from "@react-aria/i18n";
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
const $304ac34015d4535d$var$BUTTON_GROUP_ROLES = {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
'none': 'toolbar',
|
|
22
|
+
'single': 'radiogroup',
|
|
23
|
+
'multiple': 'toolbar'
|
|
24
24
|
};
|
|
25
25
|
function $304ac34015d4535d$export$f4bf8d43c16de704(props, state, ref) {
|
|
26
|
-
let { isDisabled: isDisabled, orientation: orientation =
|
|
26
|
+
let { isDisabled: isDisabled, orientation: orientation = 'horizontal' } = props;
|
|
27
27
|
let [isInToolbar, setInToolbar] = (0, $6SCDv$useState)(false);
|
|
28
28
|
(0, $6SCDv$useLayoutEffect)(()=>{
|
|
29
29
|
var _ref_current_parentElement;
|
|
@@ -37,26 +37,26 @@ function $304ac34015d4535d$export$f4bf8d43c16de704(props, state, ref) {
|
|
|
37
37
|
if (!allKeys.some((key)=>!state.disabledKeys.has(key))) isDisabled = true;
|
|
38
38
|
let { direction: direction } = (0, $6SCDv$useLocale)();
|
|
39
39
|
let focusManager = (0, $6SCDv$createFocusManager)(ref);
|
|
40
|
-
let flipDirection = direction ===
|
|
40
|
+
let flipDirection = direction === 'rtl' && orientation === 'horizontal';
|
|
41
41
|
let onKeyDown = (e)=>{
|
|
42
42
|
if (!e.currentTarget.contains(e.target)) return;
|
|
43
43
|
switch(e.key){
|
|
44
|
-
case
|
|
45
|
-
case
|
|
44
|
+
case 'ArrowRight':
|
|
45
|
+
case 'ArrowDown':
|
|
46
46
|
e.preventDefault();
|
|
47
47
|
e.stopPropagation();
|
|
48
|
-
if (e.key ===
|
|
48
|
+
if (e.key === 'ArrowRight' && flipDirection) focusManager.focusPrevious({
|
|
49
49
|
wrap: true
|
|
50
50
|
});
|
|
51
51
|
else focusManager.focusNext({
|
|
52
52
|
wrap: true
|
|
53
53
|
});
|
|
54
54
|
break;
|
|
55
|
-
case
|
|
56
|
-
case
|
|
55
|
+
case 'ArrowLeft':
|
|
56
|
+
case 'ArrowUp':
|
|
57
57
|
e.preventDefault();
|
|
58
58
|
e.stopPropagation();
|
|
59
|
-
if (e.key ===
|
|
59
|
+
if (e.key === 'ArrowLeft' && flipDirection) focusManager.focusNext({
|
|
60
60
|
wrap: true
|
|
61
61
|
});
|
|
62
62
|
else focusManager.focusPrevious({
|
|
@@ -66,15 +66,15 @@ function $304ac34015d4535d$export$f4bf8d43c16de704(props, state, ref) {
|
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
68
|
let role = $304ac34015d4535d$var$BUTTON_GROUP_ROLES[state.selectionManager.selectionMode];
|
|
69
|
-
if (isInToolbar && role ===
|
|
69
|
+
if (isInToolbar && role === 'toolbar') role = 'group';
|
|
70
70
|
return {
|
|
71
71
|
actionGroupProps: {
|
|
72
72
|
...(0, $6SCDv$filterDOMProps)(props, {
|
|
73
73
|
labelable: true
|
|
74
74
|
}),
|
|
75
75
|
role: role,
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
'aria-orientation': role === 'toolbar' ? orientation : undefined,
|
|
77
|
+
'aria-disabled': isDisabled,
|
|
78
78
|
onKeyDown: onKeyDown
|
|
79
79
|
}
|
|
80
80
|
};
|
|
@@ -18,12 +18,12 @@ import {useLocale as $6SCDv$useLocale} from "@react-aria/i18n";
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
const $304ac34015d4535d$var$BUTTON_GROUP_ROLES = {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
'none': 'toolbar',
|
|
22
|
+
'single': 'radiogroup',
|
|
23
|
+
'multiple': 'toolbar'
|
|
24
24
|
};
|
|
25
25
|
function $304ac34015d4535d$export$f4bf8d43c16de704(props, state, ref) {
|
|
26
|
-
let { isDisabled: isDisabled, orientation: orientation =
|
|
26
|
+
let { isDisabled: isDisabled, orientation: orientation = 'horizontal' } = props;
|
|
27
27
|
let [isInToolbar, setInToolbar] = (0, $6SCDv$useState)(false);
|
|
28
28
|
(0, $6SCDv$useLayoutEffect)(()=>{
|
|
29
29
|
var _ref_current_parentElement;
|
|
@@ -37,26 +37,26 @@ function $304ac34015d4535d$export$f4bf8d43c16de704(props, state, ref) {
|
|
|
37
37
|
if (!allKeys.some((key)=>!state.disabledKeys.has(key))) isDisabled = true;
|
|
38
38
|
let { direction: direction } = (0, $6SCDv$useLocale)();
|
|
39
39
|
let focusManager = (0, $6SCDv$createFocusManager)(ref);
|
|
40
|
-
let flipDirection = direction ===
|
|
40
|
+
let flipDirection = direction === 'rtl' && orientation === 'horizontal';
|
|
41
41
|
let onKeyDown = (e)=>{
|
|
42
42
|
if (!e.currentTarget.contains(e.target)) return;
|
|
43
43
|
switch(e.key){
|
|
44
|
-
case
|
|
45
|
-
case
|
|
44
|
+
case 'ArrowRight':
|
|
45
|
+
case 'ArrowDown':
|
|
46
46
|
e.preventDefault();
|
|
47
47
|
e.stopPropagation();
|
|
48
|
-
if (e.key ===
|
|
48
|
+
if (e.key === 'ArrowRight' && flipDirection) focusManager.focusPrevious({
|
|
49
49
|
wrap: true
|
|
50
50
|
});
|
|
51
51
|
else focusManager.focusNext({
|
|
52
52
|
wrap: true
|
|
53
53
|
});
|
|
54
54
|
break;
|
|
55
|
-
case
|
|
56
|
-
case
|
|
55
|
+
case 'ArrowLeft':
|
|
56
|
+
case 'ArrowUp':
|
|
57
57
|
e.preventDefault();
|
|
58
58
|
e.stopPropagation();
|
|
59
|
-
if (e.key ===
|
|
59
|
+
if (e.key === 'ArrowLeft' && flipDirection) focusManager.focusNext({
|
|
60
60
|
wrap: true
|
|
61
61
|
});
|
|
62
62
|
else focusManager.focusPrevious({
|
|
@@ -66,15 +66,15 @@ function $304ac34015d4535d$export$f4bf8d43c16de704(props, state, ref) {
|
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
68
|
let role = $304ac34015d4535d$var$BUTTON_GROUP_ROLES[state.selectionManager.selectionMode];
|
|
69
|
-
if (isInToolbar && role ===
|
|
69
|
+
if (isInToolbar && role === 'toolbar') role = 'group';
|
|
70
70
|
return {
|
|
71
71
|
actionGroupProps: {
|
|
72
72
|
...(0, $6SCDv$filterDOMProps)(props, {
|
|
73
73
|
labelable: true
|
|
74
74
|
}),
|
|
75
75
|
role: role,
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
'aria-orientation': role === 'toolbar' ? orientation : undefined,
|
|
77
|
+
'aria-disabled': isDisabled,
|
|
78
78
|
onKeyDown: onKeyDown
|
|
79
79
|
}
|
|
80
80
|
};
|
|
@@ -20,18 +20,18 @@ $parcel$export(module.exports, "useActionGroupItem", () => $44b92e5de834b44e$exp
|
|
|
20
20
|
*/
|
|
21
21
|
|
|
22
22
|
const $44b92e5de834b44e$var$BUTTON_ROLES = {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
'none': undefined,
|
|
24
|
+
'single': 'radio',
|
|
25
|
+
'multiple': 'checkbox'
|
|
26
26
|
};
|
|
27
27
|
function $44b92e5de834b44e$export$9597202bd3099a29(props, state, ref) {
|
|
28
28
|
let selectionMode = state.selectionManager.selectionMode;
|
|
29
29
|
let buttonProps = {
|
|
30
30
|
role: $44b92e5de834b44e$var$BUTTON_ROLES[selectionMode]
|
|
31
31
|
};
|
|
32
|
-
if (selectionMode !==
|
|
32
|
+
if (selectionMode !== 'none') {
|
|
33
33
|
let isSelected = state.selectionManager.isSelected(props.key);
|
|
34
|
-
buttonProps[
|
|
34
|
+
buttonProps['aria-checked'] = isSelected;
|
|
35
35
|
}
|
|
36
36
|
let isFocused = props.key === state.selectionManager.focusedKey;
|
|
37
37
|
let onRemovedWithFocus = (0, $7WRxK$reactariautils.useEffectEvent)(()=>{
|
|
@@ -14,18 +14,18 @@ import {useEffect as $jllmK$useEffect} from "react";
|
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
const $f0ac0fb73c3ec062$var$BUTTON_ROLES = {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
'none': undefined,
|
|
18
|
+
'single': 'radio',
|
|
19
|
+
'multiple': 'checkbox'
|
|
20
20
|
};
|
|
21
21
|
function $f0ac0fb73c3ec062$export$9597202bd3099a29(props, state, ref) {
|
|
22
22
|
let selectionMode = state.selectionManager.selectionMode;
|
|
23
23
|
let buttonProps = {
|
|
24
24
|
role: $f0ac0fb73c3ec062$var$BUTTON_ROLES[selectionMode]
|
|
25
25
|
};
|
|
26
|
-
if (selectionMode !==
|
|
26
|
+
if (selectionMode !== 'none') {
|
|
27
27
|
let isSelected = state.selectionManager.isSelected(props.key);
|
|
28
|
-
buttonProps[
|
|
28
|
+
buttonProps['aria-checked'] = isSelected;
|
|
29
29
|
}
|
|
30
30
|
let isFocused = props.key === state.selectionManager.focusedKey;
|
|
31
31
|
let onRemovedWithFocus = (0, $jllmK$useEffectEvent)(()=>{
|
|
@@ -14,18 +14,18 @@ import {useEffect as $jllmK$useEffect} from "react";
|
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
const $f0ac0fb73c3ec062$var$BUTTON_ROLES = {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
'none': undefined,
|
|
18
|
+
'single': 'radio',
|
|
19
|
+
'multiple': 'checkbox'
|
|
20
20
|
};
|
|
21
21
|
function $f0ac0fb73c3ec062$export$9597202bd3099a29(props, state, ref) {
|
|
22
22
|
let selectionMode = state.selectionManager.selectionMode;
|
|
23
23
|
let buttonProps = {
|
|
24
24
|
role: $f0ac0fb73c3ec062$var$BUTTON_ROLES[selectionMode]
|
|
25
25
|
};
|
|
26
|
-
if (selectionMode !==
|
|
26
|
+
if (selectionMode !== 'none') {
|
|
27
27
|
let isSelected = state.selectionManager.isSelected(props.key);
|
|
28
|
-
buttonProps[
|
|
28
|
+
buttonProps['aria-checked'] = isSelected;
|
|
29
29
|
}
|
|
30
30
|
let isFocused = props.key === state.selectionManager.focusedKey;
|
|
31
31
|
let onRemovedWithFocus = (0, $jllmK$useEffectEvent)(()=>{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/actiongroup",
|
|
3
|
-
"version": "3.7.5
|
|
3
|
+
"version": "3.7.5",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/focus": "3.
|
|
26
|
-
"@react-aria/i18n": "3.
|
|
27
|
-
"@react-aria/interactions": "3.
|
|
28
|
-
"@react-aria/utils": "3.
|
|
29
|
-
"@react-stately/list": "3.10.5
|
|
30
|
-
"@react-types/actiongroup": "3.4.9
|
|
31
|
-
"@react-types/shared": "3.
|
|
25
|
+
"@react-aria/focus": "^3.17.1",
|
|
26
|
+
"@react-aria/i18n": "^3.11.1",
|
|
27
|
+
"@react-aria/interactions": "^3.21.3",
|
|
28
|
+
"@react-aria/utils": "^3.24.1",
|
|
29
|
+
"@react-stately/list": "^3.10.5",
|
|
30
|
+
"@react-types/actiongroup": "^3.4.9",
|
|
31
|
+
"@react-types/shared": "^3.23.1",
|
|
32
32
|
"@swc/helpers": "^0.5.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"publishConfig": {
|
|
39
39
|
"access": "public"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
|
|
42
42
|
}
|