@fluentui/react-aria 9.3.14 → 9.3.16
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/.swcrc +30 -0
- package/CHANGELOG.json +49 -1
- package/CHANGELOG.md +23 -2
- package/lib/button/index.js.map +1 -1
- package/lib/button/types.js +1 -1
- package/lib/button/types.js.map +1 -1
- package/lib/button/useARIAButtonProps.js +3 -7
- package/lib/button/useARIAButtonProps.js.map +1 -1
- package/lib/button/useARIAButtonShorthand.js +2 -2
- package/lib/button/useARIAButtonShorthand.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/button/index.js +7 -6
- package/lib-commonjs/button/index.js.map +1 -1
- package/lib-commonjs/button/types.js +5 -2
- package/lib-commonjs/button/types.js.map +1 -1
- package/lib-commonjs/button/useARIAButtonProps.js +85 -121
- package/lib-commonjs/button/useARIAButtonProps.js.map +1 -1
- package/lib-commonjs/button/useARIAButtonShorthand.js +14 -21
- package/lib-commonjs/button/useARIAButtonShorthand.js.map +1 -1
- package/lib-commonjs/index.js +13 -15
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -5
- package/lib-amd/button/index.js +0 -8
- package/lib-amd/button/index.js.map +0 -1
- package/lib-amd/button/types.js +0 -5
- package/lib-amd/button/types.js.map +0 -1
- package/lib-amd/button/useARIAButtonProps.js +0 -105
- package/lib-amd/button/useARIAButtonProps.js.map +0 -1
- package/lib-amd/button/useARIAButtonShorthand.js +0 -22
- package/lib-amd/button/useARIAButtonShorthand.js.map +0 -1
- package/lib-amd/index.js +0 -8
- package/lib-amd/index.js.map +0 -1
package/.swcrc
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
+
"exclude": [
|
|
4
|
+
"/testing",
|
|
5
|
+
"/**/*.cy.ts",
|
|
6
|
+
"/**/*.cy.tsx",
|
|
7
|
+
"/**/*.spec.ts",
|
|
8
|
+
"/**/*.spec.tsx",
|
|
9
|
+
"/**/*.test.ts",
|
|
10
|
+
"/**/*.test.tsx"
|
|
11
|
+
],
|
|
12
|
+
"jsc": {
|
|
13
|
+
"parser": {
|
|
14
|
+
"syntax": "typescript",
|
|
15
|
+
"tsx": true,
|
|
16
|
+
"decorators": false,
|
|
17
|
+
"dynamicImport": false
|
|
18
|
+
},
|
|
19
|
+
"externalHelpers": true,
|
|
20
|
+
"transform": {
|
|
21
|
+
"react": {
|
|
22
|
+
"runtime": "classic",
|
|
23
|
+
"useSpread": true
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"target": "es2019"
|
|
27
|
+
},
|
|
28
|
+
"minify": false,
|
|
29
|
+
"sourceMaps": true
|
|
30
|
+
}
|
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,55 @@
|
|
|
2
2
|
"name": "@fluentui/react-aria",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 04 Apr 2023 18:42:19 GMT",
|
|
6
|
+
"tag": "@fluentui/react-aria_v9.3.16",
|
|
7
|
+
"version": "9.3.16",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-aria",
|
|
13
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.3",
|
|
14
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Tue, 21 Mar 2023 21:23:22 GMT",
|
|
21
|
+
"tag": "@fluentui/react-aria_v9.3.15",
|
|
22
|
+
"version": "9.3.15",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "tristan.watanabe@gmail.com",
|
|
27
|
+
"package": "@fluentui/react-aria",
|
|
28
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
|
29
|
+
"comment": "chore: migrate to swc transpilation approach."
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "tristan.watanabe@gmail.com",
|
|
33
|
+
"package": "@fluentui/react-aria",
|
|
34
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
|
35
|
+
"comment": "fix: add node field to package.json exports map."
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-aria",
|
|
40
|
+
"comment": "Bump @fluentui/keyboard-keys to v9.0.2",
|
|
41
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-aria",
|
|
46
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
|
47
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"date": "Thu, 16 Mar 2023 14:36:59 GMT",
|
|
6
54
|
"tag": "@fluentui/react-aria_v9.3.14",
|
|
7
55
|
"version": "9.3.14",
|
|
8
56
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-aria
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 04 Apr 2023 18:42:19 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.3.16)
|
|
8
|
+
|
|
9
|
+
Tue, 04 Apr 2023 18:42:19 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.3.15..@fluentui/react-aria_v9.3.16)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-utilities to v9.7.3 ([PR #27430](https://github.com/microsoft/fluentui/pull/27430) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.3.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.3.15)
|
|
17
|
+
|
|
18
|
+
Tue, 21 Mar 2023 21:23:22 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.3.14..@fluentui/react-aria_v9.3.15)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
|
24
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
|
25
|
+
- Bump @fluentui/keyboard-keys to v9.0.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
27
|
+
|
|
7
28
|
## [9.3.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.3.14)
|
|
8
29
|
|
|
9
|
-
Thu, 16 Mar 2023 14:
|
|
30
|
+
Thu, 16 Mar 2023 14:36:59 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.3.13..@fluentui/react-aria_v9.3.14)
|
|
11
32
|
|
|
12
33
|
### Patches
|
package/lib/button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../src/button/index.ts"],"sourcesContent":["export * from './useARIAButtonProps';\nexport * from './useARIAButtonShorthand';\nexport * from './types';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc"}
|
package/lib/button/types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
package/lib/button/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React"],"sources":["../../src/button/types.ts"],"sourcesContent":["import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\ntype UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;\n\nexport type ARIAButtonType = 'button' | 'a' | 'div';\n\nexport type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> =\n | HTMLButtonElement\n | (AlternateAs extends 'a' ? HTMLAnchorElement : never)\n | (AlternateAs extends 'div' ? HTMLDivElement : never);\n\n/**\n * @internal\n */\nexport type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = UnionToIntersection<\n ARIAButtonElement<AlternateAs>\n>;\n\n/**\n * Props expected by `useARIAButtonProps` hooks\n */\nexport type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React.PropsWithRef<\n JSX.IntrinsicElements[Type]\n> & {\n disabled?: boolean;\n /**\n * When set, allows the button to be focusable even when it has been disabled.\n * This is used in scenarios where it is important to keep a consistent tab order\n * for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n *\n * @default false\n */\n disabledFocusable?: boolean;\n};\n\nexport type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = ExtractSlotProps<\n Slot<'button', AlternateAs>\n> &\n Pick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;\n\n/**\n * Props that will be modified internally by `useARIAButtonProps` by each case.\n * This typing is to ensure a well specified return value for `useARIAbButtonProps`\n */\nexport type ARIAButtonAlteredProps<Type extends ARIAButtonType> =\n | (Type extends 'button'\n ? Pick<\n JSX.IntrinsicElements['button'],\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'disabled' | 'aria-disabled' | 'tabIndex'\n >\n : never)\n | (Type extends 'a'\n ? Pick<\n JSX.IntrinsicElements['a'],\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role' | 'href'\n >\n : never)\n | (Type extends 'div'\n ? Pick<JSX.IntrinsicElements['div'], 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role'>\n : never);\n\n/**\n * Merge of props provided by the user and props provided internally.\n */\nexport type ARIAButtonResultProps<Type extends ARIAButtonType, Props> = Props &\n UnionToIntersection<ARIAButtonAlteredProps<Type>>;\n"],"mappings":"AACA,YAAYA,KAAA,MAAW"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Enter, Space } from '@fluentui/keyboard-keys';
|
|
2
2
|
import { useEventCallback } from '@fluentui/react-utilities';
|
|
3
|
+
import * as React from 'react';
|
|
3
4
|
/**
|
|
4
5
|
* @internal
|
|
5
6
|
*
|
|
@@ -61,9 +62,7 @@ export function useARIAButtonProps(type, props) {
|
|
|
61
62
|
if (key === Space) {
|
|
62
63
|
ev.preventDefault();
|
|
63
64
|
return;
|
|
64
|
-
}
|
|
65
|
-
// If enter is pressed, activate the button
|
|
66
|
-
else if (key === Enter) {
|
|
65
|
+
} else if (key === Enter) {
|
|
67
66
|
ev.preventDefault();
|
|
68
67
|
ev.currentTarget.click();
|
|
69
68
|
}
|
|
@@ -96,10 +95,7 @@ export function useARIAButtonProps(type, props) {
|
|
|
96
95
|
onKeyUp: disabledFocusable ? undefined : onKeyUp,
|
|
97
96
|
onKeyDown: disabledFocusable ? undefined : onKeyDown
|
|
98
97
|
};
|
|
99
|
-
}
|
|
100
|
-
// If an <a> or <div> tag is to be rendered we have to remove disabled and type,
|
|
101
|
-
// and set aria-disabled, role and tabIndex.
|
|
102
|
-
else {
|
|
98
|
+
} else {
|
|
103
99
|
const resultProps = {
|
|
104
100
|
role: 'button',
|
|
105
101
|
tabIndex: disabled && !disabledFocusable ? undefined : 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"sources":["
|
|
1
|
+
{"version":3,"names":["Enter","Space","useEventCallback","React","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"],"sources":["../../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 {\n disabled,\n disabledFocusable = false,\n ['aria-disabled']: ariaDisabled,\n onClick,\n onKeyDown,\n onKeyUp,\n ...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"],"mappings":"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"}
|
|
@@ -10,9 +10,9 @@ import { useARIAButtonProps } from './useARIAButtonProps';
|
|
|
10
10
|
* where no attribute addition is required.
|
|
11
11
|
*/
|
|
12
12
|
export const useARIAButtonShorthand = (slot, options) => {
|
|
13
|
-
var _a;
|
|
14
13
|
const shorthand = resolveShorthand(slot, options);
|
|
15
|
-
|
|
14
|
+
var _shorthand_as;
|
|
15
|
+
const shorthandARIAButton = useARIAButtonProps((_shorthand_as = shorthand === null || shorthand === void 0 ? void 0 : shorthand.as) !== null && _shorthand_as !== void 0 ? _shorthand_as : 'button', shorthand);
|
|
16
16
|
return shorthand && shorthandARIAButton;
|
|
17
17
|
};
|
|
18
18
|
//# sourceMappingURL=useARIAButtonShorthand.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["resolveShorthand","useARIAButtonProps","useARIAButtonShorthand","slot","options","shorthand","
|
|
1
|
+
{"version":3,"names":["resolveShorthand","useARIAButtonProps","useARIAButtonShorthand","slot","options","shorthand","_shorthand_as","shorthandARIAButton","as"],"sources":["../../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"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAInC;;;;;;;;;AASA,OAAO,MAAMC,sBAAA,GAAwEA,CAACC,IAAA,EAAMC,OAAA,KAAY;EACtG,MAAMC,SAAA,GAAYL,gBAAA,CAAiBG,IAAA,EAAMC,OAAA;MACuCE,aAAA;EAAhF,MAAMC,mBAAA,GAAsBN,kBAAA,CAAoD,CAAAK,aAAA,GAAAD,SAAA,aAAAA,SAAA,uBAAAA,SAAA,CAAWG,EAAE,cAAbF,aAAA,cAAAA,aAAA,GAAiB,QAAQ,EAAED,SAAA;EAC3G,OAAOA,SAAA,IAAaE,mBAAA;AACtB"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useARIAButtonShorthand","useARIAButtonProps"],"sources":["../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"],"mappings":"AAAA,SAASA,sBAAsB,EAAEC,kBAAkB,QAAQ"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./useARIAButtonProps"), exports);
|
|
7
|
+
_exportStar(require("./useARIAButtonShorthand"), exports);
|
|
8
|
+
_exportStar(require("./types"), exports);
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
10
|
+
|
|
10
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../lib/button/index.js"],"sourcesContent":["export * from './useARIAButtonProps';\nexport * from './useARIAButtonShorthand';\nexport * from './types';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;CACd,iCAAiC"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
5
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
6
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
7
|
+
//# sourceMappingURL=types.js.map
|
|
8
|
+
|
|
6
9
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../lib/button/types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,iCAAiC"}
|
|
@@ -1,128 +1,92 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useARIAButtonProps", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>useARIAButtonProps
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
* @internal
|
|
11
|
-
*
|
|
12
|
-
* Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
|
|
13
|
-
* for multiple scenarios of non native button elements. Ensuring 1st rule of ARIA for cases
|
|
14
|
-
* where no attribute addition is required.
|
|
15
|
-
*
|
|
16
|
-
* @param type - the proper scenario to be interpreted by the hook.
|
|
17
|
-
* 1. `button` - Minimal interference from the hook, as semantic button already supports most of the states
|
|
18
|
-
* 2. `a` or `div` - Proper keyboard/mouse handling plus other support to ensure ARIA behavior
|
|
19
|
-
* @param props - the props to be passed down the line to the desired element.
|
|
20
|
-
* This hook will encapsulate proper properties, such as `onClick`, `onKeyDown`, `onKeyUp`, etc,.
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```tsx
|
|
24
|
-
* const buttonProps = useARIAButtonProps('a', {
|
|
25
|
-
* href: './some-route'
|
|
26
|
-
* onClick: () => console.log('this should run both on click and Space and Enter')
|
|
27
|
-
* })
|
|
28
|
-
*
|
|
29
|
-
* // ...
|
|
30
|
-
*
|
|
31
|
-
* return (
|
|
32
|
-
* <a {...buttonProps}>This anchor will behave as a proper button</a>
|
|
33
|
-
* )
|
|
34
|
-
* ```
|
|
35
|
-
*/
|
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
|
+
const _keyboardKeys = require("@fluentui/keyboard-keys");
|
|
11
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
|
12
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
36
13
|
function useARIAButtonProps(type, props) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
14
|
+
const { disabled , disabledFocusable =false , ['aria-disabled']: ariaDisabled , onClick , onKeyDown , onKeyUp , ...rest } = props !== null && props !== void 0 ? props : {};
|
|
15
|
+
const normalizedARIADisabled = typeof ariaDisabled === 'string' ? ariaDisabled === 'true' : ariaDisabled;
|
|
16
|
+
const isDisabled = disabled || disabledFocusable || normalizedARIADisabled;
|
|
17
|
+
const handleClick = (0, _reactUtilities.useEventCallback)((ev)=>{
|
|
18
|
+
if (isDisabled) {
|
|
19
|
+
ev.preventDefault();
|
|
20
|
+
ev.stopPropagation();
|
|
21
|
+
} else {
|
|
22
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(ev);
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
const handleKeyDown = (0, _reactUtilities.useEventCallback)((ev)=>{
|
|
26
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
|
|
27
|
+
if (ev.isDefaultPrevented()) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
const key = ev.key;
|
|
31
|
+
if (isDisabled && (key === _keyboardKeys.Enter || key === _keyboardKeys.Space)) {
|
|
32
|
+
ev.preventDefault();
|
|
33
|
+
ev.stopPropagation();
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
if (key === _keyboardKeys.Space) {
|
|
37
|
+
ev.preventDefault();
|
|
38
|
+
return;
|
|
39
|
+
} else if (key === _keyboardKeys.Enter) {
|
|
40
|
+
ev.preventDefault();
|
|
41
|
+
ev.currentTarget.click();
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
const handleKeyUp = (0, _reactUtilities.useEventCallback)((ev)=>{
|
|
45
|
+
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(ev);
|
|
46
|
+
if (ev.isDefaultPrevented()) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const key = ev.key;
|
|
50
|
+
if (isDisabled && (key === _keyboardKeys.Enter || key === _keyboardKeys.Space)) {
|
|
51
|
+
ev.preventDefault();
|
|
52
|
+
ev.stopPropagation();
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (key === _keyboardKeys.Space) {
|
|
56
|
+
ev.preventDefault();
|
|
57
|
+
ev.currentTarget.click();
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
// If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly
|
|
61
|
+
if (type === 'button' || type === undefined) {
|
|
62
|
+
return {
|
|
63
|
+
...rest,
|
|
64
|
+
disabled: disabled && !disabledFocusable,
|
|
65
|
+
'aria-disabled': disabledFocusable ? true : normalizedARIADisabled,
|
|
66
|
+
// onclick should still use internal handler to ensure prevention if disabled
|
|
67
|
+
// if disabledFocusable then there's no requirement for handlers as those events should not be propagated
|
|
68
|
+
onClick: disabledFocusable ? undefined : handleClick,
|
|
69
|
+
onKeyUp: disabledFocusable ? undefined : onKeyUp,
|
|
70
|
+
onKeyDown: disabledFocusable ? undefined : onKeyDown
|
|
71
|
+
};
|
|
52
72
|
} else {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
// If enter is pressed, activate the button
|
|
72
|
-
else if (key === keyboard_keys_1.Enter) {
|
|
73
|
-
ev.preventDefault();
|
|
74
|
-
ev.currentTarget.click();
|
|
73
|
+
const resultProps = {
|
|
74
|
+
role: 'button',
|
|
75
|
+
tabIndex: disabled && !disabledFocusable ? undefined : 0,
|
|
76
|
+
...rest,
|
|
77
|
+
// If it's not a <button> than listeners are required even with disabledFocusable
|
|
78
|
+
// Since you cannot assure the default behavior of the element
|
|
79
|
+
// E.g: <a> will redirect on click
|
|
80
|
+
onClick: handleClick,
|
|
81
|
+
onKeyUp: handleKeyUp,
|
|
82
|
+
onKeyDown: handleKeyDown,
|
|
83
|
+
'aria-disabled': disabled || disabledFocusable || normalizedARIADisabled
|
|
84
|
+
};
|
|
85
|
+
if (type === 'a' && isDisabled) {
|
|
86
|
+
resultProps.href = undefined;
|
|
87
|
+
}
|
|
88
|
+
return resultProps;
|
|
75
89
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(ev);
|
|
79
|
-
if (ev.isDefaultPrevented()) {
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
|
-
const key = ev.key;
|
|
83
|
-
if (isDisabled && (key === keyboard_keys_1.Enter || key === keyboard_keys_1.Space)) {
|
|
84
|
-
ev.preventDefault();
|
|
85
|
-
ev.stopPropagation();
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
if (key === keyboard_keys_1.Space) {
|
|
89
|
-
ev.preventDefault();
|
|
90
|
-
ev.currentTarget.click();
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
// If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly
|
|
94
|
-
if (type === 'button' || type === undefined) {
|
|
95
|
-
return {
|
|
96
|
-
...rest,
|
|
97
|
-
disabled: disabled && !disabledFocusable,
|
|
98
|
-
'aria-disabled': disabledFocusable ? true : normalizedARIADisabled,
|
|
99
|
-
// onclick should still use internal handler to ensure prevention if disabled
|
|
100
|
-
// if disabledFocusable then there's no requirement for handlers as those events should not be propagated
|
|
101
|
-
onClick: disabledFocusable ? undefined : handleClick,
|
|
102
|
-
onKeyUp: disabledFocusable ? undefined : onKeyUp,
|
|
103
|
-
onKeyDown: disabledFocusable ? undefined : onKeyDown
|
|
104
|
-
};
|
|
105
|
-
}
|
|
106
|
-
// If an <a> or <div> tag is to be rendered we have to remove disabled and type,
|
|
107
|
-
// and set aria-disabled, role and tabIndex.
|
|
108
|
-
else {
|
|
109
|
-
const resultProps = {
|
|
110
|
-
role: 'button',
|
|
111
|
-
tabIndex: disabled && !disabledFocusable ? undefined : 0,
|
|
112
|
-
...rest,
|
|
113
|
-
// If it's not a <button> than listeners are required even with disabledFocusable
|
|
114
|
-
// Since you cannot assure the default behavior of the element
|
|
115
|
-
// E.g: <a> will redirect on click
|
|
116
|
-
onClick: handleClick,
|
|
117
|
-
onKeyUp: handleKeyUp,
|
|
118
|
-
onKeyDown: handleKeyDown,
|
|
119
|
-
'aria-disabled': disabled || disabledFocusable || normalizedARIADisabled
|
|
120
|
-
};
|
|
121
|
-
if (type === 'a' && isDisabled) {
|
|
122
|
-
resultProps.href = undefined;
|
|
123
|
-
}
|
|
124
|
-
return resultProps;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
exports.useARIAButtonProps = useARIAButtonProps;
|
|
90
|
+
} //# sourceMappingURL=useARIAButtonProps.js.map
|
|
91
|
+
|
|
128
92
|
//# sourceMappingURL=useARIAButtonProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../lib/button/useARIAButtonProps.js"],"sourcesContent":["import { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\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, props) {\n const {\n disabled,\n disabledFocusable = false,\n ['aria-disabled']: ariaDisabled,\n onClick,\n onKeyDown,\n onKeyUp,\n ...rest\n } = props !== null && props !== void 0 ? props : {};\n const normalizedARIADisabled = typeof ariaDisabled === 'string' ? ariaDisabled === 'true' : ariaDisabled;\n const isDisabled = disabled || disabledFocusable || normalizedARIADisabled;\n const handleClick = useEventCallback(ev => {\n if (isDisabled) {\n ev.preventDefault();\n ev.stopPropagation();\n } else {\n onClick === null || onClick === void 0 ? void 0 : onClick(ev);\n }\n });\n const handleKeyDown = useEventCallback(ev => {\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);\n if (ev.isDefaultPrevented()) {\n return;\n }\n const key = ev.key;\n if (isDisabled && (key === Enter || key === Space)) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n if (key === Space) {\n ev.preventDefault();\n return;\n } else if (key === Enter) {\n ev.preventDefault();\n ev.currentTarget.click();\n }\n });\n const handleKeyUp = useEventCallback(ev => {\n onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(ev);\n if (ev.isDefaultPrevented()) {\n return;\n }\n const key = ev.key;\n if (isDisabled && (key === Enter || key === Space)) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n if (key === Space) {\n ev.preventDefault();\n ev.currentTarget.click();\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 };\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 };\n if (type === 'a' && isDisabled) {\n resultProps.href = undefined;\n }\n return resultProps;\n }\n}\n//# sourceMappingURL=useARIAButtonProps.js.map"],"names":["useARIAButtonProps","type","props","disabled","disabledFocusable","ariaDisabled","onClick","onKeyDown","onKeyUp","rest","normalizedARIADisabled","isDisabled","handleClick","useEventCallback","ev","preventDefault","stopPropagation","handleKeyDown","isDefaultPrevented","key","Enter","Space","currentTarget","click","handleKeyUp","undefined","resultProps","role","tabIndex","href"],"mappings":";;;;+BA8BgBA;;aAAAA;;;8BA9Ba;gCACI;6DACV;AA4BhB,SAASA,mBAAmBC,IAAI,EAAEC,KAAK,EAAE;IAC9C,MAAM,EACJC,SAAQ,EACRC,mBAAoB,KAAK,CAAA,EACzB,CAAC,gBAAgB,EAAEC,aAAY,EAC/BC,QAAO,EACPC,UAAS,EACTC,QAAO,EACP,GAAGC,MACJ,GAAGP,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAIA,QAAQ,CAAC,CAAC;IACnD,MAAMQ,yBAAyB,OAAOL,iBAAiB,WAAWA,iBAAiB,SAASA,YAAY;IACxG,MAAMM,aAAaR,YAAYC,qBAAqBM;IACpD,MAAME,cAAcC,IAAAA,gCAAgB,EAACC,CAAAA,KAAM;QACzC,IAAIH,YAAY;YACdG,GAAGC,cAAc;YACjBD,GAAGE,eAAe;QACpB,OAAO;YACLV,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQQ,GAAG;QAC/D,CAAC;IACH;IACA,MAAMG,gBAAgBJ,IAAAA,gCAAgB,EAACC,CAAAA,KAAM;QAC3CP,cAAc,IAAI,IAAIA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUO,GAAG;QACnE,IAAIA,GAAGI,kBAAkB,IAAI;YAC3B;QACF,CAAC;QACD,MAAMC,MAAML,GAAGK,GAAG;QAClB,IAAIR,cAAeQ,CAAAA,QAAQC,mBAAK,IAAID,QAAQE,mBAAK,AAAD,GAAI;YAClDP,GAAGC,cAAc;YACjBD,GAAGE,eAAe;YAClB;QACF,CAAC;QACD,IAAIG,QAAQE,mBAAK,EAAE;YACjBP,GAAGC,cAAc;YACjB;QACF,OAAO,IAAII,QAAQC,mBAAK,EAAE;YACxBN,GAAGC,cAAc;YACjBD,GAAGQ,aAAa,CAACC,KAAK;QACxB,CAAC;IACH;IACA,MAAMC,cAAcX,IAAAA,gCAAgB,EAACC,CAAAA,KAAM;QACzCN,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQM,GAAG;QAC7D,IAAIA,GAAGI,kBAAkB,IAAI;YAC3B;QACF,CAAC;QACD,MAAMC,MAAML,GAAGK,GAAG;QAClB,IAAIR,cAAeQ,CAAAA,QAAQC,mBAAK,IAAID,QAAQE,mBAAK,AAAD,GAAI;YAClDP,GAAGC,cAAc;YACjBD,GAAGE,eAAe;YAClB;QACF,CAAC;QACD,IAAIG,QAAQE,mBAAK,EAAE;YACjBP,GAAGC,cAAc;YACjBD,GAAGQ,aAAa,CAACC,KAAK;QACxB,CAAC;IACH;IACA,+FAA+F;IAC/F,IAAItB,SAAS,YAAYA,SAASwB,WAAW;QAC3C,OAAO;YACL,GAAGhB,IAAI;YACPN,UAAUA,YAAY,CAACC;YACvB,iBAAiBA,oBAAoB,IAAI,GAAGM,sBAAsB;YAClE,6EAA6E;YAC7E,yGAAyG;YACzGJ,SAASF,oBAAoBqB,YAAYb,WAAW;YACpDJ,SAASJ,oBAAoBqB,YAAYjB,OAAO;YAChDD,WAAWH,oBAAoBqB,YAAYlB,SAAS;QACtD;IACF,OAAO;QACL,MAAMmB,cAAc;YAClBC,MAAM;YACNC,UAAUzB,YAAY,CAACC,oBAAoBqB,YAAY,CAAC;YACxD,GAAGhB,IAAI;YACP,iFAAiF;YACjF,8DAA8D;YAC9D,kCAAkC;YAClCH,SAASM;YACTJ,SAASgB;YACTjB,WAAWU;YACX,iBAAiBd,YAAYC,qBAAqBM;QACpD;QACA,IAAIT,SAAS,OAAOU,YAAY;YAC9Be,YAAYG,IAAI,GAAGJ;QACrB,CAAC;QACD,OAAOC;IACT,CAAC;AACH,EACA,8CAA8C"}
|
|
@@ -1,25 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useARIAButtonShorthand", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>useARIAButtonShorthand
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
|
|
16
|
-
* where no attribute addition is required.
|
|
17
|
-
*/
|
|
18
|
-
const useARIAButtonShorthand = (slot, options) => {
|
|
19
|
-
var _a;
|
|
20
|
-
const shorthand = react_utilities_1.resolveShorthand(slot, options);
|
|
21
|
-
const shorthandARIAButton = useARIAButtonProps_1.useARIAButtonProps((_a = shorthand === null || shorthand === void 0 ? void 0 : shorthand.as) !== null && _a !== void 0 ? _a : 'button', shorthand);
|
|
22
|
-
return shorthand && shorthandARIAButton;
|
|
23
|
-
};
|
|
24
|
-
exports.useARIAButtonShorthand = useARIAButtonShorthand;
|
|
9
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
|
10
|
+
const _useARIAButtonProps = require("./useARIAButtonProps");
|
|
11
|
+
const useARIAButtonShorthand = (slot, options)=>{
|
|
12
|
+
const shorthand = (0, _reactUtilities.resolveShorthand)(slot, options);
|
|
13
|
+
var _shorthand_as;
|
|
14
|
+
const shorthandARIAButton = (0, _useARIAButtonProps.useARIAButtonProps)((_shorthand_as = shorthand === null || shorthand === void 0 ? void 0 : shorthand.as) !== null && _shorthand_as !== void 0 ? _shorthand_as : 'button', shorthand);
|
|
15
|
+
return shorthand && shorthandARIAButton;
|
|
16
|
+
}; //# sourceMappingURL=useARIAButtonShorthand.js.map
|
|
17
|
+
|
|
25
18
|
//# sourceMappingURL=useARIAButtonShorthand.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../lib/button/useARIAButtonShorthand.js"],"sourcesContent":["import { resolveShorthand } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from './useARIAButtonProps';\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 = (slot, options) => {\n const shorthand = resolveShorthand(slot, options);\n var _shorthand_as;\n const shorthandARIAButton = useARIAButtonProps((_shorthand_as = shorthand === null || shorthand === void 0 ? void 0 : shorthand.as) !== null && _shorthand_as !== void 0 ? _shorthand_as : 'button', shorthand);\n return shorthand && shorthandARIAButton;\n};\n//# sourceMappingURL=useARIAButtonShorthand.js.map"],"names":["useARIAButtonShorthand","slot","options","shorthand","resolveShorthand","_shorthand_as","shorthandARIAButton","useARIAButtonProps","as"],"mappings":";;;;+BAWaA;;aAAAA;;gCAXoB;oCACE;AAU5B,MAAMA,yBAAyB,CAACC,MAAMC,UAAY;IACvD,MAAMC,YAAYC,IAAAA,gCAAgB,EAACH,MAAMC;IACzC,IAAIG;IACJ,MAAMC,sBAAsBC,IAAAA,sCAAkB,EAAC,AAACF,CAAAA,gBAAgBF,cAAc,IAAI,IAAIA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUK,EAAE,AAAD,MAAO,IAAI,IAAIH,kBAAkB,KAAK,IAAIA,gBAAgB,QAAQ,EAAEF;IACrM,OAAOA,aAAaG;AACtB,GACA,kDAAkD"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
5
|
-
});
|
|
6
|
-
exports.useARIAButtonProps = exports.useARIAButtonShorthand = void 0;
|
|
7
|
-
var index_1 = /*#__PURE__*/require("./button/index");
|
|
8
|
-
Object.defineProperty(exports, "useARIAButtonShorthand", {
|
|
9
|
-
enumerable: true,
|
|
10
|
-
get: function () {
|
|
11
|
-
return index_1.useARIAButtonShorthand;
|
|
12
|
-
}
|
|
3
|
+
value: true
|
|
13
4
|
});
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
useARIAButtonShorthand: ()=>_index.useARIAButtonShorthand,
|
|
13
|
+
useARIAButtonProps: ()=>_index.useARIAButtonProps
|
|
19
14
|
});
|
|
15
|
+
const _index = require("./button/index");
|
|
16
|
+
//# sourceMappingURL=index.js.map
|
|
17
|
+
|
|
20
18
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { useARIAButtonShorthand, useARIAButtonProps } from './button/index';\n//# sourceMappingURL=index.js.map"],"names":["useARIAButtonShorthand","useARIAButtonProps"],"mappings":";;;;;;;;;;;IAASA,sBAAsB,MAAtBA,6BAAsB;IAAEC,kBAAkB,MAAlBA,yBAAkB;;uBAAQ;CAC3D,iCAAiC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-aria",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.16",
|
|
4
4
|
"description": "React helper to ensure ARIA",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"test": "jest --passWithNoTests",
|
|
22
22
|
"storybook": "start-storybook",
|
|
23
23
|
"type-check": "tsc -b tsconfig.json",
|
|
24
|
-
"generate-api": "
|
|
24
|
+
"generate-api": "just-scripts generate-api"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@fluentui/eslint-plugin": "*",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"@fluentui/scripts-tasks": "*"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/keyboard-keys": "^9.0.
|
|
34
|
-
"@fluentui/react-utilities": "^9.7.
|
|
35
|
-
"
|
|
33
|
+
"@fluentui/keyboard-keys": "^9.0.2",
|
|
34
|
+
"@fluentui/react-utilities": "^9.7.3",
|
|
35
|
+
"@swc/helpers": "^0.4.14"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"@types/react": ">=16.8.0 <19.0.0",
|
|
@@ -49,6 +49,7 @@
|
|
|
49
49
|
"exports": {
|
|
50
50
|
".": {
|
|
51
51
|
"types": "./dist/index.d.ts",
|
|
52
|
+
"node": "./lib-commonjs/index.js",
|
|
52
53
|
"import": "./lib/index.js",
|
|
53
54
|
"require": "./lib-commonjs/index.js"
|
|
54
55
|
},
|
package/lib-amd/button/index.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "./useARIAButtonProps", "./useARIAButtonShorthand", "./types"], function (require, exports, tslib_1, useARIAButtonProps_1, useARIAButtonShorthand_1, types_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
tslib_1.__exportStar(useARIAButtonProps_1, exports);
|
|
5
|
-
tslib_1.__exportStar(useARIAButtonShorthand_1, exports);
|
|
6
|
-
tslib_1.__exportStar(types_1, exports);
|
|
7
|
-
});
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-aria/src/button/index.ts"],"names":[],"mappings":";;;IAAA,oDAAqC;IACrC,wDAAyC;IACzC,uCAAwB","sourcesContent":["export * from './useARIAButtonProps';\nexport * from './useARIAButtonShorthand';\nexport * from './types';\n"]}
|
package/lib-amd/button/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-aria/src/button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\ntype UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;\n\nexport type ARIAButtonType = 'button' | 'a' | 'div';\n\nexport type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> =\n | HTMLButtonElement\n | (AlternateAs extends 'a' ? HTMLAnchorElement : never)\n | (AlternateAs extends 'div' ? HTMLDivElement : never);\n\n/**\n * @internal\n */\nexport type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = UnionToIntersection<\n ARIAButtonElement<AlternateAs>\n>;\n\n/**\n * Props expected by `useARIAButtonProps` hooks\n */\nexport type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React.PropsWithRef<\n JSX.IntrinsicElements[Type]\n> & {\n disabled?: boolean;\n /**\n * When set, allows the button to be focusable even when it has been disabled.\n * This is used in scenarios where it is important to keep a consistent tab order\n * for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n *\n * @default false\n */\n disabledFocusable?: boolean;\n};\n\nexport type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = ExtractSlotProps<\n Slot<'button', AlternateAs>\n> &\n Pick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;\n\n/**\n * Props that will be modified internally by `useARIAButtonProps` by each case.\n * This typing is to ensure a well specified return value for `useARIAbButtonProps`\n */\nexport type ARIAButtonAlteredProps<Type extends ARIAButtonType> =\n | (Type extends 'button'\n ? Pick<\n JSX.IntrinsicElements['button'],\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'disabled' | 'aria-disabled' | 'tabIndex'\n >\n : never)\n | (Type extends 'a'\n ? Pick<\n JSX.IntrinsicElements['a'],\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role' | 'href'\n >\n : never)\n | (Type extends 'div'\n ? Pick<JSX.IntrinsicElements['div'], 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role'>\n : never);\n\n/**\n * Merge of props provided by the user and props provided internally.\n */\nexport type ARIAButtonResultProps<Type extends ARIAButtonType, Props> = Props &\n UnionToIntersection<ARIAButtonAlteredProps<Type>>;\n"]}
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "@fluentui/keyboard-keys", "@fluentui/react-utilities"], function (require, exports, tslib_1, keyboard_keys_1, react_utilities_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useARIAButtonProps = void 0;
|
|
5
|
-
/**
|
|
6
|
-
* @internal
|
|
7
|
-
*
|
|
8
|
-
* Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
|
|
9
|
-
* for multiple scenarios of non native button elements. Ensuring 1st rule of ARIA for cases
|
|
10
|
-
* where no attribute addition is required.
|
|
11
|
-
*
|
|
12
|
-
* @param type - the proper scenario to be interpreted by the hook.
|
|
13
|
-
* 1. `button` - Minimal interference from the hook, as semantic button already supports most of the states
|
|
14
|
-
* 2. `a` or `div` - Proper keyboard/mouse handling plus other support to ensure ARIA behavior
|
|
15
|
-
* @param props - the props to be passed down the line to the desired element.
|
|
16
|
-
* This hook will encapsulate proper properties, such as `onClick`, `onKeyDown`, `onKeyUp`, etc,.
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* ```tsx
|
|
20
|
-
* const buttonProps = useARIAButtonProps('a', {
|
|
21
|
-
* href: './some-route'
|
|
22
|
-
* onClick: () => console.log('this should run both on click and Space and Enter')
|
|
23
|
-
* })
|
|
24
|
-
*
|
|
25
|
-
* // ...
|
|
26
|
-
*
|
|
27
|
-
* return (
|
|
28
|
-
* <a {...buttonProps}>This anchor will behave as a proper button</a>
|
|
29
|
-
* )
|
|
30
|
-
* ```
|
|
31
|
-
*/
|
|
32
|
-
function useARIAButtonProps(type, props) {
|
|
33
|
-
var _a = props !== null && props !== void 0 ? props : {}, disabled = _a.disabled, _b = _a.disabledFocusable, disabledFocusable = _b === void 0 ? false : _b, ariaDisabled = _a["aria-disabled"], onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, rest = tslib_1.__rest(_a, ["disabled", "disabledFocusable", 'aria-disabled', "onClick", "onKeyDown", "onKeyUp"]);
|
|
34
|
-
var normalizedARIADisabled = typeof ariaDisabled === 'string' ? ariaDisabled === 'true' : ariaDisabled;
|
|
35
|
-
var isDisabled = disabled || disabledFocusable || normalizedARIADisabled;
|
|
36
|
-
var handleClick = react_utilities_1.useEventCallback(function (ev) {
|
|
37
|
-
if (isDisabled) {
|
|
38
|
-
ev.preventDefault();
|
|
39
|
-
ev.stopPropagation();
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
onClick === null || onClick === void 0 ? void 0 : onClick(ev);
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
var handleKeyDown = react_utilities_1.useEventCallback(function (ev) {
|
|
46
|
-
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
|
|
47
|
-
if (ev.isDefaultPrevented()) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
var key = ev.key;
|
|
51
|
-
if (isDisabled && (key === keyboard_keys_1.Enter || key === keyboard_keys_1.Space)) {
|
|
52
|
-
ev.preventDefault();
|
|
53
|
-
ev.stopPropagation();
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
if (key === keyboard_keys_1.Space) {
|
|
57
|
-
ev.preventDefault();
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
// If enter is pressed, activate the button
|
|
61
|
-
else if (key === keyboard_keys_1.Enter) {
|
|
62
|
-
ev.preventDefault();
|
|
63
|
-
ev.currentTarget.click();
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
var handleKeyUp = react_utilities_1.useEventCallback(function (ev) {
|
|
67
|
-
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(ev);
|
|
68
|
-
if (ev.isDefaultPrevented()) {
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
var key = ev.key;
|
|
72
|
-
if (isDisabled && (key === keyboard_keys_1.Enter || key === keyboard_keys_1.Space)) {
|
|
73
|
-
ev.preventDefault();
|
|
74
|
-
ev.stopPropagation();
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
if (key === keyboard_keys_1.Space) {
|
|
78
|
-
ev.preventDefault();
|
|
79
|
-
ev.currentTarget.click();
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
// If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly
|
|
83
|
-
if (type === 'button' || type === undefined) {
|
|
84
|
-
return tslib_1.__assign(tslib_1.__assign({}, rest), { disabled: disabled && !disabledFocusable, 'aria-disabled': disabledFocusable ? true : normalizedARIADisabled,
|
|
85
|
-
// onclick should still use internal handler to ensure prevention if disabled
|
|
86
|
-
// if disabledFocusable then there's no requirement for handlers as those events should not be propagated
|
|
87
|
-
onClick: disabledFocusable ? undefined : handleClick, onKeyUp: disabledFocusable ? undefined : onKeyUp, onKeyDown: disabledFocusable ? undefined : onKeyDown });
|
|
88
|
-
}
|
|
89
|
-
// If an <a> or <div> tag is to be rendered we have to remove disabled and type,
|
|
90
|
-
// and set aria-disabled, role and tabIndex.
|
|
91
|
-
else {
|
|
92
|
-
var resultProps = tslib_1.__assign(tslib_1.__assign({ role: 'button', tabIndex: disabled && !disabledFocusable ? undefined : 0 }, rest), {
|
|
93
|
-
// If it's not a <button> than listeners are required even with disabledFocusable
|
|
94
|
-
// Since you cannot assure the default behavior of the element
|
|
95
|
-
// E.g: <a> will redirect on click
|
|
96
|
-
onClick: handleClick, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, 'aria-disabled': disabled || disabledFocusable || normalizedARIADisabled });
|
|
97
|
-
if (type === 'a' && isDisabled) {
|
|
98
|
-
resultProps.href = undefined;
|
|
99
|
-
}
|
|
100
|
-
return resultProps;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
exports.useARIAButtonProps = useARIAButtonProps;
|
|
104
|
-
});
|
|
105
|
-
//# sourceMappingURL=useARIAButtonProps.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useARIAButtonProps.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-aria/src/button/useARIAButtonProps.ts"],"names":[],"mappings":"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","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 {\n disabled,\n disabledFocusable = false,\n ['aria-disabled']: ariaDisabled,\n onClick,\n onKeyDown,\n onKeyUp,\n ...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"]}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "@fluentui/react-utilities", "./useARIAButtonProps"], function (require, exports, react_utilities_1, useARIAButtonProps_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useARIAButtonShorthand = void 0;
|
|
5
|
-
/**
|
|
6
|
-
* @internal
|
|
7
|
-
*
|
|
8
|
-
* This function expects to receive a slot, if `as` property is not desired use `useARIAButtonProps` instead
|
|
9
|
-
*
|
|
10
|
-
* Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
|
|
11
|
-
* for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
|
|
12
|
-
* where no attribute addition is required.
|
|
13
|
-
*/
|
|
14
|
-
var useARIAButtonShorthand = function (slot, options) {
|
|
15
|
-
var _a;
|
|
16
|
-
var shorthand = react_utilities_1.resolveShorthand(slot, options);
|
|
17
|
-
var shorthandARIAButton = useARIAButtonProps_1.useARIAButtonProps((_a = shorthand === null || shorthand === void 0 ? void 0 : shorthand.as) !== null && _a !== void 0 ? _a : 'button', shorthand);
|
|
18
|
-
return shorthand && shorthandARIAButton;
|
|
19
|
-
};
|
|
20
|
-
exports.useARIAButtonShorthand = useARIAButtonShorthand;
|
|
21
|
-
});
|
|
22
|
-
//# sourceMappingURL=useARIAButtonShorthand.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useARIAButtonShorthand.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-aria/src/button/useARIAButtonShorthand.ts"],"names":[],"mappings":";;;;IAKA;;;;;;;;OAQG;IACI,IAAM,sBAAsB,GAAkD,UAAC,IAAI,EAAE,OAAO;;QACjG,IAAM,SAAS,GAAG,kCAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAClD,IAAM,mBAAmB,GAAG,uCAAkB,CAAkC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,EAAE,mCAAI,QAAQ,EAAE,SAAS,CAAC,CAAC;QACtH,OAAO,SAAS,IAAI,mBAAmB,CAAC;IAC1C,CAAC,CAAC;IAJW,QAAA,sBAAsB,0BAIjC","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-amd/index.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "./button/index"], function (require, exports, index_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useARIAButtonProps = exports.useARIAButtonShorthand = void 0;
|
|
5
|
-
Object.defineProperty(exports, "useARIAButtonShorthand", { enumerable: true, get: function () { return index_1.useARIAButtonShorthand; } });
|
|
6
|
-
Object.defineProperty(exports, "useARIAButtonProps", { enumerable: true, get: function () { return index_1.useARIAButtonProps; } });
|
|
7
|
-
});
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
package/lib-amd/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-aria/src/index.ts"],"names":[],"mappings":";;;;IAAS,+GAAA,sBAAsB,OAAA;IAAE,2GAAA,kBAAkB,OAAA","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"]}
|