@fluentui/react-aria 9.3.3 → 9.3.4
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/CHANGELOG.json +30 -1
- package/CHANGELOG.md +11 -2
- package/lib/button/useARIAButtonProps.js +8 -16
- package/lib/button/useARIAButtonProps.js.map +1 -1
- package/lib/button/useARIAButtonShorthand.js +0 -2
- package/lib/button/useARIAButtonShorthand.js.map +1 -1
- package/lib-commonjs/button/index.js +0 -4
- package/lib-commonjs/button/index.js.map +1 -1
- package/lib-commonjs/button/types.js.map +1 -1
- package/lib-commonjs/button/useARIAButtonProps.js +8 -20
- package/lib-commonjs/button/useARIAButtonProps.js.map +1 -1
- package/lib-commonjs/button/useARIAButtonShorthand.js +0 -6
- package/lib-commonjs/button/useARIAButtonShorthand.js.map +1 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,36 @@
|
|
|
2
2
|
"name": "@fluentui/react-aria",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 04 Jan 2023 01:36:11 GMT",
|
|
6
|
+
"tag": "@fluentui/react-aria_v9.3.4",
|
|
7
|
+
"version": "9.3.4",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-aria",
|
|
13
|
+
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
|
|
14
|
+
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "martinhochel@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-aria",
|
|
19
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
|
20
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"patch": [
|
|
24
|
+
{
|
|
25
|
+
"author": "beachball",
|
|
26
|
+
"package": "@fluentui/react-aria",
|
|
27
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.1",
|
|
28
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"date": "Tue, 20 Dec 2022 14:59:34 GMT",
|
|
6
35
|
"tag": "@fluentui/react-aria_v9.3.3",
|
|
7
36
|
"version": "9.3.3",
|
|
8
37
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-aria
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 04 Jan 2023 01:36:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.3.4)
|
|
8
|
+
|
|
9
|
+
Wed, 04 Jan 2023 01:36:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.3.3..@fluentui/react-aria_v9.3.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
15
|
+
|
|
7
16
|
## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.3.3)
|
|
8
17
|
|
|
9
|
-
Tue, 20 Dec 2022 14:
|
|
18
|
+
Tue, 20 Dec 2022 14:59:34 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.3.2..@fluentui/react-aria_v9.3.3)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
@@ -27,7 +27,6 @@ import { useEventCallback } from '@fluentui/react-utilities';
|
|
|
27
27
|
* )
|
|
28
28
|
* ```
|
|
29
29
|
*/
|
|
30
|
-
|
|
31
30
|
export function useARIAButtonProps(type, props) {
|
|
32
31
|
const {
|
|
33
32
|
disabled,
|
|
@@ -50,23 +49,20 @@ export function useARIAButtonProps(type, props) {
|
|
|
50
49
|
});
|
|
51
50
|
const handleKeyDown = useEventCallback(ev => {
|
|
52
51
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
|
|
53
|
-
|
|
54
52
|
if (ev.isDefaultPrevented()) {
|
|
55
53
|
return;
|
|
56
54
|
}
|
|
57
|
-
|
|
58
55
|
const key = ev.key;
|
|
59
|
-
|
|
60
56
|
if (isDisabled && (key === Enter || key === Space)) {
|
|
61
57
|
ev.preventDefault();
|
|
62
58
|
ev.stopPropagation();
|
|
63
59
|
return;
|
|
64
60
|
}
|
|
65
|
-
|
|
66
61
|
if (key === Space) {
|
|
67
62
|
ev.preventDefault();
|
|
68
63
|
return;
|
|
69
|
-
}
|
|
64
|
+
}
|
|
65
|
+
// If enter is pressed, activate the button
|
|
70
66
|
else if (key === Enter) {
|
|
71
67
|
ev.preventDefault();
|
|
72
68
|
ev.currentTarget.click();
|
|
@@ -74,27 +70,24 @@ export function useARIAButtonProps(type, props) {
|
|
|
74
70
|
});
|
|
75
71
|
const handleKeyUp = useEventCallback(ev => {
|
|
76
72
|
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(ev);
|
|
77
|
-
|
|
78
73
|
if (ev.isDefaultPrevented()) {
|
|
79
74
|
return;
|
|
80
75
|
}
|
|
81
|
-
|
|
82
76
|
const key = ev.key;
|
|
83
|
-
|
|
84
77
|
if (isDisabled && (key === Enter || key === Space)) {
|
|
85
78
|
ev.preventDefault();
|
|
86
79
|
ev.stopPropagation();
|
|
87
80
|
return;
|
|
88
81
|
}
|
|
89
|
-
|
|
90
82
|
if (key === Space) {
|
|
91
83
|
ev.preventDefault();
|
|
92
84
|
ev.currentTarget.click();
|
|
93
85
|
}
|
|
94
|
-
});
|
|
95
|
-
|
|
86
|
+
});
|
|
87
|
+
// If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly
|
|
96
88
|
if (type === 'button' || type === undefined) {
|
|
97
|
-
return {
|
|
89
|
+
return {
|
|
90
|
+
...rest,
|
|
98
91
|
disabled: disabled && !disabledFocusable,
|
|
99
92
|
'aria-disabled': disabledFocusable ? true : normalizedARIADisabled,
|
|
100
93
|
// onclick should still use internal handler to ensure prevention if disabled
|
|
@@ -103,7 +96,8 @@ export function useARIAButtonProps(type, props) {
|
|
|
103
96
|
onKeyUp: disabledFocusable ? undefined : onKeyUp,
|
|
104
97
|
onKeyDown: disabledFocusable ? undefined : onKeyDown
|
|
105
98
|
};
|
|
106
|
-
}
|
|
99
|
+
}
|
|
100
|
+
// If an <a> or <div> tag is to be rendered we have to remove disabled and type,
|
|
107
101
|
// and set aria-disabled, role and tabIndex.
|
|
108
102
|
else {
|
|
109
103
|
const resultProps = {
|
|
@@ -118,11 +112,9 @@ export function useARIAButtonProps(type, props) {
|
|
|
118
112
|
onKeyDown: handleKeyDown,
|
|
119
113
|
'aria-disabled': disabled || disabledFocusable || normalizedARIADisabled
|
|
120
114
|
};
|
|
121
|
-
|
|
122
115
|
if (type === 'a' && isDisabled) {
|
|
123
116
|
resultProps.href = undefined;
|
|
124
117
|
}
|
|
125
|
-
|
|
126
118
|
return resultProps;
|
|
127
119
|
}
|
|
128
120
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"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","names":["Enter","Space","useEventCallback","useARIAButtonProps","type","props","disabled","disabledFocusable","ariaDisabled","onClick","onKeyDown","onKeyUp","rest","normalizedARIADisabled","isDisabled","handleClick","ev","preventDefault","stopPropagation","handleKeyDown","isDefaultPrevented","key","currentTarget","click","handleKeyUp","undefined","resultProps","role","tabIndex","href"],"sourceRoot":"../src/","sources":["packages/react-components/react-aria/src/button/useARIAButtonProps.ts"],"sourcesContent":["import { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ARIAButtonElementIntersection, ARIAButtonProps, ARIAButtonResultProps, ARIAButtonType } from './types';\n\n/**\n * @internal\n *\n * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec\n * for multiple scenarios of non native button elements. Ensuring 1st rule of ARIA for cases\n * where no attribute addition is required.\n *\n * @param type - the proper scenario to be interpreted by the hook.\n * 1. `button` - Minimal interference from the hook, as semantic button already supports most of the states\n * 2. `a` or `div` - Proper keyboard/mouse handling plus other support to ensure ARIA behavior\n * @param props - the props to be passed down the line to the desired element.\n * This hook will encapsulate proper properties, such as `onClick`, `onKeyDown`, `onKeyUp`, etc,.\n *\n * @example\n * ```tsx\n * const buttonProps = useARIAButtonProps('a', {\n * href: './some-route'\n * onClick: () => console.log('this should run both on click and Space and Enter')\n * })\n *\n * // ...\n *\n * return (\n * <a {...buttonProps}>This anchor will behave as a proper button</a>\n * )\n * ```\n */\nexport function useARIAButtonProps<Type extends ARIAButtonType, Props extends ARIAButtonProps<Type>>(\n type?: Type,\n props?: Props,\n): ARIAButtonResultProps<Type, Props> {\n const { disabled, disabledFocusable = false, ['aria-disabled']: ariaDisabled, onClick, onKeyDown, onKeyUp, ...rest } =\n props ?? {};\n\n const normalizedARIADisabled = typeof ariaDisabled === 'string' ? ariaDisabled === 'true' : ariaDisabled;\n\n const isDisabled = disabled || disabledFocusable || normalizedARIADisabled;\n\n const handleClick = useEventCallback((ev: React.MouseEvent<ARIAButtonElementIntersection>) => {\n if (isDisabled) {\n ev.preventDefault();\n ev.stopPropagation();\n } else {\n onClick?.(ev);\n }\n });\n\n const handleKeyDown = useEventCallback((ev: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n onKeyDown?.(ev);\n\n if (ev.isDefaultPrevented()) {\n return;\n }\n\n const key = ev.key;\n\n if (isDisabled && (key === Enter || key === Space)) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n if (key === Space) {\n ev.preventDefault();\n return;\n }\n\n // If enter is pressed, activate the button\n else if (key === Enter) {\n ev.preventDefault();\n ev.currentTarget.click();\n }\n });\n\n const handleKeyUp = useEventCallback((ev: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n onKeyUp?.(ev);\n\n if (ev.isDefaultPrevented()) {\n return;\n }\n\n const key = ev.key;\n\n if (isDisabled && (key === Enter || key === Space)) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n if (key === Space) {\n ev.preventDefault();\n ev.currentTarget.click();\n }\n });\n\n // If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly\n if (type === 'button' || type === undefined) {\n return {\n ...rest,\n disabled: disabled && !disabledFocusable,\n 'aria-disabled': disabledFocusable ? true : normalizedARIADisabled,\n // onclick should still use internal handler to ensure prevention if disabled\n // if disabledFocusable then there's no requirement for handlers as those events should not be propagated\n onClick: disabledFocusable ? undefined : handleClick,\n onKeyUp: disabledFocusable ? undefined : onKeyUp,\n onKeyDown: disabledFocusable ? undefined : onKeyDown,\n } as ARIAButtonResultProps<Type, Props>;\n }\n\n // If an <a> or <div> tag is to be rendered we have to remove disabled and type,\n // and set aria-disabled, role and tabIndex.\n else {\n const resultProps = {\n role: 'button',\n tabIndex: disabled && !disabledFocusable ? undefined : 0,\n ...rest,\n // If it's not a <button> than listeners are required even with disabledFocusable\n // Since you cannot assure the default behavior of the element\n // E.g: <a> will redirect on click\n onClick: handleClick,\n onKeyUp: handleKeyUp,\n onKeyDown: handleKeyDown,\n 'aria-disabled': disabled || disabledFocusable || normalizedARIADisabled,\n } as ARIAButtonResultProps<Type, Props>;\n\n if (type === 'a' && isDisabled) {\n (resultProps as ARIAButtonResultProps<'a', Props>).href = undefined;\n }\n\n return resultProps;\n }\n}\n"]}
|
|
@@ -9,10 +9,8 @@ import { useARIAButtonProps } from './useARIAButtonProps';
|
|
|
9
9
|
* for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
|
|
10
10
|
* where no attribute addition is required.
|
|
11
11
|
*/
|
|
12
|
-
|
|
13
12
|
export const useARIAButtonShorthand = (slot, options) => {
|
|
14
13
|
var _a;
|
|
15
|
-
|
|
16
14
|
const shorthand = resolveShorthand(slot, options);
|
|
17
15
|
const shorthandARIAButton = useARIAButtonProps((_a = shorthand === null || shorthand === void 0 ? void 0 : shorthand.as) !== null && _a !== void 0 ? _a : 'button', shorthand);
|
|
18
16
|
return shorthand && shorthandARIAButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,kBAAkB,QAAQ,sBAAsB;AAIzD;;;;;;;;;AASA,OAAO,MAAMC,sBAAsB,GAAkD,CAACC,IAAI,EAAEC,OAAO,KAAI;;EACrG,MAAMC,SAAS,GAAGL,gBAAgB,CAACG,IAAI,EAAEC,OAAO,CAAC;EACjD,MAAME,mBAAmB,GAAGL,kBAAkB,CAAkC,eAAS,aAATI,SAAS,uBAATA,SAAS,CAAEE,EAAE,mCAAI,QAAQ,EAAEF,SAAS,CAAC;EACrH,OAAOA,SAAS,IAAIC,mBAAmB;AACzC,CAAC","names":["resolveShorthand","useARIAButtonProps","useARIAButtonShorthand","slot","options","shorthand","shorthandARIAButton","as"],"sourceRoot":"../src/","sources":["packages/react-components/react-aria/src/button/useARIAButtonShorthand.ts"],"sourcesContent":["import { resolveShorthand } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from './useARIAButtonProps';\nimport type { ResolveShorthandFunction } from '@fluentui/react-utilities';\nimport type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './types';\n\n/**\n * @internal\n *\n * This function expects to receive a slot, if `as` property is not desired use `useARIAButtonProps` instead\n *\n * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec\n * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases\n * where no attribute addition is required.\n */\nexport const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps> = (slot, options) => {\n const shorthand = resolveShorthand(slot, options);\n const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);\n return shorthand && shorthandARIAButton;\n};\n"]}
|
|
@@ -3,12 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
7
|
tslib_1.__exportStar(require("./useARIAButtonProps"), exports);
|
|
10
|
-
|
|
11
8
|
tslib_1.__exportStar(require("./useARIAButtonShorthand"), exports);
|
|
12
|
-
|
|
13
9
|
tslib_1.__exportStar(require("./types"), exports);
|
|
14
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-aria/src/button/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-aria/src/button/index.ts"],"sourcesContent":["export * from './useARIAButtonProps';\nexport * from './useARIAButtonShorthand';\nexport * from './types';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useARIAButtonProps = void 0;
|
|
7
|
-
|
|
8
7
|
const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
|
|
9
|
-
|
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
9
|
/**
|
|
12
10
|
* @internal
|
|
@@ -35,8 +33,6 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
35
33
|
* )
|
|
36
34
|
* ```
|
|
37
35
|
*/
|
|
38
|
-
|
|
39
|
-
|
|
40
36
|
function useARIAButtonProps(type, props) {
|
|
41
37
|
const {
|
|
42
38
|
disabled,
|
|
@@ -59,23 +55,20 @@ function useARIAButtonProps(type, props) {
|
|
|
59
55
|
});
|
|
60
56
|
const handleKeyDown = react_utilities_1.useEventCallback(ev => {
|
|
61
57
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
|
|
62
|
-
|
|
63
58
|
if (ev.isDefaultPrevented()) {
|
|
64
59
|
return;
|
|
65
60
|
}
|
|
66
|
-
|
|
67
61
|
const key = ev.key;
|
|
68
|
-
|
|
69
62
|
if (isDisabled && (key === keyboard_keys_1.Enter || key === keyboard_keys_1.Space)) {
|
|
70
63
|
ev.preventDefault();
|
|
71
64
|
ev.stopPropagation();
|
|
72
65
|
return;
|
|
73
66
|
}
|
|
74
|
-
|
|
75
67
|
if (key === keyboard_keys_1.Space) {
|
|
76
68
|
ev.preventDefault();
|
|
77
69
|
return;
|
|
78
|
-
}
|
|
70
|
+
}
|
|
71
|
+
// If enter is pressed, activate the button
|
|
79
72
|
else if (key === keyboard_keys_1.Enter) {
|
|
80
73
|
ev.preventDefault();
|
|
81
74
|
ev.currentTarget.click();
|
|
@@ -83,27 +76,24 @@ function useARIAButtonProps(type, props) {
|
|
|
83
76
|
});
|
|
84
77
|
const handleKeyUp = react_utilities_1.useEventCallback(ev => {
|
|
85
78
|
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(ev);
|
|
86
|
-
|
|
87
79
|
if (ev.isDefaultPrevented()) {
|
|
88
80
|
return;
|
|
89
81
|
}
|
|
90
|
-
|
|
91
82
|
const key = ev.key;
|
|
92
|
-
|
|
93
83
|
if (isDisabled && (key === keyboard_keys_1.Enter || key === keyboard_keys_1.Space)) {
|
|
94
84
|
ev.preventDefault();
|
|
95
85
|
ev.stopPropagation();
|
|
96
86
|
return;
|
|
97
87
|
}
|
|
98
|
-
|
|
99
88
|
if (key === keyboard_keys_1.Space) {
|
|
100
89
|
ev.preventDefault();
|
|
101
90
|
ev.currentTarget.click();
|
|
102
91
|
}
|
|
103
|
-
});
|
|
104
|
-
|
|
92
|
+
});
|
|
93
|
+
// If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly
|
|
105
94
|
if (type === 'button' || type === undefined) {
|
|
106
|
-
return {
|
|
95
|
+
return {
|
|
96
|
+
...rest,
|
|
107
97
|
disabled: disabled && !disabledFocusable,
|
|
108
98
|
'aria-disabled': disabledFocusable ? true : normalizedARIADisabled,
|
|
109
99
|
// onclick should still use internal handler to ensure prevention if disabled
|
|
@@ -112,7 +102,8 @@ function useARIAButtonProps(type, props) {
|
|
|
112
102
|
onKeyUp: disabledFocusable ? undefined : onKeyUp,
|
|
113
103
|
onKeyDown: disabledFocusable ? undefined : onKeyDown
|
|
114
104
|
};
|
|
115
|
-
}
|
|
105
|
+
}
|
|
106
|
+
// If an <a> or <div> tag is to be rendered we have to remove disabled and type,
|
|
116
107
|
// and set aria-disabled, role and tabIndex.
|
|
117
108
|
else {
|
|
118
109
|
const resultProps = {
|
|
@@ -127,14 +118,11 @@ function useARIAButtonProps(type, props) {
|
|
|
127
118
|
onKeyDown: handleKeyDown,
|
|
128
119
|
'aria-disabled': disabled || disabledFocusable || normalizedARIADisabled
|
|
129
120
|
};
|
|
130
|
-
|
|
131
121
|
if (type === 'a' && isDisabled) {
|
|
132
122
|
resultProps.href = undefined;
|
|
133
123
|
}
|
|
134
|
-
|
|
135
124
|
return resultProps;
|
|
136
125
|
}
|
|
137
126
|
}
|
|
138
|
-
|
|
139
127
|
exports.useARIAButtonProps = useARIAButtonProps;
|
|
140
128
|
//# sourceMappingURL=useARIAButtonProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"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","names":["useARIAButtonProps","type","props","disabled","disabledFocusable","ariaDisabled","onClick","onKeyDown","onKeyUp","rest","normalizedARIADisabled","isDisabled","handleClick","react_utilities_1","ev","preventDefault","stopPropagation","handleKeyDown","isDefaultPrevented","key","keyboard_keys_1","currentTarget","click","handleKeyUp","undefined","resultProps","role","tabIndex","href","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-aria/src/button/useARIAButtonProps.ts"],"sourcesContent":["import { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ARIAButtonElementIntersection, ARIAButtonProps, ARIAButtonResultProps, ARIAButtonType } from './types';\n\n/**\n * @internal\n *\n * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec\n * for multiple scenarios of non native button elements. Ensuring 1st rule of ARIA for cases\n * where no attribute addition is required.\n *\n * @param type - the proper scenario to be interpreted by the hook.\n * 1. `button` - Minimal interference from the hook, as semantic button already supports most of the states\n * 2. `a` or `div` - Proper keyboard/mouse handling plus other support to ensure ARIA behavior\n * @param props - the props to be passed down the line to the desired element.\n * This hook will encapsulate proper properties, such as `onClick`, `onKeyDown`, `onKeyUp`, etc,.\n *\n * @example\n * ```tsx\n * const buttonProps = useARIAButtonProps('a', {\n * href: './some-route'\n * onClick: () => console.log('this should run both on click and Space and Enter')\n * })\n *\n * // ...\n *\n * return (\n * <a {...buttonProps}>This anchor will behave as a proper button</a>\n * )\n * ```\n */\nexport function useARIAButtonProps<Type extends ARIAButtonType, Props extends ARIAButtonProps<Type>>(\n type?: Type,\n props?: Props,\n): ARIAButtonResultProps<Type, Props> {\n const { disabled, disabledFocusable = false, ['aria-disabled']: ariaDisabled, onClick, onKeyDown, onKeyUp, ...rest } =\n props ?? {};\n\n const normalizedARIADisabled = typeof ariaDisabled === 'string' ? ariaDisabled === 'true' : ariaDisabled;\n\n const isDisabled = disabled || disabledFocusable || normalizedARIADisabled;\n\n const handleClick = useEventCallback((ev: React.MouseEvent<ARIAButtonElementIntersection>) => {\n if (isDisabled) {\n ev.preventDefault();\n ev.stopPropagation();\n } else {\n onClick?.(ev);\n }\n });\n\n const handleKeyDown = useEventCallback((ev: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n onKeyDown?.(ev);\n\n if (ev.isDefaultPrevented()) {\n return;\n }\n\n const key = ev.key;\n\n if (isDisabled && (key === Enter || key === Space)) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n if (key === Space) {\n ev.preventDefault();\n return;\n }\n\n // If enter is pressed, activate the button\n else if (key === Enter) {\n ev.preventDefault();\n ev.currentTarget.click();\n }\n });\n\n const handleKeyUp = useEventCallback((ev: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n onKeyUp?.(ev);\n\n if (ev.isDefaultPrevented()) {\n return;\n }\n\n const key = ev.key;\n\n if (isDisabled && (key === Enter || key === Space)) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n if (key === Space) {\n ev.preventDefault();\n ev.currentTarget.click();\n }\n });\n\n // If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly\n if (type === 'button' || type === undefined) {\n return {\n ...rest,\n disabled: disabled && !disabledFocusable,\n 'aria-disabled': disabledFocusable ? true : normalizedARIADisabled,\n // onclick should still use internal handler to ensure prevention if disabled\n // if disabledFocusable then there's no requirement for handlers as those events should not be propagated\n onClick: disabledFocusable ? undefined : handleClick,\n onKeyUp: disabledFocusable ? undefined : onKeyUp,\n onKeyDown: disabledFocusable ? undefined : onKeyDown,\n } as ARIAButtonResultProps<Type, Props>;\n }\n\n // If an <a> or <div> tag is to be rendered we have to remove disabled and type,\n // and set aria-disabled, role and tabIndex.\n else {\n const resultProps = {\n role: 'button',\n tabIndex: disabled && !disabledFocusable ? undefined : 0,\n ...rest,\n // If it's not a <button> than listeners are required even with disabledFocusable\n // Since you cannot assure the default behavior of the element\n // E.g: <a> will redirect on click\n onClick: handleClick,\n onKeyUp: handleKeyUp,\n onKeyDown: handleKeyDown,\n 'aria-disabled': disabled || disabledFocusable || normalizedARIADisabled,\n } as ARIAButtonResultProps<Type, Props>;\n\n if (type === 'a' && isDisabled) {\n (resultProps as ARIAButtonResultProps<'a', Props>).href = undefined;\n }\n\n return resultProps;\n }\n}\n"]}
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useARIAButtonShorthand = void 0;
|
|
7
|
-
|
|
8
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
-
|
|
10
8
|
const useARIAButtonProps_1 = /*#__PURE__*/require("./useARIAButtonProps");
|
|
11
9
|
/**
|
|
12
10
|
* @internal
|
|
@@ -17,15 +15,11 @@ const useARIAButtonProps_1 = /*#__PURE__*/require("./useARIAButtonProps");
|
|
|
17
15
|
* for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
|
|
18
16
|
* where no attribute addition is required.
|
|
19
17
|
*/
|
|
20
|
-
|
|
21
|
-
|
|
22
18
|
const useARIAButtonShorthand = (slot, options) => {
|
|
23
19
|
var _a;
|
|
24
|
-
|
|
25
20
|
const shorthand = react_utilities_1.resolveShorthand(slot, options);
|
|
26
21
|
const shorthandARIAButton = useARIAButtonProps_1.useARIAButtonProps((_a = shorthand === null || shorthand === void 0 ? void 0 : shorthand.as) !== null && _a !== void 0 ? _a : 'button', shorthand);
|
|
27
22
|
return shorthand && shorthandARIAButton;
|
|
28
23
|
};
|
|
29
|
-
|
|
30
24
|
exports.useARIAButtonShorthand = useARIAButtonShorthand;
|
|
31
25
|
//# sourceMappingURL=useARIAButtonShorthand.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAIA;;;;;;;;;AASO,MAAMA,sBAAsB,GAAkD,CAACC,IAAI,EAAEC,OAAO,KAAI;;EACrG,MAAMC,SAAS,GAAGC,kCAAgB,CAACH,IAAI,EAAEC,OAAO,CAAC;EACjD,MAAMG,mBAAmB,GAAGC,uCAAkB,CAAkC,eAAS,aAATH,SAAS,uBAATA,SAAS,CAAEI,EAAE,mCAAI,QAAQ,EAAEJ,SAAS,CAAC;EACrH,OAAOA,SAAS,IAAIE,mBAAmB;AACzC,CAAC;AAJYG,8BAAsB","names":["useARIAButtonShorthand","slot","options","shorthand","react_utilities_1","shorthandARIAButton","useARIAButtonProps_1","as","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-aria/src/button/useARIAButtonShorthand.ts"],"sourcesContent":["import { resolveShorthand } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from './useARIAButtonProps';\nimport type { ResolveShorthandFunction } from '@fluentui/react-utilities';\nimport type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './types';\n\n/**\n * @internal\n *\n * This function expects to receive a slot, if `as` property is not desired use `useARIAButtonProps` instead\n *\n * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec\n * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases\n * where no attribute addition is required.\n */\nexport const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps> = (slot, options) => {\n const shorthand = resolveShorthand(slot, options);\n const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);\n return shorthand && shorthandARIAButton;\n};\n"]}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useARIAButtonProps = exports.useARIAButtonShorthand = void 0;
|
|
7
|
-
|
|
8
7
|
var index_1 = /*#__PURE__*/require("./button/index");
|
|
9
|
-
|
|
10
8
|
Object.defineProperty(exports, "useARIAButtonShorthand", {
|
|
11
9
|
enumerable: true,
|
|
12
10
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,qCAAsB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,iCAAkB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-aria/src/index.ts"],"sourcesContent":["export { useARIAButtonShorthand, useARIAButtonProps } from './button/index';\nexport type {\n ARIAButtonSlotProps,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonType,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonAlteredProps,\n} from './button/index';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-aria",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.4",
|
|
4
4
|
"description": "React helper to ensure ARIA",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@fluentui/eslint-plugin": "*",
|
|
28
28
|
"@fluentui/react-conformance": "*",
|
|
29
|
-
"@fluentui/scripts": "
|
|
29
|
+
"@fluentui/scripts": "*"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@fluentui/keyboard-keys": "^9.0.1",
|
|
33
|
-
"@fluentui/react-utilities": "^9.3.
|
|
33
|
+
"@fluentui/react-utilities": "^9.3.1",
|
|
34
34
|
"tslib": "^2.1.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|