@fluentui/react-aria 9.15.4 → 9.16.1
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 +26 -2
- package/dist/index.d.ts +3 -2
- package/lib/AriaLiveAnnouncer/AriaLiveAnnouncer.js.map +1 -1
- package/lib/AriaLiveAnnouncer/AriaLiveAnnouncer.types.js.map +1 -1
- package/lib/AriaLiveAnnouncer/index.js.map +1 -1
- package/lib/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js.map +1 -1
- package/lib/AriaLiveAnnouncer/useAriaLiveAnnouncer.js.map +1 -1
- package/lib/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.js.map +1 -1
- package/lib/AriaLiveAnnouncer/useAriaNotifyAnnounce.js.map +1 -1
- package/lib/AriaLiveAnnouncer/useDomAnnounce.js.map +1 -1
- package/lib/activedescendant/ActiveDescendantContext.js.map +1 -1
- package/lib/activedescendant/constants.js.map +1 -1
- package/lib/activedescendant/index.js.map +1 -1
- package/lib/activedescendant/scrollIntoView.js.map +1 -1
- package/lib/activedescendant/types.js.map +1 -1
- package/lib/activedescendant/useActiveDescendant.js.map +1 -1
- package/lib/activedescendant/useOptionWalker.js.map +1 -1
- package/lib/button/index.js.map +1 -1
- package/lib/button/types.js.map +1 -1
- package/lib/button/useARIAButtonProps.js.map +1 -1
- package/lib/button/useARIAButtonShorthand.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/AriaLiveAnnouncer.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/AriaLiveAnnouncer.types.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/index.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/useAriaLiveAnnouncer.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/useAriaNotifyAnnounce.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/useDomAnnounce.js.map +1 -1
- package/lib-commonjs/activedescendant/ActiveDescendantContext.js.map +1 -1
- package/lib-commonjs/activedescendant/constants.js.map +1 -1
- package/lib-commonjs/activedescendant/index.js.map +1 -1
- package/lib-commonjs/activedescendant/scrollIntoView.js.map +1 -1
- package/lib-commonjs/activedescendant/types.js.map +1 -1
- package/lib-commonjs/activedescendant/useActiveDescendant.js.map +1 -1
- package/lib-commonjs/activedescendant/useOptionWalker.js.map +1 -1
- package/lib-commonjs/button/index.js.map +1 -1
- package/lib-commonjs/button/types.js.map +1 -1
- package/lib-commonjs/button/useARIAButtonProps.js.map +1 -1
- package/lib-commonjs/button/useARIAButtonShorthand.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,36 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-aria
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 30 Jul 2025 08:41:07 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.16.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.16.1)
|
|
8
|
+
|
|
9
|
+
Wed, 30 Jul 2025 08:41:07 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.16.0..@fluentui/react-aria_v9.16.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-shared-contexts to v9.24.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.4 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.26.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.23.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.16.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.16.0)
|
|
20
|
+
|
|
21
|
+
Mon, 28 Jul 2025 18:48:17 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.15.4..@fluentui/react-aria_v9.16.0)
|
|
23
|
+
|
|
24
|
+
### Minor changes
|
|
25
|
+
|
|
26
|
+
- feat: replace global JSX.IntrinsicElements with in house alternative to make types compatible across react major versions ([PR #34733](https://github.com/microsoft/fluentui/pull/34733) by martinhochel@microsoft.com)
|
|
27
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
|
28
|
+
- Bump @fluentui/react-tabster to v9.26.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
|
30
|
+
|
|
7
31
|
## [9.15.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.15.4)
|
|
8
32
|
|
|
9
|
-
Thu, 17 Jul 2025 13:
|
|
33
|
+
Thu, 17 Jul 2025 13:49:52 GMT
|
|
10
34
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.15.3..@fluentui/react-aria_v9.15.4)
|
|
11
35
|
|
|
12
36
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
|
|
2
2
|
import type { DistributiveOmit } from '@fluentui/react-utilities';
|
|
3
3
|
import type { ExtractSlotProps } from '@fluentui/react-utilities';
|
|
4
|
+
import type { JSXIntrinsicElement } from '@fluentui/react-utilities';
|
|
4
5
|
import * as React_2 from 'react';
|
|
5
6
|
import type { ResolveShorthandFunction } from '@fluentui/react-utilities';
|
|
6
7
|
import type { Slot } from '@fluentui/react-utilities';
|
|
@@ -63,7 +64,7 @@ export declare interface ActiveDescendantOptions {
|
|
|
63
64
|
* Props that will be modified internally by `useARIAButtonProps` by each case.
|
|
64
65
|
* This typing is to ensure a well specified return value for `useARIAbButtonProps`
|
|
65
66
|
*/
|
|
66
|
-
export declare type ARIAButtonAlteredProps<Type extends ARIAButtonType> = (Type extends 'button' ? Pick<
|
|
67
|
+
export declare type ARIAButtonAlteredProps<Type extends ARIAButtonType> = (Type extends 'button' ? Pick<JSXIntrinsicElement<'button'>, 'onClick' | 'onKeyDown' | 'onKeyUp' | 'disabled' | 'aria-disabled' | 'tabIndex'> : never) | (Type extends 'a' ? Pick<JSXIntrinsicElement<'a'>, 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role' | 'href'> : never) | (Type extends 'div' ? Pick<JSXIntrinsicElement<'div'>, 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role'> : never);
|
|
67
68
|
|
|
68
69
|
export declare type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = HTMLButtonElement | (AlternateAs extends 'a' ? HTMLAnchorElement : never) | (AlternateAs extends 'div' ? HTMLDivElement : never);
|
|
69
70
|
|
|
@@ -75,7 +76,7 @@ export declare type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div
|
|
|
75
76
|
/**
|
|
76
77
|
* Props expected by `useARIAButtonProps` hooks
|
|
77
78
|
*/
|
|
78
|
-
export declare type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = DistributiveOmit<React_2.PropsWithRef<
|
|
79
|
+
export declare type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = DistributiveOmit<React_2.PropsWithRef<JSXIntrinsicElement<Type>>, 'children'> & {
|
|
79
80
|
disabled?: boolean;
|
|
80
81
|
/**
|
|
81
82
|
* When set, allows the button to be focusable even when it has been disabled.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/AriaLiveAnnouncer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\nimport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n\n/**\n * A sample implementation of a component that manages aria live announcements.\n */\nexport const AriaLiveAnnouncer: React.FC<AriaLiveAnnouncerProps> = props => {\n const state = useAriaLiveAnnouncer_unstable(props);\n const contextValues = useAriaLiveAnnouncerContextValues_unstable(state);\n\n return renderAriaLiveAnnouncer_unstable(state, contextValues);\n};\n\nAriaLiveAnnouncer.displayName = 'AriaLiveAnnouncer';\n"],"names":["React","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable","AriaLiveAnnouncer","props","state","contextValues","displayName"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/AriaLiveAnnouncer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\nimport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n\n/**\n * A sample implementation of a component that manages aria live announcements.\n */\nexport const AriaLiveAnnouncer: React.FC<AriaLiveAnnouncerProps> = props => {\n const state = useAriaLiveAnnouncer_unstable(props);\n const contextValues = useAriaLiveAnnouncerContextValues_unstable(state);\n\n return renderAriaLiveAnnouncer_unstable(state, contextValues);\n};\n\nAriaLiveAnnouncer.displayName = 'AriaLiveAnnouncer';\n"],"names":["React","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable","AriaLiveAnnouncer","props","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0CAA0C,QAAQ,sCAAsC;AAEjG;;CAEC,GACD,OAAO,MAAMC,oBAAsDC,CAAAA;IACjE,MAAMC,QAAQJ,8BAA8BG;IAC5C,MAAME,gBAAgBJ,2CAA2CG;IAEjE,OAAOL,iCAAiCK,OAAOC;AACjD,EAAE;AAEFH,kBAAkBI,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/AriaLiveAnnouncer.types.ts"],"sourcesContent":["import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nexport type AriaLiveAnnounceFn = AnnounceContextValue['announce'];\n\nexport type AriaLiveMessage = {\n message: string;\n\n createdAt: number;\n\n priority: number;\n batchId?: string;\n};\n\nexport type AriaLiveAnnouncerProps = {\n children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerState = {\n announce: AriaLiveAnnounceFn;\n children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerContextValues = {\n announce: { announce: AriaLiveAnnounceFn };\n};\n"],"names":["React"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/AriaLiveAnnouncer.types.ts"],"sourcesContent":["import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nexport type AriaLiveAnnounceFn = AnnounceContextValue['announce'];\n\nexport type AriaLiveMessage = {\n message: string;\n\n createdAt: number;\n\n priority: number;\n batchId?: string;\n};\n\nexport type AriaLiveAnnouncerProps = {\n children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerState = {\n announce: AriaLiveAnnounceFn;\n children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerContextValues = {\n announce: { announce: AriaLiveAnnounceFn };\n};\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/index.ts"],"sourcesContent":["export { AriaLiveAnnouncer } from './AriaLiveAnnouncer';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\nexport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n"],"names":["AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/index.ts"],"sourcesContent":["export { AriaLiveAnnouncer } from './AriaLiveAnnouncer';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\nexport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n"],"names":["AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AAExD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0CAA0C,QAAQ,sCAAsC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/renderAriaLiveAnnouncer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AnnounceProvider } from '@fluentui/react-shared-contexts';\n\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport const renderAriaLiveAnnouncer_unstable = (\n state: AriaLiveAnnouncerState,\n contextValues: AriaLiveAnnouncerContextValues,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n return <AnnounceProvider value={contextValues.announce}>{state.children}</AnnounceProvider>;\n};\n"],"names":["React","AnnounceProvider","renderAriaLiveAnnouncer_unstable","state","contextValues","value","announce","children"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/renderAriaLiveAnnouncer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AnnounceProvider } from '@fluentui/react-shared-contexts';\n\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport const renderAriaLiveAnnouncer_unstable = (\n state: AriaLiveAnnouncerState,\n contextValues: AriaLiveAnnouncerContextValues,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n return <AnnounceProvider value={contextValues.announce}>{state.children}</AnnounceProvider>;\n};\n"],"names":["React","AnnounceProvider","renderAriaLiveAnnouncer_unstable","state","contextValues","value","announce","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,kCAAkC;AAInE,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAGA,qBAAO,oBAACH;QAAiBI,OAAOD,cAAcE,QAAQ;OAAGH,MAAMI,QAAQ;AACzE,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaLiveAnnouncer.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useDomAnnounce_unstable } from './useDomAnnounce';\nimport { useAriaNotifyAnnounce_unstable } from './useAriaNotifyAnnounce';\n\nimport type { AriaLiveAnnouncerState, AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\n\nexport const useAriaLiveAnnouncer_unstable = (props: AriaLiveAnnouncerProps): AriaLiveAnnouncerState => {\n const { targetDocument } = useFluent();\n const domAnnounce = useDomAnnounce_unstable();\n const ariaNotifyAnnounce = useAriaNotifyAnnounce_unstable();\n\n const announce = React.useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const supportsAriaNotify = typeof (targetDocument as any)?.ariaNotify === 'function';\n return supportsAriaNotify ? ariaNotifyAnnounce : domAnnounce;\n }, [targetDocument, ariaNotifyAnnounce, domAnnounce]);\n\n return {\n announce,\n children: props.children,\n };\n};\n"],"names":["React","useFluent_unstable","useFluent","useDomAnnounce_unstable","useAriaNotifyAnnounce_unstable","useAriaLiveAnnouncer_unstable","props","targetDocument","domAnnounce","ariaNotifyAnnounce","announce","useMemo","supportsAriaNotify","ariaNotify","children"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaLiveAnnouncer.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useDomAnnounce_unstable } from './useDomAnnounce';\nimport { useAriaNotifyAnnounce_unstable } from './useAriaNotifyAnnounce';\n\nimport type { AriaLiveAnnouncerState, AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\n\nexport const useAriaLiveAnnouncer_unstable = (props: AriaLiveAnnouncerProps): AriaLiveAnnouncerState => {\n const { targetDocument } = useFluent();\n const domAnnounce = useDomAnnounce_unstable();\n const ariaNotifyAnnounce = useAriaNotifyAnnounce_unstable();\n\n const announce = React.useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const supportsAriaNotify = typeof (targetDocument as any)?.ariaNotify === 'function';\n return supportsAriaNotify ? ariaNotifyAnnounce : domAnnounce;\n }, [targetDocument, ariaNotifyAnnounce, domAnnounce]);\n\n return {\n announce,\n children: props.children,\n };\n};\n"],"names":["React","useFluent_unstable","useFluent","useDomAnnounce_unstable","useAriaNotifyAnnounce_unstable","useAriaLiveAnnouncer_unstable","props","targetDocument","domAnnounce","ariaNotifyAnnounce","announce","useMemo","supportsAriaNotify","ariaNotify","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,8BAA8B,QAAQ,0BAA0B;AAIzE,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,cAAc,EAAE,GAAGL;IAC3B,MAAMM,cAAcL;IACpB,MAAMM,qBAAqBL;IAE3B,MAAMM,WAAWV,MAAMW,OAAO,CAAC;QAC7B,8DAA8D;QAC9D,MAAMC,qBAAqB,QAAQL,2BAAAA,qCAAD,AAACA,eAAwBM,UAAU,MAAK;QAC1E,OAAOD,qBAAqBH,qBAAqBD;IACnD,GAAG;QAACD;QAAgBE;QAAoBD;KAAY;IAEpD,OAAO;QACLE;QACAI,UAAUR,MAAMQ,QAAQ;IAC1B;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport function useAriaLiveAnnouncerContextValues_unstable(\n state: AriaLiveAnnouncerState,\n): AriaLiveAnnouncerContextValues {\n const { announce } = state;\n\n return React.useMemo(() => ({ announce: { announce } }), [announce]);\n}\n"],"names":["React","useAriaLiveAnnouncerContextValues_unstable","state","announce","useMemo"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport function useAriaLiveAnnouncerContextValues_unstable(\n state: AriaLiveAnnouncerState,\n): AriaLiveAnnouncerContextValues {\n const { announce } = state;\n\n return React.useMemo(() => ({ announce: { announce } }), [announce]);\n}\n"],"names":["React","useAriaLiveAnnouncerContextValues_unstable","state","announce","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,2CACdC,KAA6B;IAE7B,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,OAAOF,MAAMI,OAAO,CAAC,IAAO,CAAA;YAAED,UAAU;gBAAEA;YAAS;QAAE,CAAA,GAAI;QAACA;KAAS;AACrE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaNotifyAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn } from './AriaLiveAnnouncer.types';\n\ntype AriaNotifyOptions = {\n priority?: 'high' | 'normal';\n};\n\ntype DocumentWithAriaNotify = Document & {\n ariaNotify: (message: string, options: AriaNotifyOptions) => void;\n};\n\n/* INTERNAL: implementation of the announcer using the ariaNotify API */\nexport const useAriaNotifyAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n if (!targetDocument) {\n return;\n }\n\n const { alert = false, polite } = options;\n\n // default priority to 0 if polite, 2 if alert, and 1 by default\n // used to set both ariaNotify's priority and interrupt\n const defaultPriority = polite ? 0 : alert ? 2 : 1;\n const priority = options.priority ?? defaultPriority;\n\n // map fluent announce options to ariaNotify options\n const ariaNotifyOptions: AriaNotifyOptions = {\n priority: priority > 1 ? 'high' : 'normal',\n };\n\n (targetDocument as DocumentWithAriaNotify).ariaNotify(message, ariaNotifyOptions);\n },\n [targetDocument],\n );\n\n return announce;\n};\n"],"names":["useFluent_unstable","useFluent","React","useAriaNotifyAnnounce_unstable","targetDocument","announce","useCallback","message","options","alert","polite","defaultPriority","priority","ariaNotifyOptions","ariaNotify"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaNotifyAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn } from './AriaLiveAnnouncer.types';\n\ntype AriaNotifyOptions = {\n priority?: 'high' | 'normal';\n};\n\ntype DocumentWithAriaNotify = Document & {\n ariaNotify: (message: string, options: AriaNotifyOptions) => void;\n};\n\n/* INTERNAL: implementation of the announcer using the ariaNotify API */\nexport const useAriaNotifyAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n if (!targetDocument) {\n return;\n }\n\n const { alert = false, polite } = options;\n\n // default priority to 0 if polite, 2 if alert, and 1 by default\n // used to set both ariaNotify's priority and interrupt\n const defaultPriority = polite ? 0 : alert ? 2 : 1;\n const priority = options.priority ?? defaultPriority;\n\n // map fluent announce options to ariaNotify options\n const ariaNotifyOptions: AriaNotifyOptions = {\n priority: priority > 1 ? 'high' : 'normal',\n };\n\n (targetDocument as DocumentWithAriaNotify).ariaNotify(message, ariaNotifyOptions);\n },\n [targetDocument],\n );\n\n return announce;\n};\n"],"names":["useFluent_unstable","useFluent","React","useAriaNotifyAnnounce_unstable","targetDocument","announce","useCallback","message","options","alert","polite","defaultPriority","priority","ariaNotifyOptions","ariaNotify"],"mappings":"AAAA,SAASA,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,YAAYC,WAAW,QAAQ;AAY/B,sEAAsE,GACtE,OAAO,MAAMC,iCAAiC;IAC5C,MAAM,EAAEC,cAAc,EAAE,GAAGH;IAE3B,MAAMI,WAA+BH,MAAMI,WAAW,CACpD,CAACC,SAAiBC,UAA2B,CAAC,CAAC;QAC7C,IAAI,CAACJ,gBAAgB;YACnB;QACF;QAEA,MAAM,EAAEK,QAAQ,KAAK,EAAEC,MAAM,EAAE,GAAGF;QAElC,gEAAgE;QAChE,uDAAuD;QACvD,MAAMG,kBAAkBD,SAAS,IAAID,QAAQ,IAAI;YAChCD;QAAjB,MAAMI,WAAWJ,CAAAA,oBAAAA,QAAQI,QAAQ,cAAhBJ,+BAAAA,oBAAoBG;QAErC,oDAAoD;QACpD,MAAME,oBAAuC;YAC3CD,UAAUA,WAAW,IAAI,SAAS;QACpC;QAECR,eAA0CU,UAAU,CAACP,SAASM;IACjE,GACA;QAACT;KAAe;IAGlB,OAAOC;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useDomAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport { useDangerousNeverHidden_unstable as useDangerousNeverHidden } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn, AriaLiveMessage } from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n width: '1px',\n position: 'absolute',\n overflow: 'hidden',\n textWrap: 'nowrap',\n};\n\n/* INTERNAL: implementation of the announcer using a live region element */\nexport const useDomAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const timeoutRef = React.useRef<number | undefined>(undefined);\n const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n const tabsterNeverHiddenAttributes = useDangerousNeverHidden();\n\n const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n const order = React.useRef(0);\n\n // investigate alert implementation later\n // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n const [messageQueue] = React.useState(() =>\n createPriorityQueue<AriaLiveMessage>((a, b) => {\n if (a.priority !== b.priority) {\n return b.priority - a.priority;\n }\n\n return a.createdAt - b.createdAt;\n }),\n );\n\n const queueMessage = React.useCallback(() => {\n if (timeoutRef.current || !elementRef.current) {\n return;\n }\n\n const runCycle = () => {\n if (!elementRef.current) {\n return;\n }\n\n if (targetDocument && messageQueue.peek()) {\n // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n // consistently\n // if this is fixed, we can set textContent to the string directly\n\n const wrappingEl = targetDocument.createElement('span');\n\n wrappingEl.innerText = messageQueue\n .all()\n .filter(msg => msg.message.trim().length > 0)\n .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n elementRef.current.innerText = '';\n elementRef.current.appendChild(wrappingEl);\n\n messageQueue.clear();\n batchMessages.current = [];\n\n // begin new cycle to clear (or update) messages\n timeoutRef.current = setAnnounceTimeout(() => {\n runCycle();\n }, MESSAGE_DURATION);\n } else {\n elementRef.current.textContent = '';\n clearAnnounceTimeout();\n\n timeoutRef.current = undefined;\n }\n };\n\n runCycle();\n }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n const { alert = false, priority = 0, batchId } = options;\n\n // check if message is an alert\n if (alert) {\n // TODO: alert implementation\n // setAlertList([...alertList, message]);\n }\n\n const liveMessage: AriaLiveMessage = {\n message,\n createdAt: order.current++,\n priority,\n batchId,\n };\n\n // check if batchId exists\n if (batchId) {\n // update associated msg if it does\n const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n if (batchMessage) {\n // replace existing message in queue\n messageQueue.remove(batchMessage.message);\n\n // update list of existing batchIds w/ most recent message\n batchMessage.message = liveMessage;\n } else {\n // update list of existing batchIds, add new if doesn't already exist\n batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n }\n }\n\n // add new message\n messageQueue.enqueue(liveMessage);\n queueMessage();\n },\n [messageQueue, queueMessage],\n );\n\n React.useEffect(() => {\n if (!targetDocument) {\n return;\n }\n\n const element = targetDocument.createElement('div');\n element.setAttribute('aria-live', 'assertive');\n\n Object.entries(tabsterNeverHiddenAttributes).forEach(([key, value]) => {\n element.setAttribute(key, value);\n });\n\n Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n targetDocument.body.append(element);\n\n elementRef.current = element;\n\n return () => {\n element.remove();\n elementRef.current = null;\n clearAnnounceTimeout();\n timeoutRef.current = undefined;\n };\n }, [clearAnnounceTimeout, tabsterNeverHiddenAttributes, targetDocument]);\n\n return announce;\n};\n"],"names":["useFluent_unstable","useFluent","createPriorityQueue","useTimeout","useDangerousNeverHidden_unstable","useDangerousNeverHidden","React","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","useDomAnnounce_unstable","targetDocument","timeoutRef","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","tabsterNeverHiddenAttributes","elementRef","order","batchMessages","messageQueue","useState","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","entries","forEach","key","value","assign","style","body","append"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useDomAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport { useDangerousNeverHidden_unstable as useDangerousNeverHidden } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn, AriaLiveMessage } from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n width: '1px',\n position: 'absolute',\n overflow: 'hidden',\n textWrap: 'nowrap',\n};\n\n/* INTERNAL: implementation of the announcer using a live region element */\nexport const useDomAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const timeoutRef = React.useRef<number | undefined>(undefined);\n const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n const tabsterNeverHiddenAttributes = useDangerousNeverHidden();\n\n const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n const order = React.useRef(0);\n\n // investigate alert implementation later\n // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n const [messageQueue] = React.useState(() =>\n createPriorityQueue<AriaLiveMessage>((a, b) => {\n if (a.priority !== b.priority) {\n return b.priority - a.priority;\n }\n\n return a.createdAt - b.createdAt;\n }),\n );\n\n const queueMessage = React.useCallback(() => {\n if (timeoutRef.current || !elementRef.current) {\n return;\n }\n\n const runCycle = () => {\n if (!elementRef.current) {\n return;\n }\n\n if (targetDocument && messageQueue.peek()) {\n // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n // consistently\n // if this is fixed, we can set textContent to the string directly\n\n const wrappingEl = targetDocument.createElement('span');\n\n wrappingEl.innerText = messageQueue\n .all()\n .filter(msg => msg.message.trim().length > 0)\n .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n elementRef.current.innerText = '';\n elementRef.current.appendChild(wrappingEl);\n\n messageQueue.clear();\n batchMessages.current = [];\n\n // begin new cycle to clear (or update) messages\n timeoutRef.current = setAnnounceTimeout(() => {\n runCycle();\n }, MESSAGE_DURATION);\n } else {\n elementRef.current.textContent = '';\n clearAnnounceTimeout();\n\n timeoutRef.current = undefined;\n }\n };\n\n runCycle();\n }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n const { alert = false, priority = 0, batchId } = options;\n\n // check if message is an alert\n if (alert) {\n // TODO: alert implementation\n // setAlertList([...alertList, message]);\n }\n\n const liveMessage: AriaLiveMessage = {\n message,\n createdAt: order.current++,\n priority,\n batchId,\n };\n\n // check if batchId exists\n if (batchId) {\n // update associated msg if it does\n const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n if (batchMessage) {\n // replace existing message in queue\n messageQueue.remove(batchMessage.message);\n\n // update list of existing batchIds w/ most recent message\n batchMessage.message = liveMessage;\n } else {\n // update list of existing batchIds, add new if doesn't already exist\n batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n }\n }\n\n // add new message\n messageQueue.enqueue(liveMessage);\n queueMessage();\n },\n [messageQueue, queueMessage],\n );\n\n React.useEffect(() => {\n if (!targetDocument) {\n return;\n }\n\n const element = targetDocument.createElement('div');\n element.setAttribute('aria-live', 'assertive');\n\n Object.entries(tabsterNeverHiddenAttributes).forEach(([key, value]) => {\n element.setAttribute(key, value);\n });\n\n Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n targetDocument.body.append(element);\n\n elementRef.current = element;\n\n return () => {\n element.remove();\n elementRef.current = null;\n clearAnnounceTimeout();\n timeoutRef.current = undefined;\n };\n }, [clearAnnounceTimeout, tabsterNeverHiddenAttributes, targetDocument]);\n\n return announce;\n};\n"],"names":["useFluent_unstable","useFluent","createPriorityQueue","useTimeout","useDangerousNeverHidden_unstable","useDangerousNeverHidden","React","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","useDomAnnounce_unstable","targetDocument","timeoutRef","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","tabsterNeverHiddenAttributes","elementRef","order","batchMessages","messageQueue","useState","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","entries","forEach","key","value","assign","style","body","append"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/ActiveDescendantContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ActiveDescendantImperativeRef } from './types';\n\nexport type ActiveDescendantContextValue = {\n controller: ActiveDescendantImperativeRef;\n};\n\nconst noop = () => undefined;\n\nconst activeDescendantContextDefaultValue: ActiveDescendantContextValue = {\n controller: {\n active: noop,\n blur: noop,\n find: noop,\n first: noop,\n focus: noop,\n focusLastActive: noop,\n scrollActiveIntoView: noop,\n last: noop,\n next: noop,\n prev: noop,\n showAttributes: noop,\n hideAttributes: noop,\n showFocusVisibleAttributes: noop,\n hideFocusVisibleAttributes: noop,\n },\n};\n\nconst ActiveDescendantContext = React.createContext<ActiveDescendantContextValue | undefined>(undefined);\n\nexport const ActiveDescendantContextProvider = ActiveDescendantContext.Provider;\nexport const useActiveDescendantContext = () =>\n React.useContext(ActiveDescendantContext) ?? activeDescendantContextDefaultValue;\nexport const useHasParentActiveDescendantContext = () => !!React.useContext(ActiveDescendantContext);\n"],"names":["React","noop","undefined","activeDescendantContextDefaultValue","controller","active","blur","find","first","focus","focusLastActive","scrollActiveIntoView","last","next","prev","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","ActiveDescendantContext","createContext","ActiveDescendantContextProvider","Provider","useActiveDescendantContext","useContext","useHasParentActiveDescendantContext"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/ActiveDescendantContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ActiveDescendantImperativeRef } from './types';\n\nexport type ActiveDescendantContextValue = {\n controller: ActiveDescendantImperativeRef;\n};\n\nconst noop = () => undefined;\n\nconst activeDescendantContextDefaultValue: ActiveDescendantContextValue = {\n controller: {\n active: noop,\n blur: noop,\n find: noop,\n first: noop,\n focus: noop,\n focusLastActive: noop,\n scrollActiveIntoView: noop,\n last: noop,\n next: noop,\n prev: noop,\n showAttributes: noop,\n hideAttributes: noop,\n showFocusVisibleAttributes: noop,\n hideFocusVisibleAttributes: noop,\n },\n};\n\nconst ActiveDescendantContext = React.createContext<ActiveDescendantContextValue | undefined>(undefined);\n\nexport const ActiveDescendantContextProvider = ActiveDescendantContext.Provider;\nexport const useActiveDescendantContext = () =>\n React.useContext(ActiveDescendantContext) ?? activeDescendantContextDefaultValue;\nexport const useHasParentActiveDescendantContext = () => !!React.useContext(ActiveDescendantContext);\n"],"names":["React","noop","undefined","activeDescendantContextDefaultValue","controller","active","blur","find","first","focus","focusLastActive","scrollActiveIntoView","last","next","prev","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","ActiveDescendantContext","createContext","ActiveDescendantContextProvider","Provider","useActiveDescendantContext","useContext","useHasParentActiveDescendantContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,MAAMC,OAAO,IAAMC;AAEnB,MAAMC,sCAAoE;IACxEC,YAAY;QACVC,QAAQJ;QACRK,MAAML;QACNM,MAAMN;QACNO,OAAOP;QACPQ,OAAOR;QACPS,iBAAiBT;QACjBU,sBAAsBV;QACtBW,MAAMX;QACNY,MAAMZ;QACNa,MAAMb;QACNc,gBAAgBd;QAChBe,gBAAgBf;QAChBgB,4BAA4BhB;QAC5BiB,4BAA4BjB;IAC9B;AACF;AAEA,MAAMkB,0BAA0BnB,MAAMoB,aAAa,CAA2ClB;AAE9F,OAAO,MAAMmB,kCAAkCF,wBAAwBG,QAAQ,CAAC;AAChF,OAAO,MAAMC,6BAA6B;QACxCvB;WAAAA,CAAAA,oBAAAA,MAAMwB,UAAU,CAACL,sCAAjBnB,+BAAAA,oBAA6CG;EAAoC;AACnF,OAAO,MAAMsB,sCAAsC,IAAM,CAAC,CAACzB,MAAMwB,UAAU,CAACL,yBAAyB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/constants.ts"],"sourcesContent":["/**\n * Applied to the element that is active descendant\n */\nexport const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';\n\n/**\n * Applied to the active descendant when the user is navigating with keyboard\n */\nexport const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = 'data-activedescendant-focusvisible';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/constants.ts"],"sourcesContent":["/**\n * Applied to the element that is active descendant\n */\nexport const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';\n\n/**\n * Applied to the active descendant when the user is navigating with keyboard\n */\nexport const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = 'data-activedescendant-focusvisible';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"mappings":"AAAA;;CAEC,GACD,OAAO,MAAMA,6BAA6B,wBAAwB;AAElE;;CAEC,GACD,OAAO,MAAMC,0CAA0C,qCAAqC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/index.ts"],"sourcesContent":["export type { ActiveDescendantContextValue } from './ActiveDescendantContext';\nexport {\n ActiveDescendantContextProvider,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from './ActiveDescendantContext';\nexport type { ActiveDescendantChangeEvent } from './useActiveDescendant';\nexport { createActiveDescendantChangeEvent, useActiveDescendant } from './useActiveDescendant';\nexport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nexport type {\n ActiveDescendantImperativeRef,\n ActiveDescendantOptions,\n FindOptions,\n IteratorOptions,\n UseActiveDescendantReturn,\n} from './types';\n"],"names":["ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","createActiveDescendantChangeEvent","useActiveDescendant","ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/index.ts"],"sourcesContent":["export type { ActiveDescendantContextValue } from './ActiveDescendantContext';\nexport {\n ActiveDescendantContextProvider,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from './ActiveDescendantContext';\nexport type { ActiveDescendantChangeEvent } from './useActiveDescendant';\nexport { createActiveDescendantChangeEvent, useActiveDescendant } from './useActiveDescendant';\nexport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nexport type {\n ActiveDescendantImperativeRef,\n ActiveDescendantOptions,\n FindOptions,\n IteratorOptions,\n UseActiveDescendantReturn,\n} from './types';\n"],"names":["ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","createActiveDescendantChangeEvent","useActiveDescendant","ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"mappings":"AACA,SACEA,+BAA+B,EAC/BC,0BAA0B,EAC1BC,mCAAmC,QAC9B,4BAA4B;AAEnC,SAASC,iCAAiC,EAAEC,mBAAmB,QAAQ,wBAAwB;AAC/F,SAASC,0BAA0B,EAAEC,uCAAuC,QAAQ,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/scrollIntoView.ts"],"sourcesContent":["export const scrollIntoView = (target: HTMLElement | null | undefined) => {\n if (!target) {\n return;\n }\n\n const scrollParent = findScrollableParent(target.parentElement as HTMLElement);\n if (!scrollParent) {\n return;\n }\n\n const { offsetHeight } = target;\n const offsetTop = getTotalOffsetTop(target, scrollParent);\n\n const { scrollMarginTop, scrollMarginBottom } = getScrollMargins(target);\n\n const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n\n const isAbove = offsetTop - scrollMarginTop < scrollTop;\n const isBelow = offsetTop + offsetHeight + scrollMarginBottom > scrollTop + parentOffsetHeight;\n\n const buffer = 2;\n\n if (isAbove) {\n scrollParent.scrollTo(0, offsetTop - scrollMarginTop - buffer);\n } else if (isBelow) {\n scrollParent.scrollTo(0, offsetTop + offsetHeight + scrollMarginBottom - parentOffsetHeight + buffer);\n }\n};\n\nconst findScrollableParent = (element: HTMLElement | null): HTMLElement | null => {\n if (!element) {\n return null;\n }\n\n if (element.scrollHeight > element.offsetHeight) {\n return element;\n }\n\n return findScrollableParent(element.parentElement);\n};\n\nconst getTotalOffsetTop = (element: HTMLElement, scrollParent: HTMLElement): number => {\n if (!element || element === scrollParent) {\n return 0;\n }\n\n if (element.contains(scrollParent)) {\n // subtract the scroll parent's offset top from the running total if the offsetParent is above it\n return scrollParent.offsetTop * -1;\n }\n\n return element.offsetTop + getTotalOffsetTop(element.offsetParent as HTMLElement, scrollParent);\n};\n\nconst getScrollMargins = (element: HTMLElement) => {\n const win = element.ownerDocument?.defaultView;\n if (!win) {\n return {\n scrollMarginTop: 0,\n scrollMarginBottom: 0,\n };\n }\n\n const computedStyles = win.getComputedStyle(element);\n const scrollMarginTop =\n getIntValueOfComputedStyle(computedStyles.scrollMarginTop) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockStart);\n const scrollMarginBottom =\n getIntValueOfComputedStyle(computedStyles.scrollMarginBottom) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockEnd);\n return {\n scrollMarginTop,\n scrollMarginBottom,\n };\n};\n\nconst getIntValueOfComputedStyle = (computedStyle: string) => {\n return computedStyle ? parseInt(computedStyle, 10) : 0;\n};\n"],"names":["scrollIntoView","target","scrollParent","findScrollableParent","parentElement","offsetHeight","offsetTop","getTotalOffsetTop","scrollMarginTop","scrollMarginBottom","getScrollMargins","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","element","scrollHeight","contains","offsetParent","win","ownerDocument","defaultView","computedStyles","getComputedStyle","getIntValueOfComputedStyle","scrollMarginBlockStart","scrollMarginBlockEnd","computedStyle","parseInt"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/scrollIntoView.ts"],"sourcesContent":["export const scrollIntoView = (target: HTMLElement | null | undefined) => {\n if (!target) {\n return;\n }\n\n const scrollParent = findScrollableParent(target.parentElement as HTMLElement);\n if (!scrollParent) {\n return;\n }\n\n const { offsetHeight } = target;\n const offsetTop = getTotalOffsetTop(target, scrollParent);\n\n const { scrollMarginTop, scrollMarginBottom } = getScrollMargins(target);\n\n const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n\n const isAbove = offsetTop - scrollMarginTop < scrollTop;\n const isBelow = offsetTop + offsetHeight + scrollMarginBottom > scrollTop + parentOffsetHeight;\n\n const buffer = 2;\n\n if (isAbove) {\n scrollParent.scrollTo(0, offsetTop - scrollMarginTop - buffer);\n } else if (isBelow) {\n scrollParent.scrollTo(0, offsetTop + offsetHeight + scrollMarginBottom - parentOffsetHeight + buffer);\n }\n};\n\nconst findScrollableParent = (element: HTMLElement | null): HTMLElement | null => {\n if (!element) {\n return null;\n }\n\n if (element.scrollHeight > element.offsetHeight) {\n return element;\n }\n\n return findScrollableParent(element.parentElement);\n};\n\nconst getTotalOffsetTop = (element: HTMLElement, scrollParent: HTMLElement): number => {\n if (!element || element === scrollParent) {\n return 0;\n }\n\n if (element.contains(scrollParent)) {\n // subtract the scroll parent's offset top from the running total if the offsetParent is above it\n return scrollParent.offsetTop * -1;\n }\n\n return element.offsetTop + getTotalOffsetTop(element.offsetParent as HTMLElement, scrollParent);\n};\n\nconst getScrollMargins = (element: HTMLElement) => {\n const win = element.ownerDocument?.defaultView;\n if (!win) {\n return {\n scrollMarginTop: 0,\n scrollMarginBottom: 0,\n };\n }\n\n const computedStyles = win.getComputedStyle(element);\n const scrollMarginTop =\n getIntValueOfComputedStyle(computedStyles.scrollMarginTop) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockStart);\n const scrollMarginBottom =\n getIntValueOfComputedStyle(computedStyles.scrollMarginBottom) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockEnd);\n return {\n scrollMarginTop,\n scrollMarginBottom,\n };\n};\n\nconst getIntValueOfComputedStyle = (computedStyle: string) => {\n return computedStyle ? parseInt(computedStyle, 10) : 0;\n};\n"],"names":["scrollIntoView","target","scrollParent","findScrollableParent","parentElement","offsetHeight","offsetTop","getTotalOffsetTop","scrollMarginTop","scrollMarginBottom","getScrollMargins","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","element","scrollHeight","contains","offsetParent","win","ownerDocument","defaultView","computedStyles","getComputedStyle","getIntValueOfComputedStyle","scrollMarginBlockStart","scrollMarginBlockEnd","computedStyle","parseInt"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB,CAACC;IAC7B,IAAI,CAACA,QAAQ;QACX;IACF;IAEA,MAAMC,eAAeC,qBAAqBF,OAAOG,aAAa;IAC9D,IAAI,CAACF,cAAc;QACjB;IACF;IAEA,MAAM,EAAEG,YAAY,EAAE,GAAGJ;IACzB,MAAMK,YAAYC,kBAAkBN,QAAQC;IAE5C,MAAM,EAAEM,eAAe,EAAEC,kBAAkB,EAAE,GAAGC,iBAAiBT;IAEjE,MAAM,EAAEI,cAAcM,kBAAkB,EAAEC,SAAS,EAAE,GAAGV;IAExD,MAAMW,UAAUP,YAAYE,kBAAkBI;IAC9C,MAAME,UAAUR,YAAYD,eAAeI,qBAAqBG,YAAYD;IAE5E,MAAMI,SAAS;IAEf,IAAIF,SAAS;QACXX,aAAac,QAAQ,CAAC,GAAGV,YAAYE,kBAAkBO;IACzD,OAAO,IAAID,SAAS;QAClBZ,aAAac,QAAQ,CAAC,GAAGV,YAAYD,eAAeI,qBAAqBE,qBAAqBI;IAChG;AACF,EAAE;AAEF,MAAMZ,uBAAuB,CAACc;IAC5B,IAAI,CAACA,SAAS;QACZ,OAAO;IACT;IAEA,IAAIA,QAAQC,YAAY,GAAGD,QAAQZ,YAAY,EAAE;QAC/C,OAAOY;IACT;IAEA,OAAOd,qBAAqBc,QAAQb,aAAa;AACnD;AAEA,MAAMG,oBAAoB,CAACU,SAAsBf;IAC/C,IAAI,CAACe,WAAWA,YAAYf,cAAc;QACxC,OAAO;IACT;IAEA,IAAIe,QAAQE,QAAQ,CAACjB,eAAe;QAClC,iGAAiG;QACjG,OAAOA,aAAaI,SAAS,GAAG,CAAC;IACnC;IAEA,OAAOW,QAAQX,SAAS,GAAGC,kBAAkBU,QAAQG,YAAY,EAAiBlB;AACpF;AAEA,MAAMQ,mBAAmB,CAACO;QACZA;IAAZ,MAAMI,OAAMJ,yBAAAA,QAAQK,aAAa,cAArBL,6CAAAA,uBAAuBM,WAAW;IAC9C,IAAI,CAACF,KAAK;QACR,OAAO;YACLb,iBAAiB;YACjBC,oBAAoB;QACtB;IACF;IAEA,MAAMe,iBAAiBH,IAAII,gBAAgB,CAACR;QAE1CS;IADF,MAAMlB,kBACJkB,CAAAA,8BAAAA,2BAA2BF,eAAehB,eAAe,eAAzDkB,yCAAAA,8BACAA,2BAA2BF,eAAeG,sBAAsB;QAEhED;IADF,MAAMjB,qBACJiB,CAAAA,+BAAAA,2BAA2BF,eAAef,kBAAkB,eAA5DiB,0CAAAA,+BACAA,2BAA2BF,eAAeI,oBAAoB;IAChE,OAAO;QACLpB;QACAC;IACF;AACF;AAEA,MAAMiB,6BAA6B,CAACG;IAClC,OAAOA,gBAAgBC,SAASD,eAAe,MAAM;AACvD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ActiveDescendantImperativeRef {\n first: (options?: IteratorOptions) => string | undefined;\n last: (options?: IteratorOptions) => string | undefined;\n next: (options?: IteratorOptions) => string | undefined;\n prev: (options?: IteratorOptions) => string | undefined;\n find: (predicate: (id: string) => boolean, options?: IteratorOptions & FindOptions) => string | undefined;\n blur: () => void;\n active: () => string | undefined;\n focus: (id: string) => void;\n /**\n * @deprecated This function is not used internally anymore and will be removed in the future\n */\n focusLastActive: () => void;\n /**\n * Scrolls the active option into view, if it still exists\n */\n scrollActiveIntoView: () => void;\n hideAttributes: () => void;\n showAttributes: () => void;\n hideFocusVisibleAttributes: () => void;\n showFocusVisibleAttributes: () => void;\n}\n\nexport interface ActiveDescendantOptions {\n /**\n * @param el - HTML element to test\n * @returns whether the element can be an active descendant\n */\n matchOption: (el: HTMLElement) => boolean;\n /**\n * Forward imperative refs when exposing functionality from a React component\n */\n imperativeRef?: React.RefObject<ActiveDescendantImperativeRef>;\n}\n\nexport interface FindOptions {\n /**\n * Starts the search from a specific id\n */\n startFrom?: string;\n}\n\nexport interface UseActiveDescendantReturn<\n TActiveParentElement extends HTMLElement = HTMLElement,\n TListboxElement extends HTMLElement = HTMLElement,\n> {\n /**\n * Attach this to the element that contains all active descendants\n */\n listboxRef: React.Ref<TListboxElement>;\n /**\n * Attach this to the element that has an active descendant\n */\n activeParentRef: React.Ref<TActiveParentElement>;\n /**\n * Imperative functions to manage active descendants within the listboxRef\n */\n controller: ActiveDescendantImperativeRef;\n}\n\nexport interface IteratorOptions {\n /**\n * When passive, the active descendant is changed\n * @default false\n */\n passive?: boolean;\n}\n"],"names":["React"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ActiveDescendantImperativeRef {\n first: (options?: IteratorOptions) => string | undefined;\n last: (options?: IteratorOptions) => string | undefined;\n next: (options?: IteratorOptions) => string | undefined;\n prev: (options?: IteratorOptions) => string | undefined;\n find: (predicate: (id: string) => boolean, options?: IteratorOptions & FindOptions) => string | undefined;\n blur: () => void;\n active: () => string | undefined;\n focus: (id: string) => void;\n /**\n * @deprecated This function is not used internally anymore and will be removed in the future\n */\n focusLastActive: () => void;\n /**\n * Scrolls the active option into view, if it still exists\n */\n scrollActiveIntoView: () => void;\n hideAttributes: () => void;\n showAttributes: () => void;\n hideFocusVisibleAttributes: () => void;\n showFocusVisibleAttributes: () => void;\n}\n\nexport interface ActiveDescendantOptions {\n /**\n * @param el - HTML element to test\n * @returns whether the element can be an active descendant\n */\n matchOption: (el: HTMLElement) => boolean;\n /**\n * Forward imperative refs when exposing functionality from a React component\n */\n imperativeRef?: React.RefObject<ActiveDescendantImperativeRef>;\n}\n\nexport interface FindOptions {\n /**\n * Starts the search from a specific id\n */\n startFrom?: string;\n}\n\nexport interface UseActiveDescendantReturn<\n TActiveParentElement extends HTMLElement = HTMLElement,\n TListboxElement extends HTMLElement = HTMLElement,\n> {\n /**\n * Attach this to the element that contains all active descendants\n */\n listboxRef: React.Ref<TListboxElement>;\n /**\n * Attach this to the element that has an active descendant\n */\n activeParentRef: React.Ref<TActiveParentElement>;\n /**\n * Imperative functions to manage active descendants within the listboxRef\n */\n controller: ActiveDescendantImperativeRef;\n}\n\nexport interface IteratorOptions {\n /**\n * When passive, the active descendant is changed\n * @default false\n */\n passive?: boolean;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantImperativeRef, ActiveDescendantOptions, UseActiveDescendantReturn } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nimport { scrollIntoView } from './scrollIntoView';\n\ninterface ActiveDescendantChangeEventDetail {\n id: string;\n previousId: string | null;\n}\n\nexport type ActiveDescendantChangeEvent = CustomEvent<ActiveDescendantChangeEventDetail>;\n\nexport const createActiveDescendantChangeEvent = (\n detail: ActiveDescendantChangeEventDetail,\n): ActiveDescendantChangeEvent =>\n new CustomEvent<ActiveDescendantChangeEventDetail>('activedescendantchange', {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail,\n });\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n options: ActiveDescendantOptions,\n): UseActiveDescendantReturn<TActiveParentElement, TListboxElement> {\n const { imperativeRef, matchOption: matchOptionUnstable } = options;\n const focusVisibleRef = React.useRef(false);\n const shouldShowFocusVisibleAttrRef = React.useRef(true);\n const activeIdRef = React.useRef<string | null>(null);\n const lastActiveIdRef = React.useRef<string | null>(null);\n const activeParentRef = React.useRef<TActiveParentElement>(null);\n const attributeVisibilityRef = React.useRef(true);\n\n const removeAttribute = React.useCallback(() => {\n activeParentRef.current?.removeAttribute('aria-activedescendant');\n }, []);\n\n const setAttribute = React.useCallback((id?: string) => {\n if (id) {\n activeIdRef.current = id;\n }\n if (attributeVisibilityRef.current && activeIdRef.current) {\n activeParentRef.current?.setAttribute('aria-activedescendant', activeIdRef.current);\n }\n }, []);\n\n useOnKeyboardNavigationChange(isNavigatingWithKeyboard => {\n focusVisibleRef.current = isNavigatingWithKeyboard;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (isNavigatingWithKeyboard && shouldShowFocusVisibleAttrRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n });\n\n const matchOption = useEventCallback(matchOptionUnstable);\n const listboxRef = React.useRef<TListboxElement>(null);\n const { optionWalker, listboxCallbackRef } = useOptionWalker<TListboxElement>({ matchOption });\n\n const getActiveDescendant = React.useCallback(() => {\n return listboxRef.current?.querySelector<HTMLElement>(`#${activeIdRef.current}`);\n }, [listboxRef]);\n\n const setShouldShowFocusVisibleAttribute = React.useCallback(\n (shouldShow: boolean) => {\n shouldShowFocusVisibleAttrRef.current = shouldShow;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (shouldShow && focusVisibleRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n },\n [getActiveDescendant],\n );\n\n const blurActiveDescendant = React.useCallback(() => {\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n\n removeAttribute();\n lastActiveIdRef.current = activeIdRef.current;\n activeIdRef.current = null;\n return active?.id ?? null;\n }, [getActiveDescendant, removeAttribute]);\n\n const focusActiveDescendant = React.useCallback(\n (nextActive: HTMLElement | null) => {\n if (!nextActive) {\n return;\n }\n\n const previousActiveId = blurActiveDescendant();\n\n scrollIntoView(nextActive);\n setAttribute(nextActive.id);\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n\n if (focusVisibleRef.current && shouldShowFocusVisibleAttrRef.current) {\n nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n }\n\n const event = createActiveDescendantChangeEvent({ id: nextActive.id, previousId: previousActiveId });\n nextActive.dispatchEvent(event);\n },\n [blurActiveDescendant, setAttribute],\n );\n\n const controller: ActiveDescendantImperativeRef = React.useMemo(\n () => ({\n first: ({ passive } = {}) => {\n const first = optionWalker.first();\n if (!passive) {\n focusActiveDescendant(first);\n }\n\n return first?.id;\n },\n last: ({ passive } = {}) => {\n const last = optionWalker.last();\n if (!passive) {\n focusActiveDescendant(last);\n }\n\n return last?.id;\n },\n next: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n prev: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.prev();\n\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n blur: () => {\n blurActiveDescendant();\n },\n active: () => {\n return getActiveDescendant()?.id;\n },\n focus: (id: string) => {\n if (!listboxRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${id}`);\n if (target) {\n focusActiveDescendant(target);\n }\n },\n focusLastActive: () => {\n if (!listboxRef.current || !lastActiveIdRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${lastActiveIdRef.current}`);\n if (target) {\n focusActiveDescendant(target);\n return true;\n }\n },\n find(predicate, { passive, startFrom } = {}) {\n const target = optionWalker.find(predicate, startFrom);\n if (!passive) {\n focusActiveDescendant(target);\n }\n\n return target?.id;\n },\n scrollActiveIntoView: () => {\n if (!listboxRef.current) {\n return;\n }\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n scrollIntoView(active);\n },\n showAttributes() {\n attributeVisibilityRef.current = true;\n setAttribute();\n },\n hideAttributes() {\n attributeVisibilityRef.current = false;\n removeAttribute();\n },\n showFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(true);\n },\n hideFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(false);\n },\n }),\n [\n optionWalker,\n listboxRef,\n setAttribute,\n removeAttribute,\n focusActiveDescendant,\n blurActiveDescendant,\n getActiveDescendant,\n setShouldShowFocusVisibleAttribute,\n ],\n );\n\n React.useImperativeHandle(imperativeRef, () => controller);\n\n return { listboxRef: useMergedRefs(listboxRef, listboxCallbackRef), activeParentRef, controller };\n}\n"],"names":["React","useEventCallback","useMergedRefs","useOnKeyboardNavigationChange","useOptionWalker","ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","scrollIntoView","createActiveDescendantChangeEvent","detail","CustomEvent","bubbles","cancelable","composed","useActiveDescendant","options","imperativeRef","matchOption","matchOptionUnstable","focusVisibleRef","useRef","shouldShowFocusVisibleAttrRef","activeIdRef","lastActiveIdRef","activeParentRef","attributeVisibilityRef","removeAttribute","useCallback","current","setAttribute","id","isNavigatingWithKeyboard","active","getActiveDescendant","listboxRef","optionWalker","listboxCallbackRef","querySelector","setShouldShowFocusVisibleAttribute","shouldShow","blurActiveDescendant","focusActiveDescendant","nextActive","previousActiveId","event","previousId","dispatchEvent","controller","useMemo","first","passive","last","next","setCurrent","prev","blur","focus","target","focusLastActive","find","predicate","startFrom","scrollActiveIntoView","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","useImperativeHandle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantImperativeRef, ActiveDescendantOptions, UseActiveDescendantReturn } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nimport { scrollIntoView } from './scrollIntoView';\n\ninterface ActiveDescendantChangeEventDetail {\n id: string;\n previousId: string | null;\n}\n\nexport type ActiveDescendantChangeEvent = CustomEvent<ActiveDescendantChangeEventDetail>;\n\nexport const createActiveDescendantChangeEvent = (\n detail: ActiveDescendantChangeEventDetail,\n): ActiveDescendantChangeEvent =>\n new CustomEvent<ActiveDescendantChangeEventDetail>('activedescendantchange', {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail,\n });\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n options: ActiveDescendantOptions,\n): UseActiveDescendantReturn<TActiveParentElement, TListboxElement> {\n const { imperativeRef, matchOption: matchOptionUnstable } = options;\n const focusVisibleRef = React.useRef(false);\n const shouldShowFocusVisibleAttrRef = React.useRef(true);\n const activeIdRef = React.useRef<string | null>(null);\n const lastActiveIdRef = React.useRef<string | null>(null);\n const activeParentRef = React.useRef<TActiveParentElement>(null);\n const attributeVisibilityRef = React.useRef(true);\n\n const removeAttribute = React.useCallback(() => {\n activeParentRef.current?.removeAttribute('aria-activedescendant');\n }, []);\n\n const setAttribute = React.useCallback((id?: string) => {\n if (id) {\n activeIdRef.current = id;\n }\n if (attributeVisibilityRef.current && activeIdRef.current) {\n activeParentRef.current?.setAttribute('aria-activedescendant', activeIdRef.current);\n }\n }, []);\n\n useOnKeyboardNavigationChange(isNavigatingWithKeyboard => {\n focusVisibleRef.current = isNavigatingWithKeyboard;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (isNavigatingWithKeyboard && shouldShowFocusVisibleAttrRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n });\n\n const matchOption = useEventCallback(matchOptionUnstable);\n const listboxRef = React.useRef<TListboxElement>(null);\n const { optionWalker, listboxCallbackRef } = useOptionWalker<TListboxElement>({ matchOption });\n\n const getActiveDescendant = React.useCallback(() => {\n return listboxRef.current?.querySelector<HTMLElement>(`#${activeIdRef.current}`);\n }, [listboxRef]);\n\n const setShouldShowFocusVisibleAttribute = React.useCallback(\n (shouldShow: boolean) => {\n shouldShowFocusVisibleAttrRef.current = shouldShow;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (shouldShow && focusVisibleRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n },\n [getActiveDescendant],\n );\n\n const blurActiveDescendant = React.useCallback(() => {\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n\n removeAttribute();\n lastActiveIdRef.current = activeIdRef.current;\n activeIdRef.current = null;\n return active?.id ?? null;\n }, [getActiveDescendant, removeAttribute]);\n\n const focusActiveDescendant = React.useCallback(\n (nextActive: HTMLElement | null) => {\n if (!nextActive) {\n return;\n }\n\n const previousActiveId = blurActiveDescendant();\n\n scrollIntoView(nextActive);\n setAttribute(nextActive.id);\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n\n if (focusVisibleRef.current && shouldShowFocusVisibleAttrRef.current) {\n nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n }\n\n const event = createActiveDescendantChangeEvent({ id: nextActive.id, previousId: previousActiveId });\n nextActive.dispatchEvent(event);\n },\n [blurActiveDescendant, setAttribute],\n );\n\n const controller: ActiveDescendantImperativeRef = React.useMemo(\n () => ({\n first: ({ passive } = {}) => {\n const first = optionWalker.first();\n if (!passive) {\n focusActiveDescendant(first);\n }\n\n return first?.id;\n },\n last: ({ passive } = {}) => {\n const last = optionWalker.last();\n if (!passive) {\n focusActiveDescendant(last);\n }\n\n return last?.id;\n },\n next: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n prev: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.prev();\n\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n blur: () => {\n blurActiveDescendant();\n },\n active: () => {\n return getActiveDescendant()?.id;\n },\n focus: (id: string) => {\n if (!listboxRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${id}`);\n if (target) {\n focusActiveDescendant(target);\n }\n },\n focusLastActive: () => {\n if (!listboxRef.current || !lastActiveIdRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${lastActiveIdRef.current}`);\n if (target) {\n focusActiveDescendant(target);\n return true;\n }\n },\n find(predicate, { passive, startFrom } = {}) {\n const target = optionWalker.find(predicate, startFrom);\n if (!passive) {\n focusActiveDescendant(target);\n }\n\n return target?.id;\n },\n scrollActiveIntoView: () => {\n if (!listboxRef.current) {\n return;\n }\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n scrollIntoView(active);\n },\n showAttributes() {\n attributeVisibilityRef.current = true;\n setAttribute();\n },\n hideAttributes() {\n attributeVisibilityRef.current = false;\n removeAttribute();\n },\n showFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(true);\n },\n hideFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(false);\n },\n }),\n [\n optionWalker,\n listboxRef,\n setAttribute,\n removeAttribute,\n focusActiveDescendant,\n blurActiveDescendant,\n getActiveDescendant,\n setShouldShowFocusVisibleAttribute,\n ],\n );\n\n React.useImperativeHandle(imperativeRef, () => controller);\n\n return { listboxRef: useMergedRefs(listboxRef, listboxCallbackRef), activeParentRef, controller };\n}\n"],"names":["React","useEventCallback","useMergedRefs","useOnKeyboardNavigationChange","useOptionWalker","ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","scrollIntoView","createActiveDescendantChangeEvent","detail","CustomEvent","bubbles","cancelable","composed","useActiveDescendant","options","imperativeRef","matchOption","matchOptionUnstable","focusVisibleRef","useRef","shouldShowFocusVisibleAttrRef","activeIdRef","lastActiveIdRef","activeParentRef","attributeVisibilityRef","removeAttribute","useCallback","current","setAttribute","id","isNavigatingWithKeyboard","active","getActiveDescendant","listboxRef","optionWalker","listboxCallbackRef","querySelector","setShouldShowFocusVisibleAttribute","shouldShow","blurActiveDescendant","focusActiveDescendant","nextActive","previousActiveId","event","previousId","dispatchEvent","controller","useMemo","first","passive","last","next","setCurrent","prev","blur","focus","target","focusLastActive","find","predicate","startFrom","scrollActiveIntoView","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","useImperativeHandle"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/useOptionWalker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface UseOptionWalkerOptions {\n matchOption: (el: HTMLElement) => boolean;\n}\n\nexport function useOptionWalker<TListboxElement extends HTMLElement>(options: UseOptionWalkerOptions) {\n const { matchOption } = options;\n const { targetDocument } = useFluent();\n const treeWalkerRef = React.useRef<TreeWalker | null>(null);\n const listboxRef = React.useRef<TListboxElement | null>(null);\n\n const optionFilter = React.useCallback(\n (node: Node) => {\n if (isHTMLElement(node) && matchOption(node)) {\n return NodeFilter.FILTER_ACCEPT;\n }\n\n return NodeFilter.FILTER_SKIP;\n },\n [matchOption],\n );\n\n const setListbox = React.useCallback(\n (el: TListboxElement) => {\n if (el && targetDocument) {\n listboxRef.current = el;\n treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, optionFilter);\n } else {\n listboxRef.current = null;\n }\n },\n [targetDocument, optionFilter],\n );\n\n const optionWalker = React.useMemo(\n () => ({\n first: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.firstChild() as HTMLElement | null;\n },\n last: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.lastChild() as HTMLElement | null;\n },\n next: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.nextNode() as HTMLElement | null;\n },\n prev: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.previousNode() as HTMLElement | null;\n },\n find: (predicate: (id: string) => boolean, startFrom?: string) => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n const start = startFrom ? targetDocument?.getElementById(startFrom) : null;\n treeWalkerRef.current.currentNode = start ?? listboxRef.current;\n let cur: HTMLElement | null = treeWalkerRef.current.currentNode as HTMLElement;\n while (cur && !predicate(cur.id)) {\n cur = treeWalkerRef.current.nextNode() as HTMLElement | null;\n }\n\n return cur;\n },\n setCurrent: (el: HTMLElement) => {\n if (!treeWalkerRef.current) {\n return;\n }\n\n treeWalkerRef.current.currentNode = el;\n },\n }),\n [targetDocument],\n );\n\n return {\n optionWalker,\n listboxCallbackRef: setListbox,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useOptionWalker","options","matchOption","targetDocument","treeWalkerRef","useRef","listboxRef","optionFilter","useCallback","node","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","setListbox","el","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","currentNode","firstChild","last","lastChild","next","nextNode","prev","previousNode","find","predicate","startFrom","start","getElementById","cur","id","setCurrent","listboxCallbackRef"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/useOptionWalker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface UseOptionWalkerOptions {\n matchOption: (el: HTMLElement) => boolean;\n}\n\nexport function useOptionWalker<TListboxElement extends HTMLElement>(options: UseOptionWalkerOptions) {\n const { matchOption } = options;\n const { targetDocument } = useFluent();\n const treeWalkerRef = React.useRef<TreeWalker | null>(null);\n const listboxRef = React.useRef<TListboxElement | null>(null);\n\n const optionFilter = React.useCallback(\n (node: Node) => {\n if (isHTMLElement(node) && matchOption(node)) {\n return NodeFilter.FILTER_ACCEPT;\n }\n\n return NodeFilter.FILTER_SKIP;\n },\n [matchOption],\n );\n\n const setListbox = React.useCallback(\n (el: TListboxElement) => {\n if (el && targetDocument) {\n listboxRef.current = el;\n treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, optionFilter);\n } else {\n listboxRef.current = null;\n }\n },\n [targetDocument, optionFilter],\n );\n\n const optionWalker = React.useMemo(\n () => ({\n first: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.firstChild() as HTMLElement | null;\n },\n last: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.lastChild() as HTMLElement | null;\n },\n next: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.nextNode() as HTMLElement | null;\n },\n prev: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.previousNode() as HTMLElement | null;\n },\n find: (predicate: (id: string) => boolean, startFrom?: string) => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n const start = startFrom ? targetDocument?.getElementById(startFrom) : null;\n treeWalkerRef.current.currentNode = start ?? listboxRef.current;\n let cur: HTMLElement | null = treeWalkerRef.current.currentNode as HTMLElement;\n while (cur && !predicate(cur.id)) {\n cur = treeWalkerRef.current.nextNode() as HTMLElement | null;\n }\n\n return cur;\n },\n setCurrent: (el: HTMLElement) => {\n if (!treeWalkerRef.current) {\n return;\n }\n\n treeWalkerRef.current.currentNode = el;\n },\n }),\n [targetDocument],\n );\n\n return {\n optionWalker,\n listboxCallbackRef: setListbox,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useOptionWalker","options","matchOption","targetDocument","treeWalkerRef","useRef","listboxRef","optionFilter","useCallback","node","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","setListbox","el","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","currentNode","firstChild","last","lastChild","next","nextNode","prev","previousNode","find","predicate","startFrom","start","getElementById","cur","id","setCurrent","listboxCallbackRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,4BAA4B;AAM1D,OAAO,SAASC,gBAAqDC,OAA+B;IAClG,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAM,EAAEE,cAAc,EAAE,GAAGL;IAC3B,MAAMM,gBAAgBR,MAAMS,MAAM,CAAoB;IACtD,MAAMC,aAAaV,MAAMS,MAAM,CAAyB;IAExD,MAAME,eAAeX,MAAMY,WAAW,CACpC,CAACC;QACC,IAAIV,cAAcU,SAASP,YAAYO,OAAO;YAC5C,OAAOC,WAAWC,aAAa;QACjC;QAEA,OAAOD,WAAWE,WAAW;IAC/B,GACA;QAACV;KAAY;IAGf,MAAMW,aAAajB,MAAMY,WAAW,CAClC,CAACM;QACC,IAAIA,MAAMX,gBAAgB;YACxBG,WAAWS,OAAO,GAAGD;YACrBV,cAAcW,OAAO,GAAGZ,eAAea,gBAAgB,CAACF,IAAIJ,WAAWO,YAAY,EAAEV;QACvF,OAAO;YACLD,WAAWS,OAAO,GAAG;QACvB;IACF,GACA;QAACZ;QAAgBI;KAAa;IAGhC,MAAMW,eAAetB,MAAMuB,OAAO,CAChC,IAAO,CAAA;YACLC,OAAO;gBACL,IAAI,CAAChB,cAAcW,OAAO,IAAI,CAACT,WAAWS,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEAX,cAAcW,OAAO,CAACM,WAAW,GAAGf,WAAWS,OAAO;gBACtD,OAAOX,cAAcW,OAAO,CAACO,UAAU;YACzC;YACAC,MAAM;gBACJ,IAAI,CAACnB,cAAcW,OAAO,IAAI,CAACT,WAAWS,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEAX,cAAcW,OAAO,CAACM,WAAW,GAAGf,WAAWS,OAAO;gBACtD,OAAOX,cAAcW,OAAO,CAACS,SAAS;YACxC;YACAC,MAAM;gBACJ,IAAI,CAACrB,cAAcW,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOX,cAAcW,OAAO,CAACW,QAAQ;YACvC;YACAC,MAAM;gBACJ,IAAI,CAACvB,cAAcW,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOX,cAAcW,OAAO,CAACa,YAAY;YAC3C;YACAC,MAAM,CAACC,WAAoCC;gBACzC,IAAI,CAAC3B,cAAcW,OAAO,IAAI,CAACT,WAAWS,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEA,MAAMiB,QAAQD,YAAY5B,2BAAAA,qCAAAA,eAAgB8B,cAAc,CAACF,aAAa;gBACtE3B,cAAcW,OAAO,CAACM,WAAW,GAAGW,kBAAAA,mBAAAA,QAAS1B,WAAWS,OAAO;gBAC/D,IAAImB,MAA0B9B,cAAcW,OAAO,CAACM,WAAW;gBAC/D,MAAOa,OAAO,CAACJ,UAAUI,IAAIC,EAAE,EAAG;oBAChCD,MAAM9B,cAAcW,OAAO,CAACW,QAAQ;gBACtC;gBAEA,OAAOQ;YACT;YACAE,YAAY,CAACtB;gBACX,IAAI,CAACV,cAAcW,OAAO,EAAE;oBAC1B;gBACF;gBAEAX,cAAcW,OAAO,CAACM,WAAW,GAAGP;YACtC;QACF,CAAA,GACA;QAACX;KAAe;IAGlB,OAAO;QACLe;QACAmB,oBAAoBxB;IACtB;AACF"}
|
package/lib/button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button/index.ts"],"sourcesContent":["export { useARIAButtonProps } from './useARIAButtonProps';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { useARIAButtonShorthand } from './useARIAButtonShorthand';\nexport type {\n ARIAButtonAlteredProps,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonSlotProps,\n ARIAButtonType,\n} from './types';\n"],"names":["useARIAButtonProps","useARIAButtonShorthand"],"
|
|
1
|
+
{"version":3,"sources":["../src/button/index.ts"],"sourcesContent":["export { useARIAButtonProps } from './useARIAButtonProps';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { useARIAButtonShorthand } from './useARIAButtonShorthand';\nexport type {\n ARIAButtonAlteredProps,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonSlotProps,\n ARIAButtonType,\n} from './types';\n"],"names":["useARIAButtonProps","useARIAButtonShorthand"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAC1D,4DAA4D;AAC5D,SAASC,sBAAsB,QAAQ,2BAA2B"}
|
package/lib/button/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button/types.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"sources":["../src/button/types.ts"],"sourcesContent":["import type {\n DistributiveOmit,\n ExtractSlotProps,\n Slot,\n UnionToIntersection,\n JSXIntrinsicElement,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\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> = DistributiveOmit<\n React.PropsWithRef<JSXIntrinsicElement<Type>>,\n 'children'\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 JSXIntrinsicElement<'button'>,\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'disabled' | 'aria-disabled' | 'tabIndex'\n >\n : never)\n | (Type extends 'a'\n ? Pick<\n JSXIntrinsicElement<'a'>,\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role' | 'href'\n >\n : never)\n | (Type extends 'div'\n ? Pick<JSXIntrinsicElement<'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"],"names":["React"],"mappings":"AAOA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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 // the role needs to be explicitly set if the href is undefined\n const isLink = !!(rest as ARIAButtonResultProps<'a', Props>).href;\n let roleOverride = isLink ? undefined : 'button';\n if (!roleOverride && isDisabled) {\n // need to set role=link explicitly for disabled links\n roleOverride = 'link';\n }\n\n const resultProps = {\n role: roleOverride,\n tabIndex: disabledFocusable || (!isLink && !disabled) ? 0 : undefined,\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': isDisabled,\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"],"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","isLink","href","roleOverride","resultProps","role","tabIndex"],"
|
|
1
|
+
{"version":3,"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 // the role needs to be explicitly set if the href is undefined\n const isLink = !!(rest as ARIAButtonResultProps<'a', Props>).href;\n let roleOverride = isLink ? undefined : 'button';\n if (!roleOverride && isDisabled) {\n // need to set role=link explicitly for disabled links\n roleOverride = 'link';\n }\n\n const resultProps = {\n role: roleOverride,\n tabIndex: disabledFocusable || (!isLink && !disabled) ? 0 : undefined,\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': isDisabled,\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"],"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","isLink","href","roleOverride","resultProps","role","tabIndex"],"mappings":"AAAA,SAASA,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,YAAYC,WAAW,QAAQ;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASC,mBACdC,IAAW,EACXC,KAAa;IAEb,MAAM,EACJC,QAAQ,EACRC,oBAAoB,KAAK,EACzB,CAAC,gBAAgB,EAAEC,YAAY,EAC/BC,OAAO,EACPC,SAAS,EACTC,OAAO,EACP,GAAGC,MACJ,GAAGP,kBAAAA,mBAAAA,QAAS,CAAC;IAEd,MAAMQ,yBAAyB,OAAOL,iBAAiB,WAAWA,iBAAiB,SAASA;IAE5F,MAAMM,aAAaR,YAAYC,qBAAqBM;IAEpD,MAAME,cAAcd,iBAAiB,CAACe;QACpC,IAAIF,YAAY;YACdE,GAAGC,cAAc;YACjBD,GAAGE,eAAe;QACpB,OAAO;YACLT,oBAAAA,8BAAAA,QAAUO;QACZ;IACF;IAEA,MAAMG,gBAAgBlB,iBAAiB,CAACe;QACtCN,sBAAAA,gCAAAA,UAAYM;QAEZ,IAAIA,GAAGI,kBAAkB,IAAI;YAC3B;QACF;QAEA,MAAMC,MAAML,GAAGK,GAAG;QAElB,IAAIP,cAAeO,CAAAA,QAAQtB,SAASsB,QAAQrB,KAAI,GAAI;YAClDgB,GAAGC,cAAc;YACjBD,GAAGE,eAAe;YAClB;QACF;QAEA,IAAIG,QAAQrB,OAAO;YACjBgB,GAAGC,cAAc;YACjB;QACF,OAGK,IAAII,QAAQtB,OAAO;YACtBiB,GAAGC,cAAc;YACjBD,GAAGM,aAAa,CAACC,KAAK;QACxB;IACF;IAEA,MAAMC,cAAcvB,iBAAiB,CAACe;QACpCL,oBAAAA,8BAAAA,QAAUK;QAEV,IAAIA,GAAGI,kBAAkB,IAAI;YAC3B;QACF;QAEA,MAAMC,MAAML,GAAGK,GAAG;QAElB,IAAIP,cAAeO,CAAAA,QAAQtB,SAASsB,QAAQrB,KAAI,GAAI;YAClDgB,GAAGC,cAAc;YACjBD,GAAGE,eAAe;YAClB;QACF;QAEA,IAAIG,QAAQrB,OAAO;YACjBgB,GAAGC,cAAc;YACjBD,GAAGM,aAAa,CAACC,KAAK;QACxB;IACF;IAEA,+FAA+F;IAC/F,IAAInB,SAAS,YAAYA,SAASqB,WAAW;QAC3C,OAAO;YACL,GAAGb,IAAI;YACPN,UAAUA,YAAY,CAACC;YACvB,iBAAiBA,oBAAoB,OAAOM;YAC5C,6EAA6E;YAC7E,yGAAyG;YACzGJ,SAASF,oBAAoBkB,YAAYV;YACzCJ,SAASJ,oBAAoBkB,YAAYd;YACzCD,WAAWH,oBAAoBkB,YAAYf;QAC7C;IACF,OAIK;QACH,+DAA+D;QAC/D,MAAMgB,SAAS,CAAC,CAAC,AAACd,KAA2Ce,IAAI;QACjE,IAAIC,eAAeF,SAASD,YAAY;QACxC,IAAI,CAACG,gBAAgBd,YAAY;YAC/B,sDAAsD;YACtDc,eAAe;QACjB;QAEA,MAAMC,cAAc;YAClBC,MAAMF;YACNG,UAAUxB,qBAAsB,CAACmB,UAAU,CAACpB,WAAY,IAAImB;YAC5D,GAAGb,IAAI;YACP,iFAAiF;YACjF,8DAA8D;YAC9D,kCAAkC;YAClCH,SAASM;YACTJ,SAASa;YACTd,WAAWS;YACX,iBAAiBL;QACnB;QAEA,IAAIV,SAAS,OAAOU,YAAY;YAC7Be,YAAkDF,IAAI,GAAGF;QAC5D;QAEA,OAAOI;IACT;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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 * @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 = ((value, options) => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const shorthand = resolveShorthand(value, options);\n const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);\n return shorthand && shorthandARIAButton;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n}) as ResolveShorthandFunction<ARIAButtonSlotProps>;\n"],"names":["resolveShorthand","useARIAButtonProps","useARIAButtonShorthand","value","options","shorthand","shorthandARIAButton","as"],"
|
|
1
|
+
{"version":3,"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 * @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 = ((value, options) => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const shorthand = resolveShorthand(value, options);\n const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);\n return shorthand && shorthandARIAButton;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n}) as ResolveShorthandFunction<ARIAButtonSlotProps>;\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,yBAA0B,CAACC,OAAOC;IAC7C,4DAA4D;IAC5D,MAAMC,YAAYL,iBAAiBG,OAAOC;QACsCC;IAAhF,MAAMC,sBAAsBL,mBAAoDI,CAAAA,gBAAAA,sBAAAA,gCAAAA,UAAWE,EAAE,cAAbF,2BAAAA,gBAAiB,UAAUA;IAC3G,OAAOA,aAAaC;AACpB,4DAA4D;AAC9D,EAAoD"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n useARIAButtonShorthand,\n useARIAButtonProps,\n} from './button/index';\nexport {\n useActiveDescendant,\n ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE,\n ActiveDescendantContextProvider,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from './activedescendant';\nexport type {\n ActiveDescendantImperativeRef,\n ActiveDescendantOptions,\n ActiveDescendantContextValue,\n ActiveDescendantChangeEvent,\n} from './activedescendant';\nexport type {\n ARIAButtonSlotProps,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonType,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonAlteredProps,\n} from './button/index';\n\nexport {\n AriaLiveAnnouncer,\n renderAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncerContextValues_unstable,\n} from './AriaLiveAnnouncer/index';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n useARIAButtonShorthand,\n useARIAButtonProps,\n} from './button/index';\nexport {\n useActiveDescendant,\n ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE,\n ActiveDescendantContextProvider,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from './activedescendant';\nexport type {\n ActiveDescendantImperativeRef,\n ActiveDescendantOptions,\n ActiveDescendantContextValue,\n ActiveDescendantChangeEvent,\n} from './activedescendant';\nexport type {\n ARIAButtonSlotProps,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonType,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonAlteredProps,\n} from './button/index';\n\nexport {\n AriaLiveAnnouncer,\n renderAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncerContextValues_unstable,\n} from './AriaLiveAnnouncer/index';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":"AAAA,SACE,4DAA4D;AAC5DA,sBAAsB,EACtBC,kBAAkB,QACb,iBAAiB;AACxB,SACEC,mBAAmB,EACnBC,uCAAuC,EACvCC,+BAA+B,EAC/BC,0BAA0B,EAC1BC,mCAAmC,QAC9B,qBAAqB;AAiB5B,SACEC,iBAAiB,EACjBC,gCAAgC,EAChCC,6BAA6B,EAC7BC,0CAA0C,QACrC,4BAA4B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/AriaLiveAnnouncer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\nimport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n\n/**\n * A sample implementation of a component that manages aria live announcements.\n */\nexport const AriaLiveAnnouncer: React.FC<AriaLiveAnnouncerProps> = props => {\n const state = useAriaLiveAnnouncer_unstable(props);\n const contextValues = useAriaLiveAnnouncerContextValues_unstable(state);\n\n return renderAriaLiveAnnouncer_unstable(state, contextValues);\n};\n\nAriaLiveAnnouncer.displayName = 'AriaLiveAnnouncer';\n"],"names":["AriaLiveAnnouncer","props","state","useAriaLiveAnnouncer_unstable","contextValues","useAriaLiveAnnouncerContextValues_unstable","renderAriaLiveAnnouncer_unstable","displayName"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/AriaLiveAnnouncer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\nimport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n\n/**\n * A sample implementation of a component that manages aria live announcements.\n */\nexport const AriaLiveAnnouncer: React.FC<AriaLiveAnnouncerProps> = props => {\n const state = useAriaLiveAnnouncer_unstable(props);\n const contextValues = useAriaLiveAnnouncerContextValues_unstable(state);\n\n return renderAriaLiveAnnouncer_unstable(state, contextValues);\n};\n\nAriaLiveAnnouncer.displayName = 'AriaLiveAnnouncer';\n"],"names":["AriaLiveAnnouncer","props","state","useAriaLiveAnnouncer_unstable","contextValues","useAriaLiveAnnouncerContextValues_unstable","renderAriaLiveAnnouncer_unstable","displayName"],"mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;yCAG0B;sCACH;mDACa;AAKpD,MAAMA,oBAAsDC,CAAAA;IACjE,MAAMC,QAAQC,IAAAA,mDAA6B,EAACF;IAC5C,MAAMG,gBAAgBC,IAAAA,6EAA0C,EAACH;IAEjE,OAAOI,IAAAA,yDAAgC,EAACJ,OAAOE;AACjD;AAEAJ,kBAAkBO,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/AriaLiveAnnouncer.types.ts"],"sourcesContent":["import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nexport type AriaLiveAnnounceFn = AnnounceContextValue['announce'];\n\nexport type AriaLiveMessage = {\n message: string;\n\n createdAt: number;\n\n priority: number;\n batchId?: string;\n};\n\nexport type AriaLiveAnnouncerProps = {\n children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerState = {\n announce: AriaLiveAnnounceFn;\n children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerContextValues = {\n announce: { announce: AriaLiveAnnounceFn };\n};\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/AriaLiveAnnouncer.types.ts"],"sourcesContent":["import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nexport type AriaLiveAnnounceFn = AnnounceContextValue['announce'];\n\nexport type AriaLiveMessage = {\n message: string;\n\n createdAt: number;\n\n priority: number;\n batchId?: string;\n};\n\nexport type AriaLiveAnnouncerProps = {\n children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerState = {\n announce: AriaLiveAnnounceFn;\n children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerContextValues = {\n announce: { announce: AriaLiveAnnounceFn };\n};\n"],"names":[],"mappings":";;;;;iEACuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/index.ts"],"sourcesContent":["export { AriaLiveAnnouncer } from './AriaLiveAnnouncer';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\nexport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n"],"names":["AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable","useAriaLiveAnnouncer_unstable"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/index.ts"],"sourcesContent":["export { AriaLiveAnnouncer } from './AriaLiveAnnouncer';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\nexport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n"],"names":["AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable","useAriaLiveAnnouncer_unstable"],"mappings":";;;;;;;;;;;IAASA,iBAAiB;eAAjBA,oCAAiB;;IAEjBC,gCAAgC;eAAhCA,yDAAgC;;IAEhCC,0CAA0C;eAA1CA,6EAA0C;;IAD1CC,6BAA6B;eAA7BA,mDAA6B;;;mCAHJ;yCAEe;sCACH;mDACa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/renderAriaLiveAnnouncer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AnnounceProvider } from '@fluentui/react-shared-contexts';\n\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport const renderAriaLiveAnnouncer_unstable = (\n state: AriaLiveAnnouncerState,\n contextValues: AriaLiveAnnouncerContextValues,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n return <AnnounceProvider value={contextValues.announce}>{state.children}</AnnounceProvider>;\n};\n"],"names":["renderAriaLiveAnnouncer_unstable","state","contextValues","AnnounceProvider","value","announce","children"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/renderAriaLiveAnnouncer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AnnounceProvider } from '@fluentui/react-shared-contexts';\n\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport const renderAriaLiveAnnouncer_unstable = (\n state: AriaLiveAnnouncerState,\n contextValues: AriaLiveAnnouncerContextValues,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n return <AnnounceProvider value={contextValues.announce}>{state.children}</AnnounceProvider>;\n};\n"],"names":["renderAriaLiveAnnouncer_unstable","state","contextValues","AnnounceProvider","value","announce","children"],"mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;qCACU;AAI1B,MAAMA,mCAAmC,CAC9CC,OACAC;IAGA,qBAAO,qBAACC,qCAAgB;QAACC,OAAOF,cAAcG,QAAQ;OAAGJ,MAAMK,QAAQ;AACzE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaLiveAnnouncer.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useDomAnnounce_unstable } from './useDomAnnounce';\nimport { useAriaNotifyAnnounce_unstable } from './useAriaNotifyAnnounce';\n\nimport type { AriaLiveAnnouncerState, AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\n\nexport const useAriaLiveAnnouncer_unstable = (props: AriaLiveAnnouncerProps): AriaLiveAnnouncerState => {\n const { targetDocument } = useFluent();\n const domAnnounce = useDomAnnounce_unstable();\n const ariaNotifyAnnounce = useAriaNotifyAnnounce_unstable();\n\n const announce = React.useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const supportsAriaNotify = typeof (targetDocument as any)?.ariaNotify === 'function';\n return supportsAriaNotify ? ariaNotifyAnnounce : domAnnounce;\n }, [targetDocument, ariaNotifyAnnounce, domAnnounce]);\n\n return {\n announce,\n children: props.children,\n };\n};\n"],"names":["useAriaLiveAnnouncer_unstable","props","targetDocument","useFluent","domAnnounce","useDomAnnounce_unstable","ariaNotifyAnnounce","useAriaNotifyAnnounce_unstable","announce","React","useMemo","supportsAriaNotify","ariaNotify","children"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaLiveAnnouncer.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useDomAnnounce_unstable } from './useDomAnnounce';\nimport { useAriaNotifyAnnounce_unstable } from './useAriaNotifyAnnounce';\n\nimport type { AriaLiveAnnouncerState, AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\n\nexport const useAriaLiveAnnouncer_unstable = (props: AriaLiveAnnouncerProps): AriaLiveAnnouncerState => {\n const { targetDocument } = useFluent();\n const domAnnounce = useDomAnnounce_unstable();\n const ariaNotifyAnnounce = useAriaNotifyAnnounce_unstable();\n\n const announce = React.useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const supportsAriaNotify = typeof (targetDocument as any)?.ariaNotify === 'function';\n return supportsAriaNotify ? ariaNotifyAnnounce : domAnnounce;\n }, [targetDocument, ariaNotifyAnnounce, domAnnounce]);\n\n return {\n announce,\n children: props.children,\n };\n};\n"],"names":["useAriaLiveAnnouncer_unstable","props","targetDocument","useFluent","domAnnounce","useDomAnnounce_unstable","ariaNotifyAnnounce","useAriaNotifyAnnounce_unstable","announce","React","useMemo","supportsAriaNotify","ariaNotify","children"],"mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;qCACyB;gCACR;uCACO;AAIxC,MAAMA,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,cAAcC,IAAAA,uCAAuB;IAC3C,MAAMC,qBAAqBC,IAAAA,qDAA8B;IAEzD,MAAMC,WAAWC,OAAMC,OAAO,CAAC;QAC7B,8DAA8D;QAC9D,MAAMC,qBAAqB,QAAQT,2BAAAA,qCAAD,AAACA,eAAwBU,UAAU,MAAK;QAC1E,OAAOD,qBAAqBL,qBAAqBF;IACnD,GAAG;QAACF;QAAgBI;QAAoBF;KAAY;IAEpD,OAAO;QACLI;QACAK,UAAUZ,MAAMY,QAAQ;IAC1B;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport function useAriaLiveAnnouncerContextValues_unstable(\n state: AriaLiveAnnouncerState,\n): AriaLiveAnnouncerContextValues {\n const { announce } = state;\n\n return React.useMemo(() => ({ announce: { announce } }), [announce]);\n}\n"],"names":["useAriaLiveAnnouncerContextValues_unstable","state","announce","React","useMemo"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport function useAriaLiveAnnouncerContextValues_unstable(\n state: AriaLiveAnnouncerState,\n): AriaLiveAnnouncerContextValues {\n const { announce } = state;\n\n return React.useMemo(() => ({ announce: { announce } }), [announce]);\n}\n"],"names":["useAriaLiveAnnouncerContextValues_unstable","state","announce","React","useMemo"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,2CACdC,KAA6B;IAE7B,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,OAAOE,OAAMC,OAAO,CAAC,IAAO,CAAA;YAAEF,UAAU;gBAAEA;YAAS;QAAE,CAAA,GAAI;QAACA;KAAS;AACrE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaNotifyAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn } from './AriaLiveAnnouncer.types';\n\ntype AriaNotifyOptions = {\n priority?: 'high' | 'normal';\n};\n\ntype DocumentWithAriaNotify = Document & {\n ariaNotify: (message: string, options: AriaNotifyOptions) => void;\n};\n\n/* INTERNAL: implementation of the announcer using the ariaNotify API */\nexport const useAriaNotifyAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n if (!targetDocument) {\n return;\n }\n\n const { alert = false, polite } = options;\n\n // default priority to 0 if polite, 2 if alert, and 1 by default\n // used to set both ariaNotify's priority and interrupt\n const defaultPriority = polite ? 0 : alert ? 2 : 1;\n const priority = options.priority ?? defaultPriority;\n\n // map fluent announce options to ariaNotify options\n const ariaNotifyOptions: AriaNotifyOptions = {\n priority: priority > 1 ? 'high' : 'normal',\n };\n\n (targetDocument as DocumentWithAriaNotify).ariaNotify(message, ariaNotifyOptions);\n },\n [targetDocument],\n );\n\n return announce;\n};\n"],"names":["useAriaNotifyAnnounce_unstable","targetDocument","useFluent","announce","React","useCallback","message","options","alert","polite","defaultPriority","priority","ariaNotifyOptions","ariaNotify"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useAriaNotifyAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn } from './AriaLiveAnnouncer.types';\n\ntype AriaNotifyOptions = {\n priority?: 'high' | 'normal';\n};\n\ntype DocumentWithAriaNotify = Document & {\n ariaNotify: (message: string, options: AriaNotifyOptions) => void;\n};\n\n/* INTERNAL: implementation of the announcer using the ariaNotify API */\nexport const useAriaNotifyAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n if (!targetDocument) {\n return;\n }\n\n const { alert = false, polite } = options;\n\n // default priority to 0 if polite, 2 if alert, and 1 by default\n // used to set both ariaNotify's priority and interrupt\n const defaultPriority = polite ? 0 : alert ? 2 : 1;\n const priority = options.priority ?? defaultPriority;\n\n // map fluent announce options to ariaNotify options\n const ariaNotifyOptions: AriaNotifyOptions = {\n priority: priority > 1 ? 'high' : 'normal',\n };\n\n (targetDocument as DocumentWithAriaNotify).ariaNotify(message, ariaNotifyOptions);\n },\n [targetDocument],\n );\n\n return announce;\n};\n"],"names":["useAriaNotifyAnnounce_unstable","targetDocument","useFluent","announce","React","useCallback","message","options","alert","polite","defaultPriority","priority","ariaNotifyOptions","ariaNotify"],"mappings":";;;;+BAeaA;;;eAAAA;;;;qCAfmC;iEAEzB;AAahB,MAAMA,iCAAiC;IAC5C,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IAEpC,MAAMC,WAA+BC,OAAMC,WAAW,CACpD,CAACC,SAAiBC,UAA2B,CAAC,CAAC;QAC7C,IAAI,CAACN,gBAAgB;YACnB;QACF;QAEA,MAAM,EAAEO,QAAQ,KAAK,EAAEC,MAAM,EAAE,GAAGF;QAElC,gEAAgE;QAChE,uDAAuD;QACvD,MAAMG,kBAAkBD,SAAS,IAAID,QAAQ,IAAI;YAChCD;QAAjB,MAAMI,WAAWJ,CAAAA,oBAAAA,QAAQI,QAAQ,cAAhBJ,+BAAAA,oBAAoBG;QAErC,oDAAoD;QACpD,MAAME,oBAAuC;YAC3CD,UAAUA,WAAW,IAAI,SAAS;QACpC;QAECV,eAA0CY,UAAU,CAACP,SAASM;IACjE,GACA;QAACX;KAAe;IAGlB,OAAOE;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useDomAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport { useDangerousNeverHidden_unstable as useDangerousNeverHidden } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn, AriaLiveMessage } from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n width: '1px',\n position: 'absolute',\n overflow: 'hidden',\n textWrap: 'nowrap',\n};\n\n/* INTERNAL: implementation of the announcer using a live region element */\nexport const useDomAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const timeoutRef = React.useRef<number | undefined>(undefined);\n const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n const tabsterNeverHiddenAttributes = useDangerousNeverHidden();\n\n const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n const order = React.useRef(0);\n\n // investigate alert implementation later\n // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n const [messageQueue] = React.useState(() =>\n createPriorityQueue<AriaLiveMessage>((a, b) => {\n if (a.priority !== b.priority) {\n return b.priority - a.priority;\n }\n\n return a.createdAt - b.createdAt;\n }),\n );\n\n const queueMessage = React.useCallback(() => {\n if (timeoutRef.current || !elementRef.current) {\n return;\n }\n\n const runCycle = () => {\n if (!elementRef.current) {\n return;\n }\n\n if (targetDocument && messageQueue.peek()) {\n // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n // consistently\n // if this is fixed, we can set textContent to the string directly\n\n const wrappingEl = targetDocument.createElement('span');\n\n wrappingEl.innerText = messageQueue\n .all()\n .filter(msg => msg.message.trim().length > 0)\n .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n elementRef.current.innerText = '';\n elementRef.current.appendChild(wrappingEl);\n\n messageQueue.clear();\n batchMessages.current = [];\n\n // begin new cycle to clear (or update) messages\n timeoutRef.current = setAnnounceTimeout(() => {\n runCycle();\n }, MESSAGE_DURATION);\n } else {\n elementRef.current.textContent = '';\n clearAnnounceTimeout();\n\n timeoutRef.current = undefined;\n }\n };\n\n runCycle();\n }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n const { alert = false, priority = 0, batchId } = options;\n\n // check if message is an alert\n if (alert) {\n // TODO: alert implementation\n // setAlertList([...alertList, message]);\n }\n\n const liveMessage: AriaLiveMessage = {\n message,\n createdAt: order.current++,\n priority,\n batchId,\n };\n\n // check if batchId exists\n if (batchId) {\n // update associated msg if it does\n const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n if (batchMessage) {\n // replace existing message in queue\n messageQueue.remove(batchMessage.message);\n\n // update list of existing batchIds w/ most recent message\n batchMessage.message = liveMessage;\n } else {\n // update list of existing batchIds, add new if doesn't already exist\n batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n }\n }\n\n // add new message\n messageQueue.enqueue(liveMessage);\n queueMessage();\n },\n [messageQueue, queueMessage],\n );\n\n React.useEffect(() => {\n if (!targetDocument) {\n return;\n }\n\n const element = targetDocument.createElement('div');\n element.setAttribute('aria-live', 'assertive');\n\n Object.entries(tabsterNeverHiddenAttributes).forEach(([key, value]) => {\n element.setAttribute(key, value);\n });\n\n Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n targetDocument.body.append(element);\n\n elementRef.current = element;\n\n return () => {\n element.remove();\n elementRef.current = null;\n clearAnnounceTimeout();\n timeoutRef.current = undefined;\n };\n }, [clearAnnounceTimeout, tabsterNeverHiddenAttributes, targetDocument]);\n\n return announce;\n};\n"],"names":["useDomAnnounce_unstable","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","targetDocument","useFluent","timeoutRef","React","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","useTimeout","tabsterNeverHiddenAttributes","useDangerousNeverHidden","elementRef","order","batchMessages","messageQueue","useState","createPriorityQueue","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","entries","forEach","key","value","assign","style","body","append"],"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useDomAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport { useDangerousNeverHidden_unstable as useDangerousNeverHidden } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn, AriaLiveMessage } from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n width: '1px',\n position: 'absolute',\n overflow: 'hidden',\n textWrap: 'nowrap',\n};\n\n/* INTERNAL: implementation of the announcer using a live region element */\nexport const useDomAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const timeoutRef = React.useRef<number | undefined>(undefined);\n const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n const tabsterNeverHiddenAttributes = useDangerousNeverHidden();\n\n const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n const order = React.useRef(0);\n\n // investigate alert implementation later\n // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n const [messageQueue] = React.useState(() =>\n createPriorityQueue<AriaLiveMessage>((a, b) => {\n if (a.priority !== b.priority) {\n return b.priority - a.priority;\n }\n\n return a.createdAt - b.createdAt;\n }),\n );\n\n const queueMessage = React.useCallback(() => {\n if (timeoutRef.current || !elementRef.current) {\n return;\n }\n\n const runCycle = () => {\n if (!elementRef.current) {\n return;\n }\n\n if (targetDocument && messageQueue.peek()) {\n // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n // consistently\n // if this is fixed, we can set textContent to the string directly\n\n const wrappingEl = targetDocument.createElement('span');\n\n wrappingEl.innerText = messageQueue\n .all()\n .filter(msg => msg.message.trim().length > 0)\n .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n elementRef.current.innerText = '';\n elementRef.current.appendChild(wrappingEl);\n\n messageQueue.clear();\n batchMessages.current = [];\n\n // begin new cycle to clear (or update) messages\n timeoutRef.current = setAnnounceTimeout(() => {\n runCycle();\n }, MESSAGE_DURATION);\n } else {\n elementRef.current.textContent = '';\n clearAnnounceTimeout();\n\n timeoutRef.current = undefined;\n }\n };\n\n runCycle();\n }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n const { alert = false, priority = 0, batchId } = options;\n\n // check if message is an alert\n if (alert) {\n // TODO: alert implementation\n // setAlertList([...alertList, message]);\n }\n\n const liveMessage: AriaLiveMessage = {\n message,\n createdAt: order.current++,\n priority,\n batchId,\n };\n\n // check if batchId exists\n if (batchId) {\n // update associated msg if it does\n const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n if (batchMessage) {\n // replace existing message in queue\n messageQueue.remove(batchMessage.message);\n\n // update list of existing batchIds w/ most recent message\n batchMessage.message = liveMessage;\n } else {\n // update list of existing batchIds, add new if doesn't already exist\n batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n }\n }\n\n // add new message\n messageQueue.enqueue(liveMessage);\n queueMessage();\n },\n [messageQueue, queueMessage],\n );\n\n React.useEffect(() => {\n if (!targetDocument) {\n return;\n }\n\n const element = targetDocument.createElement('div');\n element.setAttribute('aria-live', 'assertive');\n\n Object.entries(tabsterNeverHiddenAttributes).forEach(([key, value]) => {\n element.setAttribute(key, value);\n });\n\n Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n targetDocument.body.append(element);\n\n elementRef.current = element;\n\n return () => {\n element.remove();\n elementRef.current = null;\n clearAnnounceTimeout();\n timeoutRef.current = undefined;\n };\n }, [clearAnnounceTimeout, tabsterNeverHiddenAttributes, targetDocument]);\n\n return announce;\n};\n"],"names":["useDomAnnounce_unstable","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","targetDocument","useFluent","timeoutRef","React","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","useTimeout","tabsterNeverHiddenAttributes","useDangerousNeverHidden","elementRef","order","batchMessages","messageQueue","useState","createPriorityQueue","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","entries","forEach","key","value","assign","style","body","append"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/ActiveDescendantContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ActiveDescendantImperativeRef } from './types';\n\nexport type ActiveDescendantContextValue = {\n controller: ActiveDescendantImperativeRef;\n};\n\nconst noop = () => undefined;\n\nconst activeDescendantContextDefaultValue: ActiveDescendantContextValue = {\n controller: {\n active: noop,\n blur: noop,\n find: noop,\n first: noop,\n focus: noop,\n focusLastActive: noop,\n scrollActiveIntoView: noop,\n last: noop,\n next: noop,\n prev: noop,\n showAttributes: noop,\n hideAttributes: noop,\n showFocusVisibleAttributes: noop,\n hideFocusVisibleAttributes: noop,\n },\n};\n\nconst ActiveDescendantContext = React.createContext<ActiveDescendantContextValue | undefined>(undefined);\n\nexport const ActiveDescendantContextProvider = ActiveDescendantContext.Provider;\nexport const useActiveDescendantContext = () =>\n React.useContext(ActiveDescendantContext) ?? activeDescendantContextDefaultValue;\nexport const useHasParentActiveDescendantContext = () => !!React.useContext(ActiveDescendantContext);\n"],"names":["ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","noop","undefined","activeDescendantContextDefaultValue","controller","active","blur","find","first","focus","focusLastActive","scrollActiveIntoView","last","next","prev","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","ActiveDescendantContext","React","createContext","Provider","useContext"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/ActiveDescendantContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ActiveDescendantImperativeRef } from './types';\n\nexport type ActiveDescendantContextValue = {\n controller: ActiveDescendantImperativeRef;\n};\n\nconst noop = () => undefined;\n\nconst activeDescendantContextDefaultValue: ActiveDescendantContextValue = {\n controller: {\n active: noop,\n blur: noop,\n find: noop,\n first: noop,\n focus: noop,\n focusLastActive: noop,\n scrollActiveIntoView: noop,\n last: noop,\n next: noop,\n prev: noop,\n showAttributes: noop,\n hideAttributes: noop,\n showFocusVisibleAttributes: noop,\n hideFocusVisibleAttributes: noop,\n },\n};\n\nconst ActiveDescendantContext = React.createContext<ActiveDescendantContextValue | undefined>(undefined);\n\nexport const ActiveDescendantContextProvider = ActiveDescendantContext.Provider;\nexport const useActiveDescendantContext = () =>\n React.useContext(ActiveDescendantContext) ?? activeDescendantContextDefaultValue;\nexport const useHasParentActiveDescendantContext = () => !!React.useContext(ActiveDescendantContext);\n"],"names":["ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","noop","undefined","activeDescendantContextDefaultValue","controller","active","blur","find","first","focus","focusLastActive","scrollActiveIntoView","last","next","prev","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","ActiveDescendantContext","React","createContext","Provider","useContext"],"mappings":";;;;;;;;;;;IA8BaA,+BAA+B;eAA/BA;;IACAC,0BAA0B;eAA1BA;;IAEAC,mCAAmC;eAAnCA;;;;iEAjCU;AAOvB,MAAMC,OAAO,IAAMC;AAEnB,MAAMC,sCAAoE;IACxEC,YAAY;QACVC,QAAQJ;QACRK,MAAML;QACNM,MAAMN;QACNO,OAAOP;QACPQ,OAAOR;QACPS,iBAAiBT;QACjBU,sBAAsBV;QACtBW,MAAMX;QACNY,MAAMZ;QACNa,MAAMb;QACNc,gBAAgBd;QAChBe,gBAAgBf;QAChBgB,4BAA4BhB;QAC5BiB,4BAA4BjB;IAC9B;AACF;AAEA,MAAMkB,0BAA0BC,OAAMC,aAAa,CAA2CnB;AAEvF,MAAMJ,kCAAkCqB,wBAAwBG,QAAQ;AACxE,MAAMvB,6BAA6B;QACxCqB;WAAAA,CAAAA,oBAAAA,OAAMG,UAAU,CAACJ,sCAAjBC,+BAAAA,oBAA6CjB;;AACxC,MAAMH,sCAAsC,IAAM,CAAC,CAACoB,OAAMG,UAAU,CAACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/constants.ts"],"sourcesContent":["/**\n * Applied to the element that is active descendant\n */\nexport const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';\n\n/**\n * Applied to the active descendant when the user is navigating with keyboard\n */\nexport const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = 'data-activedescendant-focusvisible';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/constants.ts"],"sourcesContent":["/**\n * Applied to the element that is active descendant\n */\nexport const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';\n\n/**\n * Applied to the active descendant when the user is navigating with keyboard\n */\nexport const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = 'data-activedescendant-focusvisible';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"mappings":"AAAA;;CAEC;;;;;;;;;;;IACYA,0BAA0B;eAA1BA;;IAKAC,uCAAuC;eAAvCA;;;AALN,MAAMD,6BAA6B;AAKnC,MAAMC,0CAA0C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/index.ts"],"sourcesContent":["export type { ActiveDescendantContextValue } from './ActiveDescendantContext';\nexport {\n ActiveDescendantContextProvider,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from './ActiveDescendantContext';\nexport type { ActiveDescendantChangeEvent } from './useActiveDescendant';\nexport { createActiveDescendantChangeEvent, useActiveDescendant } from './useActiveDescendant';\nexport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nexport type {\n ActiveDescendantImperativeRef,\n ActiveDescendantOptions,\n FindOptions,\n IteratorOptions,\n UseActiveDescendantReturn,\n} from './types';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","ActiveDescendantContextProvider","createActiveDescendantChangeEvent","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/index.ts"],"sourcesContent":["export type { ActiveDescendantContextValue } from './ActiveDescendantContext';\nexport {\n ActiveDescendantContextProvider,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from './ActiveDescendantContext';\nexport type { ActiveDescendantChangeEvent } from './useActiveDescendant';\nexport { createActiveDescendantChangeEvent, useActiveDescendant } from './useActiveDescendant';\nexport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nexport type {\n ActiveDescendantImperativeRef,\n ActiveDescendantOptions,\n FindOptions,\n IteratorOptions,\n UseActiveDescendantReturn,\n} from './types';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","ActiveDescendantContextProvider","createActiveDescendantChangeEvent","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext"],"mappings":";;;;;;;;;;;IAQSA,0BAA0B;eAA1BA,qCAA0B;;IAAEC,uCAAuC;eAAvCA,kDAAuC;;IAN1EC,+BAA+B;eAA/BA,wDAA+B;;IAKxBC,iCAAiC;eAAjCA,sDAAiC;;IAAEC,mBAAmB;eAAnBA,wCAAmB;;IAJ7DC,0BAA0B;eAA1BA,mDAA0B;;IAC1BC,mCAAmC;eAAnCA,4DAAmC;;;yCAC9B;qCAEgE;2BACa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/scrollIntoView.ts"],"sourcesContent":["export const scrollIntoView = (target: HTMLElement | null | undefined) => {\n if (!target) {\n return;\n }\n\n const scrollParent = findScrollableParent(target.parentElement as HTMLElement);\n if (!scrollParent) {\n return;\n }\n\n const { offsetHeight } = target;\n const offsetTop = getTotalOffsetTop(target, scrollParent);\n\n const { scrollMarginTop, scrollMarginBottom } = getScrollMargins(target);\n\n const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n\n const isAbove = offsetTop - scrollMarginTop < scrollTop;\n const isBelow = offsetTop + offsetHeight + scrollMarginBottom > scrollTop + parentOffsetHeight;\n\n const buffer = 2;\n\n if (isAbove) {\n scrollParent.scrollTo(0, offsetTop - scrollMarginTop - buffer);\n } else if (isBelow) {\n scrollParent.scrollTo(0, offsetTop + offsetHeight + scrollMarginBottom - parentOffsetHeight + buffer);\n }\n};\n\nconst findScrollableParent = (element: HTMLElement | null): HTMLElement | null => {\n if (!element) {\n return null;\n }\n\n if (element.scrollHeight > element.offsetHeight) {\n return element;\n }\n\n return findScrollableParent(element.parentElement);\n};\n\nconst getTotalOffsetTop = (element: HTMLElement, scrollParent: HTMLElement): number => {\n if (!element || element === scrollParent) {\n return 0;\n }\n\n if (element.contains(scrollParent)) {\n // subtract the scroll parent's offset top from the running total if the offsetParent is above it\n return scrollParent.offsetTop * -1;\n }\n\n return element.offsetTop + getTotalOffsetTop(element.offsetParent as HTMLElement, scrollParent);\n};\n\nconst getScrollMargins = (element: HTMLElement) => {\n const win = element.ownerDocument?.defaultView;\n if (!win) {\n return {\n scrollMarginTop: 0,\n scrollMarginBottom: 0,\n };\n }\n\n const computedStyles = win.getComputedStyle(element);\n const scrollMarginTop =\n getIntValueOfComputedStyle(computedStyles.scrollMarginTop) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockStart);\n const scrollMarginBottom =\n getIntValueOfComputedStyle(computedStyles.scrollMarginBottom) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockEnd);\n return {\n scrollMarginTop,\n scrollMarginBottom,\n };\n};\n\nconst getIntValueOfComputedStyle = (computedStyle: string) => {\n return computedStyle ? parseInt(computedStyle, 10) : 0;\n};\n"],"names":["scrollIntoView","target","scrollParent","findScrollableParent","parentElement","offsetHeight","offsetTop","getTotalOffsetTop","scrollMarginTop","scrollMarginBottom","getScrollMargins","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","element","scrollHeight","contains","offsetParent","win","ownerDocument","defaultView","computedStyles","getComputedStyle","getIntValueOfComputedStyle","scrollMarginBlockStart","scrollMarginBlockEnd","computedStyle","parseInt"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/scrollIntoView.ts"],"sourcesContent":["export const scrollIntoView = (target: HTMLElement | null | undefined) => {\n if (!target) {\n return;\n }\n\n const scrollParent = findScrollableParent(target.parentElement as HTMLElement);\n if (!scrollParent) {\n return;\n }\n\n const { offsetHeight } = target;\n const offsetTop = getTotalOffsetTop(target, scrollParent);\n\n const { scrollMarginTop, scrollMarginBottom } = getScrollMargins(target);\n\n const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n\n const isAbove = offsetTop - scrollMarginTop < scrollTop;\n const isBelow = offsetTop + offsetHeight + scrollMarginBottom > scrollTop + parentOffsetHeight;\n\n const buffer = 2;\n\n if (isAbove) {\n scrollParent.scrollTo(0, offsetTop - scrollMarginTop - buffer);\n } else if (isBelow) {\n scrollParent.scrollTo(0, offsetTop + offsetHeight + scrollMarginBottom - parentOffsetHeight + buffer);\n }\n};\n\nconst findScrollableParent = (element: HTMLElement | null): HTMLElement | null => {\n if (!element) {\n return null;\n }\n\n if (element.scrollHeight > element.offsetHeight) {\n return element;\n }\n\n return findScrollableParent(element.parentElement);\n};\n\nconst getTotalOffsetTop = (element: HTMLElement, scrollParent: HTMLElement): number => {\n if (!element || element === scrollParent) {\n return 0;\n }\n\n if (element.contains(scrollParent)) {\n // subtract the scroll parent's offset top from the running total if the offsetParent is above it\n return scrollParent.offsetTop * -1;\n }\n\n return element.offsetTop + getTotalOffsetTop(element.offsetParent as HTMLElement, scrollParent);\n};\n\nconst getScrollMargins = (element: HTMLElement) => {\n const win = element.ownerDocument?.defaultView;\n if (!win) {\n return {\n scrollMarginTop: 0,\n scrollMarginBottom: 0,\n };\n }\n\n const computedStyles = win.getComputedStyle(element);\n const scrollMarginTop =\n getIntValueOfComputedStyle(computedStyles.scrollMarginTop) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockStart);\n const scrollMarginBottom =\n getIntValueOfComputedStyle(computedStyles.scrollMarginBottom) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockEnd);\n return {\n scrollMarginTop,\n scrollMarginBottom,\n };\n};\n\nconst getIntValueOfComputedStyle = (computedStyle: string) => {\n return computedStyle ? parseInt(computedStyle, 10) : 0;\n};\n"],"names":["scrollIntoView","target","scrollParent","findScrollableParent","parentElement","offsetHeight","offsetTop","getTotalOffsetTop","scrollMarginTop","scrollMarginBottom","getScrollMargins","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","element","scrollHeight","contains","offsetParent","win","ownerDocument","defaultView","computedStyles","getComputedStyle","getIntValueOfComputedStyle","scrollMarginBlockStart","scrollMarginBlockEnd","computedStyle","parseInt"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,iBAAiB,CAACC;IAC7B,IAAI,CAACA,QAAQ;QACX;IACF;IAEA,MAAMC,eAAeC,qBAAqBF,OAAOG,aAAa;IAC9D,IAAI,CAACF,cAAc;QACjB;IACF;IAEA,MAAM,EAAEG,YAAY,EAAE,GAAGJ;IACzB,MAAMK,YAAYC,kBAAkBN,QAAQC;IAE5C,MAAM,EAAEM,eAAe,EAAEC,kBAAkB,EAAE,GAAGC,iBAAiBT;IAEjE,MAAM,EAAEI,cAAcM,kBAAkB,EAAEC,SAAS,EAAE,GAAGV;IAExD,MAAMW,UAAUP,YAAYE,kBAAkBI;IAC9C,MAAME,UAAUR,YAAYD,eAAeI,qBAAqBG,YAAYD;IAE5E,MAAMI,SAAS;IAEf,IAAIF,SAAS;QACXX,aAAac,QAAQ,CAAC,GAAGV,YAAYE,kBAAkBO;IACzD,OAAO,IAAID,SAAS;QAClBZ,aAAac,QAAQ,CAAC,GAAGV,YAAYD,eAAeI,qBAAqBE,qBAAqBI;IAChG;AACF;AAEA,MAAMZ,uBAAuB,CAACc;IAC5B,IAAI,CAACA,SAAS;QACZ,OAAO;IACT;IAEA,IAAIA,QAAQC,YAAY,GAAGD,QAAQZ,YAAY,EAAE;QAC/C,OAAOY;IACT;IAEA,OAAOd,qBAAqBc,QAAQb,aAAa;AACnD;AAEA,MAAMG,oBAAoB,CAACU,SAAsBf;IAC/C,IAAI,CAACe,WAAWA,YAAYf,cAAc;QACxC,OAAO;IACT;IAEA,IAAIe,QAAQE,QAAQ,CAACjB,eAAe;QAClC,iGAAiG;QACjG,OAAOA,aAAaI,SAAS,GAAG,CAAC;IACnC;IAEA,OAAOW,QAAQX,SAAS,GAAGC,kBAAkBU,QAAQG,YAAY,EAAiBlB;AACpF;AAEA,MAAMQ,mBAAmB,CAACO;QACZA;IAAZ,MAAMI,OAAMJ,yBAAAA,QAAQK,aAAa,cAArBL,6CAAAA,uBAAuBM,WAAW;IAC9C,IAAI,CAACF,KAAK;QACR,OAAO;YACLb,iBAAiB;YACjBC,oBAAoB;QACtB;IACF;IAEA,MAAMe,iBAAiBH,IAAII,gBAAgB,CAACR;QAE1CS;IADF,MAAMlB,kBACJkB,CAAAA,8BAAAA,2BAA2BF,eAAehB,eAAe,eAAzDkB,yCAAAA,8BACAA,2BAA2BF,eAAeG,sBAAsB;QAEhED;IADF,MAAMjB,qBACJiB,CAAAA,+BAAAA,2BAA2BF,eAAef,kBAAkB,eAA5DiB,0CAAAA,+BACAA,2BAA2BF,eAAeI,oBAAoB;IAChE,OAAO;QACLpB;QACAC;IACF;AACF;AAEA,MAAMiB,6BAA6B,CAACG;IAClC,OAAOA,gBAAgBC,SAASD,eAAe,MAAM;AACvD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ActiveDescendantImperativeRef {\n first: (options?: IteratorOptions) => string | undefined;\n last: (options?: IteratorOptions) => string | undefined;\n next: (options?: IteratorOptions) => string | undefined;\n prev: (options?: IteratorOptions) => string | undefined;\n find: (predicate: (id: string) => boolean, options?: IteratorOptions & FindOptions) => string | undefined;\n blur: () => void;\n active: () => string | undefined;\n focus: (id: string) => void;\n /**\n * @deprecated This function is not used internally anymore and will be removed in the future\n */\n focusLastActive: () => void;\n /**\n * Scrolls the active option into view, if it still exists\n */\n scrollActiveIntoView: () => void;\n hideAttributes: () => void;\n showAttributes: () => void;\n hideFocusVisibleAttributes: () => void;\n showFocusVisibleAttributes: () => void;\n}\n\nexport interface ActiveDescendantOptions {\n /**\n * @param el - HTML element to test\n * @returns whether the element can be an active descendant\n */\n matchOption: (el: HTMLElement) => boolean;\n /**\n * Forward imperative refs when exposing functionality from a React component\n */\n imperativeRef?: React.RefObject<ActiveDescendantImperativeRef>;\n}\n\nexport interface FindOptions {\n /**\n * Starts the search from a specific id\n */\n startFrom?: string;\n}\n\nexport interface UseActiveDescendantReturn<\n TActiveParentElement extends HTMLElement = HTMLElement,\n TListboxElement extends HTMLElement = HTMLElement,\n> {\n /**\n * Attach this to the element that contains all active descendants\n */\n listboxRef: React.Ref<TListboxElement>;\n /**\n * Attach this to the element that has an active descendant\n */\n activeParentRef: React.Ref<TActiveParentElement>;\n /**\n * Imperative functions to manage active descendants within the listboxRef\n */\n controller: ActiveDescendantImperativeRef;\n}\n\nexport interface IteratorOptions {\n /**\n * When passive, the active descendant is changed\n * @default false\n */\n passive?: boolean;\n}\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ActiveDescendantImperativeRef {\n first: (options?: IteratorOptions) => string | undefined;\n last: (options?: IteratorOptions) => string | undefined;\n next: (options?: IteratorOptions) => string | undefined;\n prev: (options?: IteratorOptions) => string | undefined;\n find: (predicate: (id: string) => boolean, options?: IteratorOptions & FindOptions) => string | undefined;\n blur: () => void;\n active: () => string | undefined;\n focus: (id: string) => void;\n /**\n * @deprecated This function is not used internally anymore and will be removed in the future\n */\n focusLastActive: () => void;\n /**\n * Scrolls the active option into view, if it still exists\n */\n scrollActiveIntoView: () => void;\n hideAttributes: () => void;\n showAttributes: () => void;\n hideFocusVisibleAttributes: () => void;\n showFocusVisibleAttributes: () => void;\n}\n\nexport interface ActiveDescendantOptions {\n /**\n * @param el - HTML element to test\n * @returns whether the element can be an active descendant\n */\n matchOption: (el: HTMLElement) => boolean;\n /**\n * Forward imperative refs when exposing functionality from a React component\n */\n imperativeRef?: React.RefObject<ActiveDescendantImperativeRef>;\n}\n\nexport interface FindOptions {\n /**\n * Starts the search from a specific id\n */\n startFrom?: string;\n}\n\nexport interface UseActiveDescendantReturn<\n TActiveParentElement extends HTMLElement = HTMLElement,\n TListboxElement extends HTMLElement = HTMLElement,\n> {\n /**\n * Attach this to the element that contains all active descendants\n */\n listboxRef: React.Ref<TListboxElement>;\n /**\n * Attach this to the element that has an active descendant\n */\n activeParentRef: React.Ref<TActiveParentElement>;\n /**\n * Imperative functions to manage active descendants within the listboxRef\n */\n controller: ActiveDescendantImperativeRef;\n}\n\nexport interface IteratorOptions {\n /**\n * When passive, the active descendant is changed\n * @default false\n */\n passive?: boolean;\n}\n"],"names":[],"mappings":";;;;;iEAAuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantImperativeRef, ActiveDescendantOptions, UseActiveDescendantReturn } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nimport { scrollIntoView } from './scrollIntoView';\n\ninterface ActiveDescendantChangeEventDetail {\n id: string;\n previousId: string | null;\n}\n\nexport type ActiveDescendantChangeEvent = CustomEvent<ActiveDescendantChangeEventDetail>;\n\nexport const createActiveDescendantChangeEvent = (\n detail: ActiveDescendantChangeEventDetail,\n): ActiveDescendantChangeEvent =>\n new CustomEvent<ActiveDescendantChangeEventDetail>('activedescendantchange', {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail,\n });\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n options: ActiveDescendantOptions,\n): UseActiveDescendantReturn<TActiveParentElement, TListboxElement> {\n const { imperativeRef, matchOption: matchOptionUnstable } = options;\n const focusVisibleRef = React.useRef(false);\n const shouldShowFocusVisibleAttrRef = React.useRef(true);\n const activeIdRef = React.useRef<string | null>(null);\n const lastActiveIdRef = React.useRef<string | null>(null);\n const activeParentRef = React.useRef<TActiveParentElement>(null);\n const attributeVisibilityRef = React.useRef(true);\n\n const removeAttribute = React.useCallback(() => {\n activeParentRef.current?.removeAttribute('aria-activedescendant');\n }, []);\n\n const setAttribute = React.useCallback((id?: string) => {\n if (id) {\n activeIdRef.current = id;\n }\n if (attributeVisibilityRef.current && activeIdRef.current) {\n activeParentRef.current?.setAttribute('aria-activedescendant', activeIdRef.current);\n }\n }, []);\n\n useOnKeyboardNavigationChange(isNavigatingWithKeyboard => {\n focusVisibleRef.current = isNavigatingWithKeyboard;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (isNavigatingWithKeyboard && shouldShowFocusVisibleAttrRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n });\n\n const matchOption = useEventCallback(matchOptionUnstable);\n const listboxRef = React.useRef<TListboxElement>(null);\n const { optionWalker, listboxCallbackRef } = useOptionWalker<TListboxElement>({ matchOption });\n\n const getActiveDescendant = React.useCallback(() => {\n return listboxRef.current?.querySelector<HTMLElement>(`#${activeIdRef.current}`);\n }, [listboxRef]);\n\n const setShouldShowFocusVisibleAttribute = React.useCallback(\n (shouldShow: boolean) => {\n shouldShowFocusVisibleAttrRef.current = shouldShow;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (shouldShow && focusVisibleRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n },\n [getActiveDescendant],\n );\n\n const blurActiveDescendant = React.useCallback(() => {\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n\n removeAttribute();\n lastActiveIdRef.current = activeIdRef.current;\n activeIdRef.current = null;\n return active?.id ?? null;\n }, [getActiveDescendant, removeAttribute]);\n\n const focusActiveDescendant = React.useCallback(\n (nextActive: HTMLElement | null) => {\n if (!nextActive) {\n return;\n }\n\n const previousActiveId = blurActiveDescendant();\n\n scrollIntoView(nextActive);\n setAttribute(nextActive.id);\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n\n if (focusVisibleRef.current && shouldShowFocusVisibleAttrRef.current) {\n nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n }\n\n const event = createActiveDescendantChangeEvent({ id: nextActive.id, previousId: previousActiveId });\n nextActive.dispatchEvent(event);\n },\n [blurActiveDescendant, setAttribute],\n );\n\n const controller: ActiveDescendantImperativeRef = React.useMemo(\n () => ({\n first: ({ passive } = {}) => {\n const first = optionWalker.first();\n if (!passive) {\n focusActiveDescendant(first);\n }\n\n return first?.id;\n },\n last: ({ passive } = {}) => {\n const last = optionWalker.last();\n if (!passive) {\n focusActiveDescendant(last);\n }\n\n return last?.id;\n },\n next: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n prev: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.prev();\n\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n blur: () => {\n blurActiveDescendant();\n },\n active: () => {\n return getActiveDescendant()?.id;\n },\n focus: (id: string) => {\n if (!listboxRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${id}`);\n if (target) {\n focusActiveDescendant(target);\n }\n },\n focusLastActive: () => {\n if (!listboxRef.current || !lastActiveIdRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${lastActiveIdRef.current}`);\n if (target) {\n focusActiveDescendant(target);\n return true;\n }\n },\n find(predicate, { passive, startFrom } = {}) {\n const target = optionWalker.find(predicate, startFrom);\n if (!passive) {\n focusActiveDescendant(target);\n }\n\n return target?.id;\n },\n scrollActiveIntoView: () => {\n if (!listboxRef.current) {\n return;\n }\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n scrollIntoView(active);\n },\n showAttributes() {\n attributeVisibilityRef.current = true;\n setAttribute();\n },\n hideAttributes() {\n attributeVisibilityRef.current = false;\n removeAttribute();\n },\n showFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(true);\n },\n hideFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(false);\n },\n }),\n [\n optionWalker,\n listboxRef,\n setAttribute,\n removeAttribute,\n focusActiveDescendant,\n blurActiveDescendant,\n getActiveDescendant,\n setShouldShowFocusVisibleAttribute,\n ],\n );\n\n React.useImperativeHandle(imperativeRef, () => controller);\n\n return { listboxRef: useMergedRefs(listboxRef, listboxCallbackRef), activeParentRef, controller };\n}\n"],"names":["createActiveDescendantChangeEvent","useActiveDescendant","detail","CustomEvent","bubbles","cancelable","composed","options","imperativeRef","matchOption","matchOptionUnstable","focusVisibleRef","React","useRef","shouldShowFocusVisibleAttrRef","activeIdRef","lastActiveIdRef","activeParentRef","attributeVisibilityRef","removeAttribute","useCallback","current","setAttribute","id","useOnKeyboardNavigationChange","isNavigatingWithKeyboard","active","getActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","useEventCallback","listboxRef","optionWalker","listboxCallbackRef","useOptionWalker","querySelector","setShouldShowFocusVisibleAttribute","shouldShow","blurActiveDescendant","ACTIVEDESCENDANT_ATTRIBUTE","focusActiveDescendant","nextActive","previousActiveId","scrollIntoView","event","previousId","dispatchEvent","controller","useMemo","first","passive","last","next","setCurrent","prev","blur","focus","target","focusLastActive","find","predicate","startFrom","scrollActiveIntoView","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","useImperativeHandle","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantImperativeRef, ActiveDescendantOptions, UseActiveDescendantReturn } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nimport { scrollIntoView } from './scrollIntoView';\n\ninterface ActiveDescendantChangeEventDetail {\n id: string;\n previousId: string | null;\n}\n\nexport type ActiveDescendantChangeEvent = CustomEvent<ActiveDescendantChangeEventDetail>;\n\nexport const createActiveDescendantChangeEvent = (\n detail: ActiveDescendantChangeEventDetail,\n): ActiveDescendantChangeEvent =>\n new CustomEvent<ActiveDescendantChangeEventDetail>('activedescendantchange', {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail,\n });\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n options: ActiveDescendantOptions,\n): UseActiveDescendantReturn<TActiveParentElement, TListboxElement> {\n const { imperativeRef, matchOption: matchOptionUnstable } = options;\n const focusVisibleRef = React.useRef(false);\n const shouldShowFocusVisibleAttrRef = React.useRef(true);\n const activeIdRef = React.useRef<string | null>(null);\n const lastActiveIdRef = React.useRef<string | null>(null);\n const activeParentRef = React.useRef<TActiveParentElement>(null);\n const attributeVisibilityRef = React.useRef(true);\n\n const removeAttribute = React.useCallback(() => {\n activeParentRef.current?.removeAttribute('aria-activedescendant');\n }, []);\n\n const setAttribute = React.useCallback((id?: string) => {\n if (id) {\n activeIdRef.current = id;\n }\n if (attributeVisibilityRef.current && activeIdRef.current) {\n activeParentRef.current?.setAttribute('aria-activedescendant', activeIdRef.current);\n }\n }, []);\n\n useOnKeyboardNavigationChange(isNavigatingWithKeyboard => {\n focusVisibleRef.current = isNavigatingWithKeyboard;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (isNavigatingWithKeyboard && shouldShowFocusVisibleAttrRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n });\n\n const matchOption = useEventCallback(matchOptionUnstable);\n const listboxRef = React.useRef<TListboxElement>(null);\n const { optionWalker, listboxCallbackRef } = useOptionWalker<TListboxElement>({ matchOption });\n\n const getActiveDescendant = React.useCallback(() => {\n return listboxRef.current?.querySelector<HTMLElement>(`#${activeIdRef.current}`);\n }, [listboxRef]);\n\n const setShouldShowFocusVisibleAttribute = React.useCallback(\n (shouldShow: boolean) => {\n shouldShowFocusVisibleAttrRef.current = shouldShow;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (shouldShow && focusVisibleRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n },\n [getActiveDescendant],\n );\n\n const blurActiveDescendant = React.useCallback(() => {\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n\n removeAttribute();\n lastActiveIdRef.current = activeIdRef.current;\n activeIdRef.current = null;\n return active?.id ?? null;\n }, [getActiveDescendant, removeAttribute]);\n\n const focusActiveDescendant = React.useCallback(\n (nextActive: HTMLElement | null) => {\n if (!nextActive) {\n return;\n }\n\n const previousActiveId = blurActiveDescendant();\n\n scrollIntoView(nextActive);\n setAttribute(nextActive.id);\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n\n if (focusVisibleRef.current && shouldShowFocusVisibleAttrRef.current) {\n nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n }\n\n const event = createActiveDescendantChangeEvent({ id: nextActive.id, previousId: previousActiveId });\n nextActive.dispatchEvent(event);\n },\n [blurActiveDescendant, setAttribute],\n );\n\n const controller: ActiveDescendantImperativeRef = React.useMemo(\n () => ({\n first: ({ passive } = {}) => {\n const first = optionWalker.first();\n if (!passive) {\n focusActiveDescendant(first);\n }\n\n return first?.id;\n },\n last: ({ passive } = {}) => {\n const last = optionWalker.last();\n if (!passive) {\n focusActiveDescendant(last);\n }\n\n return last?.id;\n },\n next: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n prev: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.prev();\n\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n blur: () => {\n blurActiveDescendant();\n },\n active: () => {\n return getActiveDescendant()?.id;\n },\n focus: (id: string) => {\n if (!listboxRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${id}`);\n if (target) {\n focusActiveDescendant(target);\n }\n },\n focusLastActive: () => {\n if (!listboxRef.current || !lastActiveIdRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${lastActiveIdRef.current}`);\n if (target) {\n focusActiveDescendant(target);\n return true;\n }\n },\n find(predicate, { passive, startFrom } = {}) {\n const target = optionWalker.find(predicate, startFrom);\n if (!passive) {\n focusActiveDescendant(target);\n }\n\n return target?.id;\n },\n scrollActiveIntoView: () => {\n if (!listboxRef.current) {\n return;\n }\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n scrollIntoView(active);\n },\n showAttributes() {\n attributeVisibilityRef.current = true;\n setAttribute();\n },\n hideAttributes() {\n attributeVisibilityRef.current = false;\n removeAttribute();\n },\n showFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(true);\n },\n hideFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(false);\n },\n }),\n [\n optionWalker,\n listboxRef,\n setAttribute,\n removeAttribute,\n focusActiveDescendant,\n blurActiveDescendant,\n getActiveDescendant,\n setShouldShowFocusVisibleAttribute,\n ],\n );\n\n React.useImperativeHandle(imperativeRef, () => controller);\n\n return { listboxRef: useMergedRefs(listboxRef, listboxCallbackRef), activeParentRef, controller };\n}\n"],"names":["createActiveDescendantChangeEvent","useActiveDescendant","detail","CustomEvent","bubbles","cancelable","composed","options","imperativeRef","matchOption","matchOptionUnstable","focusVisibleRef","React","useRef","shouldShowFocusVisibleAttrRef","activeIdRef","lastActiveIdRef","activeParentRef","attributeVisibilityRef","removeAttribute","useCallback","current","setAttribute","id","useOnKeyboardNavigationChange","isNavigatingWithKeyboard","active","getActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","useEventCallback","listboxRef","optionWalker","listboxCallbackRef","useOptionWalker","querySelector","setShouldShowFocusVisibleAttribute","shouldShow","blurActiveDescendant","ACTIVEDESCENDANT_ATTRIBUTE","focusActiveDescendant","nextActive","previousActiveId","scrollIntoView","event","previousId","dispatchEvent","controller","useMemo","first","passive","last","next","setCurrent","prev","blur","focus","target","focusLastActive","find","predicate","startFrom","scrollActiveIntoView","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","useImperativeHandle","useMergedRefs"],"mappings":";;;;;;;;;;;IAeaA,iCAAiC;eAAjCA;;IAUGC,mBAAmB;eAAnBA;;;;iEAzBO;gCACyB;8BACF;iCACd;2BAEoD;gCACrD;AASxB,MAAMD,oCAAoC,CAC/CE,SAEA,IAAIC,YAA+C,0BAA0B;QAC3EC,SAAS;QACTC,YAAY;QACZC,UAAU;QACVJ;IACF;AAEK,SAASD,oBACdM,OAAgC;IAEhC,MAAM,EAAEC,aAAa,EAAEC,aAAaC,mBAAmB,EAAE,GAAGH;IAC5D,MAAMI,kBAAkBC,OAAMC,MAAM,CAAC;IACrC,MAAMC,gCAAgCF,OAAMC,MAAM,CAAC;IACnD,MAAME,cAAcH,OAAMC,MAAM,CAAgB;IAChD,MAAMG,kBAAkBJ,OAAMC,MAAM,CAAgB;IACpD,MAAMI,kBAAkBL,OAAMC,MAAM,CAAuB;IAC3D,MAAMK,yBAAyBN,OAAMC,MAAM,CAAC;IAE5C,MAAMM,kBAAkBP,OAAMQ,WAAW,CAAC;YACxCH;SAAAA,2BAAAA,gBAAgBI,OAAO,cAAvBJ,+CAAAA,yBAAyBE,eAAe,CAAC;IAC3C,GAAG,EAAE;IAEL,MAAMG,eAAeV,OAAMQ,WAAW,CAAC,CAACG;QACtC,IAAIA,IAAI;YACNR,YAAYM,OAAO,GAAGE;QACxB;QACA,IAAIL,uBAAuBG,OAAO,IAAIN,YAAYM,OAAO,EAAE;gBACzDJ;aAAAA,2BAAAA,gBAAgBI,OAAO,cAAvBJ,+CAAAA,yBAAyBK,YAAY,CAAC,yBAAyBP,YAAYM,OAAO;QACpF;IACF,GAAG,EAAE;IAELG,IAAAA,2CAA6B,EAACC,CAAAA;QAC5Bd,gBAAgBU,OAAO,GAAGI;QAE1B,MAAMC,SAASC;QACf,IAAI,CAACD,QAAQ;YACX;QACF;QAEA,IAAID,4BAA4BX,8BAA8BO,OAAO,EAAE;YACrEK,OAAOJ,YAAY,CAACM,kDAAuC,EAAE;QAC/D,OAAO;YACLF,OAAOP,eAAe,CAACS,kDAAuC;QAChE;IACF;IAEA,MAAMnB,cAAcoB,IAAAA,gCAAgB,EAACnB;IACrC,MAAMoB,aAAalB,OAAMC,MAAM,CAAkB;IACjD,MAAM,EAAEkB,YAAY,EAAEC,kBAAkB,EAAE,GAAGC,IAAAA,gCAAe,EAAkB;QAAExB;IAAY;IAE5F,MAAMkB,sBAAsBf,OAAMQ,WAAW,CAAC;YACrCU;QAAP,QAAOA,sBAAAA,WAAWT,OAAO,cAAlBS,0CAAAA,oBAAoBI,aAAa,CAAc,CAAC,CAAC,EAAEnB,YAAYM,OAAO,EAAE;IACjF,GAAG;QAACS;KAAW;IAEf,MAAMK,qCAAqCvB,OAAMQ,WAAW,CAC1D,CAACgB;QACCtB,8BAA8BO,OAAO,GAAGe;QAExC,MAAMV,SAASC;QACf,IAAI,CAACD,QAAQ;YACX;QACF;QAEA,IAAIU,cAAczB,gBAAgBU,OAAO,EAAE;YACzCK,OAAOJ,YAAY,CAACM,kDAAuC,EAAE;QAC/D,OAAO;YACLF,OAAOP,eAAe,CAACS,kDAAuC;QAChE;IACF,GACA;QAACD;KAAoB;IAGvB,MAAMU,uBAAuBzB,OAAMQ,WAAW,CAAC;QAC7C,MAAMM,SAASC;QACf,IAAID,QAAQ;YACVA,OAAOP,eAAe,CAACmB,qCAA0B;YACjDZ,OAAOP,eAAe,CAACS,kDAAuC;QAChE;QAEAT;QACAH,gBAAgBK,OAAO,GAAGN,YAAYM,OAAO;QAC7CN,YAAYM,OAAO,GAAG;YACfK;QAAP,OAAOA,CAAAA,aAAAA,mBAAAA,6BAAAA,OAAQH,EAAE,cAAVG,wBAAAA,aAAc;IACvB,GAAG;QAACC;QAAqBR;KAAgB;IAEzC,MAAMoB,wBAAwB3B,OAAMQ,WAAW,CAC7C,CAACoB;QACC,IAAI,CAACA,YAAY;YACf;QACF;QAEA,MAAMC,mBAAmBJ;QAEzBK,IAAAA,8BAAc,EAACF;QACflB,aAAakB,WAAWjB,EAAE;QAC1BiB,WAAWlB,YAAY,CAACgB,qCAA0B,EAAE;QAEpD,IAAI3B,gBAAgBU,OAAO,IAAIP,8BAA8BO,OAAO,EAAE;YACpEmB,WAAWlB,YAAY,CAACM,kDAAuC,EAAE;QACnE;QAEA,MAAMe,QAAQ3C,kCAAkC;YAAEuB,IAAIiB,WAAWjB,EAAE;YAAEqB,YAAYH;QAAiB;QAClGD,WAAWK,aAAa,CAACF;IAC3B,GACA;QAACN;QAAsBf;KAAa;IAGtC,MAAMwB,aAA4ClC,OAAMmC,OAAO,CAC7D,IAAO,CAAA;YACLC,OAAO,CAAC,EAAEC,OAAO,EAAE,GAAG,CAAC,CAAC;gBACtB,MAAMD,QAAQjB,aAAaiB,KAAK;gBAChC,IAAI,CAACC,SAAS;oBACZV,sBAAsBS;gBACxB;gBAEA,OAAOA,kBAAAA,4BAAAA,MAAOzB,EAAE;YAClB;YACA2B,MAAM,CAAC,EAAED,OAAO,EAAE,GAAG,CAAC,CAAC;gBACrB,MAAMC,OAAOnB,aAAamB,IAAI;gBAC9B,IAAI,CAACD,SAAS;oBACZV,sBAAsBW;gBACxB;gBAEA,OAAOA,iBAAAA,2BAAAA,KAAM3B,EAAE;YACjB;YACA4B,MAAM,CAAC,EAAEF,OAAO,EAAE,GAAG,CAAC,CAAC;gBACrB,MAAMvB,SAASC;gBACf,IAAI,CAACD,QAAQ;oBACX;gBACF;gBAEAK,aAAaqB,UAAU,CAAC1B;gBACxB,MAAMyB,OAAOpB,aAAaoB,IAAI;gBAC9B,IAAI,CAACF,SAAS;oBACZV,sBAAsBY;gBACxB;gBAEA,OAAOA,iBAAAA,2BAAAA,KAAM5B,EAAE;YACjB;YACA8B,MAAM,CAAC,EAAEJ,OAAO,EAAE,GAAG,CAAC,CAAC;gBACrB,MAAMvB,SAASC;gBACf,IAAI,CAACD,QAAQ;oBACX;gBACF;gBAEAK,aAAaqB,UAAU,CAAC1B;gBACxB,MAAMyB,OAAOpB,aAAasB,IAAI;gBAE9B,IAAI,CAACJ,SAAS;oBACZV,sBAAsBY;gBACxB;gBAEA,OAAOA,iBAAAA,2BAAAA,KAAM5B,EAAE;YACjB;YACA+B,MAAM;gBACJjB;YACF;YACAX,QAAQ;oBACCC;gBAAP,QAAOA,uBAAAA,mCAAAA,2CAAAA,qBAAuBJ,EAAE;YAClC;YACAgC,OAAO,CAAChC;gBACN,IAAI,CAACO,WAAWT,OAAO,EAAE;oBACvB;gBACF;gBAEA,MAAMmC,SAAS1B,WAAWT,OAAO,CAACa,aAAa,CAAc,CAAC,CAAC,EAAEX,IAAI;gBACrE,IAAIiC,QAAQ;oBACVjB,sBAAsBiB;gBACxB;YACF;YACAC,iBAAiB;gBACf,IAAI,CAAC3B,WAAWT,OAAO,IAAI,CAACL,gBAAgBK,OAAO,EAAE;oBACnD;gBACF;gBAEA,MAAMmC,SAAS1B,WAAWT,OAAO,CAACa,aAAa,CAAc,CAAC,CAAC,EAAElB,gBAAgBK,OAAO,EAAE;gBAC1F,IAAImC,QAAQ;oBACVjB,sBAAsBiB;oBACtB,OAAO;gBACT;YACF;YACAE,MAAKC,SAAS,EAAE,EAAEV,OAAO,EAAEW,SAAS,EAAE,GAAG,CAAC,CAAC;gBACzC,MAAMJ,SAASzB,aAAa2B,IAAI,CAACC,WAAWC;gBAC5C,IAAI,CAACX,SAAS;oBACZV,sBAAsBiB;gBACxB;gBAEA,OAAOA,mBAAAA,6BAAAA,OAAQjC,EAAE;YACnB;YACAsC,sBAAsB;gBACpB,IAAI,CAAC/B,WAAWT,OAAO,EAAE;oBACvB;gBACF;gBAEA,MAAMK,SAASC;gBACf,IAAI,CAACD,QAAQ;oBACX;gBACF;gBAEAgB,IAAAA,8BAAc,EAAChB;YACjB;YACAoC;gBACE5C,uBAAuBG,OAAO,GAAG;gBACjCC;YACF;YACAyC;gBACE7C,uBAAuBG,OAAO,GAAG;gBACjCF;YACF;YACA6C;gBACE7B,mCAAmC;YACrC;YACA8B;gBACE9B,mCAAmC;YACrC;QACF,CAAA,GACA;QACEJ;QACAD;QACAR;QACAH;QACAoB;QACAF;QACAV;QACAQ;KACD;IAGHvB,OAAMsD,mBAAmB,CAAC1D,eAAe,IAAMsC;IAE/C,OAAO;QAAEhB,YAAYqC,IAAAA,6BAAa,EAACrC,YAAYE;QAAqBf;QAAiB6B;IAAW;AAClG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/activedescendant/useOptionWalker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface UseOptionWalkerOptions {\n matchOption: (el: HTMLElement) => boolean;\n}\n\nexport function useOptionWalker<TListboxElement extends HTMLElement>(options: UseOptionWalkerOptions) {\n const { matchOption } = options;\n const { targetDocument } = useFluent();\n const treeWalkerRef = React.useRef<TreeWalker | null>(null);\n const listboxRef = React.useRef<TListboxElement | null>(null);\n\n const optionFilter = React.useCallback(\n (node: Node) => {\n if (isHTMLElement(node) && matchOption(node)) {\n return NodeFilter.FILTER_ACCEPT;\n }\n\n return NodeFilter.FILTER_SKIP;\n },\n [matchOption],\n );\n\n const setListbox = React.useCallback(\n (el: TListboxElement) => {\n if (el && targetDocument) {\n listboxRef.current = el;\n treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, optionFilter);\n } else {\n listboxRef.current = null;\n }\n },\n [targetDocument, optionFilter],\n );\n\n const optionWalker = React.useMemo(\n () => ({\n first: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.firstChild() as HTMLElement | null;\n },\n last: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.lastChild() as HTMLElement | null;\n },\n next: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.nextNode() as HTMLElement | null;\n },\n prev: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.previousNode() as HTMLElement | null;\n },\n find: (predicate: (id: string) => boolean, startFrom?: string) => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n const start = startFrom ? targetDocument?.getElementById(startFrom) : null;\n treeWalkerRef.current.currentNode = start ?? listboxRef.current;\n let cur: HTMLElement | null = treeWalkerRef.current.currentNode as HTMLElement;\n while (cur && !predicate(cur.id)) {\n cur = treeWalkerRef.current.nextNode() as HTMLElement | null;\n }\n\n return cur;\n },\n setCurrent: (el: HTMLElement) => {\n if (!treeWalkerRef.current) {\n return;\n }\n\n treeWalkerRef.current.currentNode = el;\n },\n }),\n [targetDocument],\n );\n\n return {\n optionWalker,\n listboxCallbackRef: setListbox,\n };\n}\n"],"names":["useOptionWalker","options","matchOption","targetDocument","useFluent","treeWalkerRef","React","useRef","listboxRef","optionFilter","useCallback","node","isHTMLElement","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","setListbox","el","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","currentNode","firstChild","last","lastChild","next","nextNode","prev","previousNode","find","predicate","startFrom","start","getElementById","cur","id","setCurrent","listboxCallbackRef"],"
|
|
1
|
+
{"version":3,"sources":["../src/activedescendant/useOptionWalker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface UseOptionWalkerOptions {\n matchOption: (el: HTMLElement) => boolean;\n}\n\nexport function useOptionWalker<TListboxElement extends HTMLElement>(options: UseOptionWalkerOptions) {\n const { matchOption } = options;\n const { targetDocument } = useFluent();\n const treeWalkerRef = React.useRef<TreeWalker | null>(null);\n const listboxRef = React.useRef<TListboxElement | null>(null);\n\n const optionFilter = React.useCallback(\n (node: Node) => {\n if (isHTMLElement(node) && matchOption(node)) {\n return NodeFilter.FILTER_ACCEPT;\n }\n\n return NodeFilter.FILTER_SKIP;\n },\n [matchOption],\n );\n\n const setListbox = React.useCallback(\n (el: TListboxElement) => {\n if (el && targetDocument) {\n listboxRef.current = el;\n treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, optionFilter);\n } else {\n listboxRef.current = null;\n }\n },\n [targetDocument, optionFilter],\n );\n\n const optionWalker = React.useMemo(\n () => ({\n first: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.firstChild() as HTMLElement | null;\n },\n last: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.lastChild() as HTMLElement | null;\n },\n next: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.nextNode() as HTMLElement | null;\n },\n prev: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.previousNode() as HTMLElement | null;\n },\n find: (predicate: (id: string) => boolean, startFrom?: string) => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n const start = startFrom ? targetDocument?.getElementById(startFrom) : null;\n treeWalkerRef.current.currentNode = start ?? listboxRef.current;\n let cur: HTMLElement | null = treeWalkerRef.current.currentNode as HTMLElement;\n while (cur && !predicate(cur.id)) {\n cur = treeWalkerRef.current.nextNode() as HTMLElement | null;\n }\n\n return cur;\n },\n setCurrent: (el: HTMLElement) => {\n if (!treeWalkerRef.current) {\n return;\n }\n\n treeWalkerRef.current.currentNode = el;\n },\n }),\n [targetDocument],\n );\n\n return {\n optionWalker,\n listboxCallbackRef: setListbox,\n };\n}\n"],"names":["useOptionWalker","options","matchOption","targetDocument","useFluent","treeWalkerRef","React","useRef","listboxRef","optionFilter","useCallback","node","isHTMLElement","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","setListbox","el","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","currentNode","firstChild","last","lastChild","next","nextNode","prev","previousNode","find","predicate","startFrom","start","getElementById","cur","id","setCurrent","listboxCallbackRef"],"mappings":";;;;+BAQgBA;;;eAAAA;;;;iEARO;qCACyB;gCAClB;AAMvB,SAASA,gBAAqDC,OAA+B;IAClG,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,gBAAgBC,OAAMC,MAAM,CAAoB;IACtD,MAAMC,aAAaF,OAAMC,MAAM,CAAyB;IAExD,MAAME,eAAeH,OAAMI,WAAW,CACpC,CAACC;QACC,IAAIC,IAAAA,6BAAa,EAACD,SAAST,YAAYS,OAAO;YAC5C,OAAOE,WAAWC,aAAa;QACjC;QAEA,OAAOD,WAAWE,WAAW;IAC/B,GACA;QAACb;KAAY;IAGf,MAAMc,aAAaV,OAAMI,WAAW,CAClC,CAACO;QACC,IAAIA,MAAMd,gBAAgB;YACxBK,WAAWU,OAAO,GAAGD;YACrBZ,cAAca,OAAO,GAAGf,eAAegB,gBAAgB,CAACF,IAAIJ,WAAWO,YAAY,EAAEX;QACvF,OAAO;YACLD,WAAWU,OAAO,GAAG;QACvB;IACF,GACA;QAACf;QAAgBM;KAAa;IAGhC,MAAMY,eAAef,OAAMgB,OAAO,CAChC,IAAO,CAAA;YACLC,OAAO;gBACL,IAAI,CAAClB,cAAca,OAAO,IAAI,CAACV,WAAWU,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEAb,cAAca,OAAO,CAACM,WAAW,GAAGhB,WAAWU,OAAO;gBACtD,OAAOb,cAAca,OAAO,CAACO,UAAU;YACzC;YACAC,MAAM;gBACJ,IAAI,CAACrB,cAAca,OAAO,IAAI,CAACV,WAAWU,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEAb,cAAca,OAAO,CAACM,WAAW,GAAGhB,WAAWU,OAAO;gBACtD,OAAOb,cAAca,OAAO,CAACS,SAAS;YACxC;YACAC,MAAM;gBACJ,IAAI,CAACvB,cAAca,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOb,cAAca,OAAO,CAACW,QAAQ;YACvC;YACAC,MAAM;gBACJ,IAAI,CAACzB,cAAca,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOb,cAAca,OAAO,CAACa,YAAY;YAC3C;YACAC,MAAM,CAACC,WAAoCC;gBACzC,IAAI,CAAC7B,cAAca,OAAO,IAAI,CAACV,WAAWU,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEA,MAAMiB,QAAQD,YAAY/B,2BAAAA,qCAAAA,eAAgBiC,cAAc,CAACF,aAAa;gBACtE7B,cAAca,OAAO,CAACM,WAAW,GAAGW,kBAAAA,mBAAAA,QAAS3B,WAAWU,OAAO;gBAC/D,IAAImB,MAA0BhC,cAAca,OAAO,CAACM,WAAW;gBAC/D,MAAOa,OAAO,CAACJ,UAAUI,IAAIC,EAAE,EAAG;oBAChCD,MAAMhC,cAAca,OAAO,CAACW,QAAQ;gBACtC;gBAEA,OAAOQ;YACT;YACAE,YAAY,CAACtB;gBACX,IAAI,CAACZ,cAAca,OAAO,EAAE;oBAC1B;gBACF;gBAEAb,cAAca,OAAO,CAACM,WAAW,GAAGP;YACtC;QACF,CAAA,GACA;QAACd;KAAe;IAGlB,OAAO;QACLkB;QACAmB,oBAAoBxB;IACtB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button/index.ts"],"sourcesContent":["export { useARIAButtonProps } from './useARIAButtonProps';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { useARIAButtonShorthand } from './useARIAButtonShorthand';\nexport type {\n ARIAButtonAlteredProps,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonSlotProps,\n ARIAButtonType,\n} from './types';\n"],"names":["useARIAButtonProps","useARIAButtonShorthand"],"
|
|
1
|
+
{"version":3,"sources":["../src/button/index.ts"],"sourcesContent":["export { useARIAButtonProps } from './useARIAButtonProps';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { useARIAButtonShorthand } from './useARIAButtonShorthand';\nexport type {\n ARIAButtonAlteredProps,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonSlotProps,\n ARIAButtonType,\n} from './types';\n"],"names":["useARIAButtonProps","useARIAButtonShorthand"],"mappings":";;;;;;;;;;;IAASA,kBAAkB;eAAlBA,sCAAkB;;IAElBC,sBAAsB;eAAtBA,8CAAsB;;;oCAFI;wCAEI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button/types.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"sources":["../src/button/types.ts"],"sourcesContent":["import type {\n DistributiveOmit,\n ExtractSlotProps,\n Slot,\n UnionToIntersection,\n JSXIntrinsicElement,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\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> = DistributiveOmit<\n React.PropsWithRef<JSXIntrinsicElement<Type>>,\n 'children'\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 JSXIntrinsicElement<'button'>,\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'disabled' | 'aria-disabled' | 'tabIndex'\n >\n : never)\n | (Type extends 'a'\n ? Pick<\n JSXIntrinsicElement<'a'>,\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role' | 'href'\n >\n : never)\n | (Type extends 'div'\n ? Pick<JSXIntrinsicElement<'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"],"names":[],"mappings":";;;;;iEAOuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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 // the role needs to be explicitly set if the href is undefined\n const isLink = !!(rest as ARIAButtonResultProps<'a', Props>).href;\n let roleOverride = isLink ? undefined : 'button';\n if (!roleOverride && isDisabled) {\n // need to set role=link explicitly for disabled links\n roleOverride = 'link';\n }\n\n const resultProps = {\n role: roleOverride,\n tabIndex: disabledFocusable || (!isLink && !disabled) ? 0 : undefined,\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': isDisabled,\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"],"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","isLink","href","roleOverride","resultProps","role","tabIndex"],"
|
|
1
|
+
{"version":3,"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 // the role needs to be explicitly set if the href is undefined\n const isLink = !!(rest as ARIAButtonResultProps<'a', Props>).href;\n let roleOverride = isLink ? undefined : 'button';\n if (!roleOverride && isDisabled) {\n // need to set role=link explicitly for disabled links\n roleOverride = 'link';\n }\n\n const resultProps = {\n role: roleOverride,\n tabIndex: disabledFocusable || (!isLink && !disabled) ? 0 : undefined,\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': isDisabled,\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"],"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","isLink","href","roleOverride","resultProps","role","tabIndex"],"mappings":";;;;+BAgCgBA;;;eAAAA;;;;8BAhCa;gCACI;iEACV;AA8BhB,SAASA,mBACdC,IAAW,EACXC,KAAa;IAEb,MAAM,EACJC,QAAQ,EACRC,oBAAoB,KAAK,EACzB,CAAC,gBAAgB,EAAEC,YAAY,EAC/BC,OAAO,EACPC,SAAS,EACTC,OAAO,EACP,GAAGC,MACJ,GAAGP,kBAAAA,mBAAAA,QAAS,CAAC;IAEd,MAAMQ,yBAAyB,OAAOL,iBAAiB,WAAWA,iBAAiB,SAASA;IAE5F,MAAMM,aAAaR,YAAYC,qBAAqBM;IAEpD,MAAME,cAAcC,IAAAA,gCAAgB,EAAC,CAACC;QACpC,IAAIH,YAAY;YACdG,GAAGC,cAAc;YACjBD,GAAGE,eAAe;QACpB,OAAO;YACLV,oBAAAA,8BAAAA,QAAUQ;QACZ;IACF;IAEA,MAAMG,gBAAgBJ,IAAAA,gCAAgB,EAAC,CAACC;QACtCP,sBAAAA,gCAAAA,UAAYO;QAEZ,IAAIA,GAAGI,kBAAkB,IAAI;YAC3B;QACF;QAEA,MAAMC,MAAML,GAAGK,GAAG;QAElB,IAAIR,cAAeQ,CAAAA,QAAQC,mBAAK,IAAID,QAAQE,mBAAK,AAAD,GAAI;YAClDP,GAAGC,cAAc;YACjBD,GAAGE,eAAe;YAClB;QACF;QAEA,IAAIG,QAAQE,mBAAK,EAAE;YACjBP,GAAGC,cAAc;YACjB;QACF,OAGK,IAAII,QAAQC,mBAAK,EAAE;YACtBN,GAAGC,cAAc;YACjBD,GAAGQ,aAAa,CAACC,KAAK;QACxB;IACF;IAEA,MAAMC,cAAcX,IAAAA,gCAAgB,EAAC,CAACC;QACpCN,oBAAAA,8BAAAA,QAAUM;QAEV,IAAIA,GAAGI,kBAAkB,IAAI;YAC3B;QACF;QAEA,MAAMC,MAAML,GAAGK,GAAG;QAElB,IAAIR,cAAeQ,CAAAA,QAAQC,mBAAK,IAAID,QAAQE,mBAAK,AAAD,GAAI;YAClDP,GAAGC,cAAc;YACjBD,GAAGE,eAAe;YAClB;QACF;QAEA,IAAIG,QAAQE,mBAAK,EAAE;YACjBP,GAAGC,cAAc;YACjBD,GAAGQ,aAAa,CAACC,KAAK;QACxB;IACF;IAEA,+FAA+F;IAC/F,IAAItB,SAAS,YAAYA,SAASwB,WAAW;QAC3C,OAAO;YACL,GAAGhB,IAAI;YACPN,UAAUA,YAAY,CAACC;YACvB,iBAAiBA,oBAAoB,OAAOM;YAC5C,6EAA6E;YAC7E,yGAAyG;YACzGJ,SAASF,oBAAoBqB,YAAYb;YACzCJ,SAASJ,oBAAoBqB,YAAYjB;YACzCD,WAAWH,oBAAoBqB,YAAYlB;QAC7C;IACF,OAIK;QACH,+DAA+D;QAC/D,MAAMmB,SAAS,CAAC,CAAC,AAACjB,KAA2CkB,IAAI;QACjE,IAAIC,eAAeF,SAASD,YAAY;QACxC,IAAI,CAACG,gBAAgBjB,YAAY;YAC/B,sDAAsD;YACtDiB,eAAe;QACjB;QAEA,MAAMC,cAAc;YAClBC,MAAMF;YACNG,UAAU3B,qBAAsB,CAACsB,UAAU,CAACvB,WAAY,IAAIsB;YAC5D,GAAGhB,IAAI;YACP,iFAAiF;YACjF,8DAA8D;YAC9D,kCAAkC;YAClCH,SAASM;YACTJ,SAASgB;YACTjB,WAAWU;YACX,iBAAiBN;QACnB;QAEA,IAAIV,SAAS,OAAOU,YAAY;YAC7BkB,YAAkDF,IAAI,GAAGF;QAC5D;QAEA,OAAOI;IACT;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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 * @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 = ((value, options) => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const shorthand = resolveShorthand(value, options);\n const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);\n return shorthand && shorthandARIAButton;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n}) as ResolveShorthandFunction<ARIAButtonSlotProps>;\n"],"names":["useARIAButtonShorthand","value","options","shorthand","resolveShorthand","shorthandARIAButton","useARIAButtonProps","as"],"
|
|
1
|
+
{"version":3,"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 * @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 = ((value, options) => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const shorthand = resolveShorthand(value, options);\n const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);\n return shorthand && shorthandARIAButton;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n}) as ResolveShorthandFunction<ARIAButtonSlotProps>;\n"],"names":["useARIAButtonShorthand","value","options","shorthand","resolveShorthand","shorthandARIAButton","useARIAButtonProps","as"],"mappings":";;;;+BAgBaA;;;eAAAA;;;gCAhBoB;oCACE;AAe5B,MAAMA,yBAA0B,CAACC,OAAOC;IAC7C,4DAA4D;IAC5D,MAAMC,YAAYC,IAAAA,gCAAgB,EAACH,OAAOC;QACsCC;IAAhF,MAAME,sBAAsBC,IAAAA,sCAAkB,EAAkCH,CAAAA,gBAAAA,sBAAAA,gCAAAA,UAAWI,EAAE,cAAbJ,2BAAAA,gBAAiB,UAAUA;IAC3G,OAAOA,aAAaE;AACpB,4DAA4D;AAC9D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n useARIAButtonShorthand,\n useARIAButtonProps,\n} from './button/index';\nexport {\n useActiveDescendant,\n ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE,\n ActiveDescendantContextProvider,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from './activedescendant';\nexport type {\n ActiveDescendantImperativeRef,\n ActiveDescendantOptions,\n ActiveDescendantContextValue,\n ActiveDescendantChangeEvent,\n} from './activedescendant';\nexport type {\n ARIAButtonSlotProps,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonType,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonAlteredProps,\n} from './button/index';\n\nexport {\n AriaLiveAnnouncer,\n renderAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncerContextValues_unstable,\n} from './AriaLiveAnnouncer/index';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer/index';\n"],"names":["ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","ActiveDescendantContextProvider","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useARIAButtonProps","useARIAButtonShorthand","useActiveDescendant","useActiveDescendantContext","useAriaLiveAnnouncerContextValues_unstable","useAriaLiveAnnouncer_unstable","useHasParentActiveDescendantContext"],"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n useARIAButtonShorthand,\n useARIAButtonProps,\n} from './button/index';\nexport {\n useActiveDescendant,\n ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE,\n ActiveDescendantContextProvider,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from './activedescendant';\nexport type {\n ActiveDescendantImperativeRef,\n ActiveDescendantOptions,\n ActiveDescendantContextValue,\n ActiveDescendantChangeEvent,\n} from './activedescendant';\nexport type {\n ARIAButtonSlotProps,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonType,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonAlteredProps,\n} from './button/index';\n\nexport {\n AriaLiveAnnouncer,\n renderAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncerContextValues_unstable,\n} from './AriaLiveAnnouncer/index';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer/index';\n"],"names":["ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","ActiveDescendantContextProvider","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useARIAButtonProps","useARIAButtonShorthand","useActiveDescendant","useActiveDescendantContext","useAriaLiveAnnouncerContextValues_unstable","useAriaLiveAnnouncer_unstable","useHasParentActiveDescendantContext"],"mappings":";;;;;;;;;;;IAOEA,uCAAuC;eAAvCA,yDAAuC;;IACvCC,+BAA+B;eAA/BA,iDAA+B;;IAqB/BC,iBAAiB;eAAjBA,yBAAiB;;IACjBC,gCAAgC;eAAhCA,wCAAgC;;IA3BhCC,kBAAkB;eAAlBA,yBAAkB;;IAFlB,4DAA4D;IAC5DC,sBAAsB;eAAtBA,6BAAsB;;IAItBC,mBAAmB;eAAnBA,qCAAmB;;IAGnBC,0BAA0B;eAA1BA,4CAA0B;;IAuB1BC,0CAA0C;eAA1CA,kDAA0C;;IAD1CC,6BAA6B;eAA7BA,qCAA6B;;IArB7BC,mCAAmC;eAAnCA,qDAAmC;;;uBAN9B;kCAOA;wBAsBA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-aria",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.16.1",
|
|
4
4
|
"description": "React helper to ensure ARIA",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
22
|
-
"@fluentui/react-shared-contexts": "^9.24.
|
|
23
|
-
"@fluentui/react-jsx-runtime": "^9.1.
|
|
24
|
-
"@fluentui/react-tabster": "^9.26.
|
|
25
|
-
"@fluentui/react-utilities": "^9.
|
|
22
|
+
"@fluentui/react-shared-contexts": "^9.24.1",
|
|
23
|
+
"@fluentui/react-jsx-runtime": "^9.1.4",
|
|
24
|
+
"@fluentui/react-tabster": "^9.26.2",
|
|
25
|
+
"@fluentui/react-utilities": "^9.23.1",
|
|
26
26
|
"@swc/helpers": "^0.5.1"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|