@fluentui/react-aria 9.4.0 → 9.6.0
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.md +24 -2
- package/dist/index.d.ts +2 -0
- package/lib/activedescendant/useActiveDescendant.js +25 -1
- package/lib/activedescendant/useActiveDescendant.js.map +1 -1
- package/lib/button/useARIAButtonShorthand.js +2 -0
- package/lib/button/useARIAButtonShorthand.js.map +1 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/activedescendant/useActiveDescendant.js +25 -1
- package/lib-commonjs/activedescendant/useActiveDescendant.js.map +1 -1
- package/lib-commonjs/button/useARIAButtonShorthand.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-aria
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 18 Dec 2023 14:36:10 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.6.0)
|
|
8
|
+
|
|
9
|
+
Mon, 18 Dec 2023 14:36:10 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.5.0..@fluentui/react-aria_v9.6.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: deprecates useARIAButtonShorthand in favor of useARIAButtonProps ([PR #29735](https://github.com/microsoft/fluentui/pull/29735) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.13.2 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.15.4 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.5.0)
|
|
19
|
+
|
|
20
|
+
Thu, 14 Dec 2023 09:58:42 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.4.0..@fluentui/react-aria_v9.5.0)
|
|
22
|
+
|
|
23
|
+
### Minor changes
|
|
24
|
+
|
|
25
|
+
- feat(useActiveDescendant): Changing active descendant scrolls into view ([PR #29992](https://github.com/microsoft/fluentui/pull/29992) by lingfangao@hotmail.com)
|
|
26
|
+
- Bump @fluentui/react-shared-contexts to v9.13.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.15.3 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.4.0)
|
|
8
30
|
|
|
9
|
-
Thu, 30 Nov 2023 13:
|
|
31
|
+
Thu, 30 Nov 2023 13:42:05 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.3.44..@fluentui/react-aria_v9.4.0)
|
|
11
33
|
|
|
12
34
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -94,6 +94,8 @@ export declare function useARIAButtonProps<Type extends ARIAButtonType, Props ex
|
|
|
94
94
|
/**
|
|
95
95
|
* @internal
|
|
96
96
|
*
|
|
97
|
+
* @deprecated use useARIAButtonProps instead
|
|
98
|
+
*
|
|
97
99
|
* This function expects to receive a slot, if `as` property is not desired use `useARIAButtonProps` instead
|
|
98
100
|
*
|
|
99
101
|
* Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
|
|
@@ -11,6 +11,25 @@ export function useActiveDescendant(options) {
|
|
|
11
11
|
var _listboxRef_current;
|
|
12
12
|
return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);
|
|
13
13
|
};
|
|
14
|
+
const scrollActiveIntoView = (active)=>{
|
|
15
|
+
if (!listboxRef.current) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const { offsetHeight, offsetTop } = active;
|
|
22
|
+
const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;
|
|
23
|
+
const isAbove = offsetTop < scrollTop;
|
|
24
|
+
const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
|
|
25
|
+
const buffer = 2;
|
|
26
|
+
if (isAbove) {
|
|
27
|
+
listboxRef.current.scrollTo(0, offsetTop - buffer);
|
|
28
|
+
}
|
|
29
|
+
if (isBelow) {
|
|
30
|
+
listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
14
33
|
const setActiveDescendant = (nextActive)=>{
|
|
15
34
|
const active = getActiveDescendant();
|
|
16
35
|
if (active) {
|
|
@@ -19,6 +38,7 @@ export function useActiveDescendant(options) {
|
|
|
19
38
|
if (nextActive) {
|
|
20
39
|
var _activeParentRef_current;
|
|
21
40
|
nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');
|
|
41
|
+
scrollActiveIntoView(nextActive);
|
|
22
42
|
(_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);
|
|
23
43
|
} else {
|
|
24
44
|
var _activeParentRef_current1;
|
|
@@ -30,6 +50,7 @@ export function useActiveDescendant(options) {
|
|
|
30
50
|
if (!listboxRef.current || !activeParentRef.current) {
|
|
31
51
|
return;
|
|
32
52
|
}
|
|
53
|
+
optionWalker.setCurrent(listboxRef.current);
|
|
33
54
|
const first = optionWalker.first();
|
|
34
55
|
if (first) {
|
|
35
56
|
setActiveDescendant(first);
|
|
@@ -58,13 +79,16 @@ export function useActiveDescendant(options) {
|
|
|
58
79
|
return;
|
|
59
80
|
}
|
|
60
81
|
optionWalker.setCurrent(active);
|
|
82
|
+
if (!matchOption(active)) {
|
|
83
|
+
optionWalker.prev();
|
|
84
|
+
}
|
|
61
85
|
const next = optionWalker.prev();
|
|
62
86
|
if (next && next !== listboxRef.current) {
|
|
63
87
|
setActiveDescendant(next);
|
|
64
88
|
}
|
|
65
89
|
},
|
|
66
90
|
blur: ()=>{
|
|
67
|
-
if (!
|
|
91
|
+
if (!activeParentRef.current) {
|
|
68
92
|
return;
|
|
69
93
|
}
|
|
70
94
|
setActiveDescendant(undefined);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantOptions } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n options: ActiveDescendantOptions,\n) {\n const { imperativeRef, matchOption } = options;\n const activeParentRef = React.useRef<TActiveParentElement>(null);\n const { listboxRef, optionWalker } = useOptionWalker<TListboxElement>({ matchOption });\n const getActiveDescendant = () => {\n return listboxRef.current?.querySelector<HTMLElement>(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n };\n\n const setActiveDescendant = (nextActive: HTMLElement | undefined) => {\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n }\n\n if (nextActive) {\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n activeParentRef.current?.setAttribute('aria-activedescendant', nextActive.id);\n } else {\n activeParentRef.current?.removeAttribute('aria-activedescendant');\n }\n };\n\n React.useImperativeHandle(imperativeRef, () => ({\n first: () => {\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n\n const first = optionWalker.first();\n if (first) {\n setActiveDescendant(first);\n }\n },\n next: () => {\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (next) {\n setActiveDescendant(next);\n }\n },\n prev: () => {\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.prev();\n\n if (next && next !== listboxRef.current) {\n setActiveDescendant(next);\n }\n },\n blur: () => {\n if (!
|
|
1
|
+
{"version":3,"sources":["useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantOptions } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n options: ActiveDescendantOptions,\n) {\n const { imperativeRef, matchOption } = options;\n const activeParentRef = React.useRef<TActiveParentElement>(null);\n const { listboxRef, optionWalker } = useOptionWalker<TListboxElement>({ matchOption });\n const getActiveDescendant = () => {\n return listboxRef.current?.querySelector<HTMLElement>(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n };\n\n const scrollActiveIntoView = (active: HTMLElement) => {\n if (!listboxRef.current) {\n return;\n }\n\n if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {\n return;\n }\n\n const { offsetHeight, offsetTop } = active;\n const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;\n\n const isAbove = offsetTop < scrollTop;\n const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n const buffer = 2;\n\n if (isAbove) {\n listboxRef.current.scrollTo(0, offsetTop - buffer);\n }\n\n if (isBelow) {\n listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n }\n };\n\n const setActiveDescendant = (nextActive: HTMLElement | undefined) => {\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n }\n\n if (nextActive) {\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n scrollActiveIntoView(nextActive);\n activeParentRef.current?.setAttribute('aria-activedescendant', nextActive.id);\n } else {\n activeParentRef.current?.removeAttribute('aria-activedescendant');\n }\n };\n\n React.useImperativeHandle(imperativeRef, () => ({\n first: () => {\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n\n optionWalker.setCurrent(listboxRef.current);\n const first = optionWalker.first();\n if (first) {\n setActiveDescendant(first);\n }\n },\n next: () => {\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (next) {\n setActiveDescendant(next);\n }\n },\n prev: () => {\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n if (!matchOption(active)) {\n optionWalker.prev();\n }\n\n const next = optionWalker.prev();\n\n if (next && next !== listboxRef.current) {\n setActiveDescendant(next);\n }\n },\n blur: () => {\n if (!activeParentRef.current) {\n return;\n }\n\n setActiveDescendant(undefined);\n },\n active: () => {\n if (listboxRef.current) {\n return getActiveDescendant()?.id;\n }\n },\n\n focus: (id: string) => {\n if (!listboxRef.current) {\n return;\n }\n\n optionWalker.setCurrent(listboxRef.current);\n let cur = optionWalker.next();\n\n while (cur && cur.id !== id) {\n cur = optionWalker.next();\n }\n\n if (cur) {\n setActiveDescendant(cur);\n }\n },\n }));\n\n return { listboxRef, activeParentRef };\n}\n"],"names":["React","useOptionWalker","ACTIVEDESCENDANT_ATTRIBUTE","useActiveDescendant","options","imperativeRef","matchOption","activeParentRef","useRef","listboxRef","optionWalker","getActiveDescendant","current","querySelector","scrollActiveIntoView","active","offsetHeight","scrollHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","setActiveDescendant","nextActive","removeAttribute","setAttribute","id","useImperativeHandle","first","setCurrent","next","prev","blur","undefined","focus","cur"],"mappings":"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"}
|
|
@@ -3,6 +3,8 @@ import { useARIAButtonProps } from './useARIAButtonProps';
|
|
|
3
3
|
/**
|
|
4
4
|
* @internal
|
|
5
5
|
*
|
|
6
|
+
* @deprecated use useARIAButtonProps instead
|
|
7
|
+
*
|
|
6
8
|
* This function expects to receive a slot, if `as` property is not desired use `useARIAButtonProps` instead
|
|
7
9
|
*
|
|
8
10
|
* Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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> = (value, options) => {\n const shorthand = resolveShorthand(value, options);\n const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);\n return shorthand && shorthandARIAButton;\n};\n"],"names":["resolveShorthand","useARIAButtonProps","useARIAButtonShorthand","value","options","shorthand","shorthandARIAButton","as"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,uBAAuB;AAI1D
|
|
1
|
+
{"version":3,"sources":["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 * @deprecated use useARIAButtonProps instead\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> = (value, options) => {\n const shorthand = resolveShorthand(value, options);\n const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);\n return shorthand && shorthandARIAButton;\n};\n"],"names":["resolveShorthand","useARIAButtonProps","useARIAButtonShorthand","value","options","shorthand","shorthandARIAButton","as"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,uBAAuB;AAI1D;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,yBAAwE,CAACC,OAAOC;IAC3F,MAAMC,YAAYL,iBAAiBG,OAAOC;QACsCC;IAAhF,MAAMC,sBAAsBL,mBAAoDI,CAAAA,gBAAAA,sBAAAA,gCAAAA,UAAWE,EAAE,cAAbF,2BAAAA,gBAAiB,UAAUA;IAC3G,OAAOA,aAAaC;AACtB,EAAE"}
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { useARIAButtonShorthand
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n // eslint-disable-next-line deprecation/deprecation\n useARIAButtonShorthand,\n useARIAButtonProps,\n} from './button/index';\nexport { useActiveDescendant } from './activedescendant';\nexport type { ActiveDescendantImperativeRef, ActiveDescendantOptions } from './activedescendant';\nexport type {\n ARIAButtonSlotProps,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonType,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonAlteredProps,\n} from './button/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant"],"mappings":"AAAA,SACE,mDAAmD;AACnDA,sBAAsB,EACtBC,kBAAkB,QACb,iBAAiB;AACxB,SAASC,mBAAmB,QAAQ,qBAAqB"}
|
|
@@ -22,6 +22,25 @@ function useActiveDescendant(options) {
|
|
|
22
22
|
var _listboxRef_current;
|
|
23
23
|
return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${_constants.ACTIVEDESCENDANT_ATTRIBUTE}]`);
|
|
24
24
|
};
|
|
25
|
+
const scrollActiveIntoView = (active)=>{
|
|
26
|
+
if (!listboxRef.current) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const { offsetHeight, offsetTop } = active;
|
|
33
|
+
const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;
|
|
34
|
+
const isAbove = offsetTop < scrollTop;
|
|
35
|
+
const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
|
|
36
|
+
const buffer = 2;
|
|
37
|
+
if (isAbove) {
|
|
38
|
+
listboxRef.current.scrollTo(0, offsetTop - buffer);
|
|
39
|
+
}
|
|
40
|
+
if (isBelow) {
|
|
41
|
+
listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
|
|
42
|
+
}
|
|
43
|
+
};
|
|
25
44
|
const setActiveDescendant = (nextActive)=>{
|
|
26
45
|
const active = getActiveDescendant();
|
|
27
46
|
if (active) {
|
|
@@ -30,6 +49,7 @@ function useActiveDescendant(options) {
|
|
|
30
49
|
if (nextActive) {
|
|
31
50
|
var _activeParentRef_current;
|
|
32
51
|
nextActive.setAttribute(_constants.ACTIVEDESCENDANT_ATTRIBUTE, '');
|
|
52
|
+
scrollActiveIntoView(nextActive);
|
|
33
53
|
(_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);
|
|
34
54
|
} else {
|
|
35
55
|
var _activeParentRef_current1;
|
|
@@ -41,6 +61,7 @@ function useActiveDescendant(options) {
|
|
|
41
61
|
if (!listboxRef.current || !activeParentRef.current) {
|
|
42
62
|
return;
|
|
43
63
|
}
|
|
64
|
+
optionWalker.setCurrent(listboxRef.current);
|
|
44
65
|
const first = optionWalker.first();
|
|
45
66
|
if (first) {
|
|
46
67
|
setActiveDescendant(first);
|
|
@@ -69,13 +90,16 @@ function useActiveDescendant(options) {
|
|
|
69
90
|
return;
|
|
70
91
|
}
|
|
71
92
|
optionWalker.setCurrent(active);
|
|
93
|
+
if (!matchOption(active)) {
|
|
94
|
+
optionWalker.prev();
|
|
95
|
+
}
|
|
72
96
|
const next = optionWalker.prev();
|
|
73
97
|
if (next && next !== listboxRef.current) {
|
|
74
98
|
setActiveDescendant(next);
|
|
75
99
|
}
|
|
76
100
|
},
|
|
77
101
|
blur: ()=>{
|
|
78
|
-
if (!
|
|
102
|
+
if (!activeParentRef.current) {
|
|
79
103
|
return;
|
|
80
104
|
}
|
|
81
105
|
setActiveDescendant(undefined);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useActiveDescendant.js"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\nexport function useActiveDescendant(options) {\n const { imperativeRef, matchOption } = options;\n const activeParentRef = React.useRef(null);\n const { listboxRef, optionWalker } = useOptionWalker({\n matchOption\n });\n const getActiveDescendant = ()=>{\n var _listboxRef_current;\n return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n };\n const setActiveDescendant = (nextActive)=>{\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n }\n if (nextActive) {\n var _activeParentRef_current;\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);\n } else {\n var _activeParentRef_current1;\n (_activeParentRef_current1 = activeParentRef.current) === null || _activeParentRef_current1 === void 0 ? void 0 : _activeParentRef_current1.removeAttribute('aria-activedescendant');\n }\n };\n React.useImperativeHandle(imperativeRef, ()=>({\n first: ()=>{\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n const first = optionWalker.first();\n if (first) {\n setActiveDescendant(first);\n }\n },\n next: ()=>{\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (next) {\n setActiveDescendant(next);\n }\n },\n prev: ()=>{\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n optionWalker.setCurrent(active);\n const next = optionWalker.prev();\n if (next && next !== listboxRef.current) {\n setActiveDescendant(next);\n }\n },\n blur: ()=>{\n if (!
|
|
1
|
+
{"version":3,"sources":["useActiveDescendant.js"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\nexport function useActiveDescendant(options) {\n const { imperativeRef, matchOption } = options;\n const activeParentRef = React.useRef(null);\n const { listboxRef, optionWalker } = useOptionWalker({\n matchOption\n });\n const getActiveDescendant = ()=>{\n var _listboxRef_current;\n return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n };\n const scrollActiveIntoView = (active)=>{\n if (!listboxRef.current) {\n return;\n }\n if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {\n return;\n }\n const { offsetHeight, offsetTop } = active;\n const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;\n const isAbove = offsetTop < scrollTop;\n const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n const buffer = 2;\n if (isAbove) {\n listboxRef.current.scrollTo(0, offsetTop - buffer);\n }\n if (isBelow) {\n listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n }\n };\n const setActiveDescendant = (nextActive)=>{\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n }\n if (nextActive) {\n var _activeParentRef_current;\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n scrollActiveIntoView(nextActive);\n (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);\n } else {\n var _activeParentRef_current1;\n (_activeParentRef_current1 = activeParentRef.current) === null || _activeParentRef_current1 === void 0 ? void 0 : _activeParentRef_current1.removeAttribute('aria-activedescendant');\n }\n };\n React.useImperativeHandle(imperativeRef, ()=>({\n first: ()=>{\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n optionWalker.setCurrent(listboxRef.current);\n const first = optionWalker.first();\n if (first) {\n setActiveDescendant(first);\n }\n },\n next: ()=>{\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (next) {\n setActiveDescendant(next);\n }\n },\n prev: ()=>{\n if (!listboxRef.current || !activeParentRef.current) {\n return;\n }\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n optionWalker.setCurrent(active);\n if (!matchOption(active)) {\n optionWalker.prev();\n }\n const next = optionWalker.prev();\n if (next && next !== listboxRef.current) {\n setActiveDescendant(next);\n }\n },\n blur: ()=>{\n if (!activeParentRef.current) {\n return;\n }\n setActiveDescendant(undefined);\n },\n active: ()=>{\n if (listboxRef.current) {\n var _getActiveDescendant;\n return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;\n }\n },\n focus: (id)=>{\n if (!listboxRef.current) {\n return;\n }\n optionWalker.setCurrent(listboxRef.current);\n let cur = optionWalker.next();\n while(cur && cur.id !== id){\n cur = optionWalker.next();\n }\n if (cur) {\n setActiveDescendant(cur);\n }\n }\n }));\n return {\n listboxRef,\n activeParentRef\n };\n}\n"],"names":["useActiveDescendant","options","imperativeRef","matchOption","activeParentRef","React","useRef","listboxRef","optionWalker","useOptionWalker","getActiveDescendant","_listboxRef_current","current","querySelector","ACTIVEDESCENDANT_ATTRIBUTE","scrollActiveIntoView","active","offsetHeight","scrollHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","setActiveDescendant","nextActive","removeAttribute","_activeParentRef_current","setAttribute","id","_activeParentRef_current1","useImperativeHandle","first","setCurrent","next","prev","blur","undefined","_getActiveDescendant","focus","cur"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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 */ export const useARIAButtonShorthand = (value, options)=>{\n const shorthand = resolveShorthand(value, 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"],"names":["useARIAButtonShorthand","value","options","shorthand","resolveShorthand","_shorthand_as","shorthandARIAButton","useARIAButtonProps","as"],"mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["useARIAButtonShorthand.js"],"sourcesContent":["import { resolveShorthand } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from './useARIAButtonProps';\n/**\n * @internal\n *\n * @deprecated use useARIAButtonProps instead\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 */ export const useARIAButtonShorthand = (value, options)=>{\n const shorthand = resolveShorthand(value, 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"],"names":["useARIAButtonShorthand","value","options","shorthand","resolveShorthand","_shorthand_as","shorthandARIAButton","useARIAButtonProps","as"],"mappings":";;;;+BAYiBA;;;eAAAA;;;gCAZgB;oCACE;AAWxB,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,MAAMC,YAAYC,IAAAA,gCAAgB,EAACH,OAAOC;IAC1C,IAAIG;IACJ,MAAMC,sBAAsBC,IAAAA,sCAAkB,EAAC,AAACF,CAAAA,gBAAgBF,cAAc,QAAQA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUK,EAAE,AAAD,MAAO,QAAQH,kBAAkB,KAAK,IAAIA,gBAAgB,UAAUF;IACrM,OAAOA,aAAaG;AACxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export {
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { // eslint-disable-next-line deprecation/deprecation\nuseARIAButtonShorthand, useARIAButtonProps } from './button/index';\nexport { useActiveDescendant } from './activedescendant';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant"],"mappings":";;;;;;;;;;;IACAA,sBAAsB;eAAtBA,6BAAsB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IACjCC,mBAAmB;eAAnBA,qCAAmB;;;uBADsB;kCACd"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-aria",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.6.0",
|
|
4
4
|
"description": "React helper to ensure ARIA",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
35
|
-
"@fluentui/react-shared-contexts": "^9.13.
|
|
36
|
-
"@fluentui/react-utilities": "^9.15.
|
|
35
|
+
"@fluentui/react-shared-contexts": "^9.13.2",
|
|
36
|
+
"@fluentui/react-utilities": "^9.15.4",
|
|
37
37
|
"@swc/helpers": "^0.5.1"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|