@fluentui/react-tabster 9.5.6 → 9.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +51 -1
- package/CHANGELOG.md +22 -2
- package/dist/index.d.ts +12 -3
- package/lib/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib/focus/focusVisiblePolyfill.js +4 -9
- package/lib/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib/hooks/useFocusVisible.js +4 -4
- package/lib/hooks/useFocusVisible.js.map +1 -1
- package/lib-amd/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib-amd/focus/focusVisiblePolyfill.js +6 -12
- package/lib-amd/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib-amd/hooks/useFocusVisible.js +5 -2
- package/lib-amd/hooks/useFocusVisible.js.map +1 -1
- package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib-commonjs/focus/focusVisiblePolyfill.js +6 -11
- package/lib-commonjs/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib-commonjs/hooks/useFocusVisible.js +4 -4
- package/lib-commonjs/hooks/useFocusVisible.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,57 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 16 Mar 2023 14:33:32 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabster_v9.6.0",
|
|
7
|
+
"version": "9.6.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-tabster",
|
|
13
|
+
"commit": "fe1014bbcd770a7b38a3a9a09595e93297c2da26",
|
|
14
|
+
"comment": "feat: add options to useFocusVisible() hook"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-tabster",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.1",
|
|
20
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Wed, 15 Mar 2023 10:19:52 GMT",
|
|
27
|
+
"tag": "@fluentui/react-tabster_v9.5.7",
|
|
28
|
+
"version": "9.5.7",
|
|
29
|
+
"comments": {
|
|
30
|
+
"none": [
|
|
31
|
+
{
|
|
32
|
+
"author": "tigeroakes@microsoft.com",
|
|
33
|
+
"package": "@fluentui/react-tabster",
|
|
34
|
+
"commit": "5b6822abdd478455086630785d35d464ca68a1cc",
|
|
35
|
+
"comment": "Add JSDoc for tabster focus indicator selector"
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
"patch": [
|
|
39
|
+
{
|
|
40
|
+
"author": "beachball",
|
|
41
|
+
"package": "@fluentui/react-tabster",
|
|
42
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.1",
|
|
43
|
+
"commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"author": "beachball",
|
|
47
|
+
"package": "@fluentui/react-tabster",
|
|
48
|
+
"comment": "Bump @fluentui/react-theme to v9.1.6",
|
|
49
|
+
"commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"date": "Mon, 13 Mar 2023 08:58:26 GMT",
|
|
6
56
|
"tag": "@fluentui/react-tabster_v9.5.6",
|
|
7
57
|
"version": "9.5.6",
|
|
8
58
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 16 Mar 2023 14:33:32 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.6.0)
|
|
8
|
+
|
|
9
|
+
Thu, 16 Mar 2023 14:33:32 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.7..@fluentui/react-tabster_v9.6.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: add options to useFocusVisible() hook ([PR #27198](https://github.com/microsoft/fluentui/pull/27198) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.7.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.5.7)
|
|
18
|
+
|
|
19
|
+
Wed, 15 Mar 2023 10:19:52 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.6..@fluentui/react-tabster_v9.5.7)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react-shared-contexts to v9.3.1 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
|
|
25
|
+
- Bump @fluentui/react-theme to v9.1.6 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
|
|
26
|
+
|
|
7
27
|
## [9.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.5.6)
|
|
8
28
|
|
|
9
|
-
Mon, 13 Mar 2023 08:
|
|
29
|
+
Mon, 13 Mar 2023 08:58:26 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.5..@fluentui/react-tabster_v9.5.6)
|
|
11
31
|
|
|
12
32
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -7,9 +7,9 @@ import { Types } from 'tabster';
|
|
|
7
7
|
/**
|
|
8
8
|
* @internal
|
|
9
9
|
* @param scope - Applies the ponyfill to all DOM children
|
|
10
|
-
* @param
|
|
10
|
+
* @param targetWindow - window
|
|
11
11
|
*/
|
|
12
|
-
export declare function applyFocusVisiblePolyfill(scope: HTMLElement,
|
|
12
|
+
export declare function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void;
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Creates a style for @see makeStyles that includes the necessary selectors for focus.
|
|
@@ -21,6 +21,11 @@ export declare function applyFocusVisiblePolyfill(scope: HTMLElement, win: Windo
|
|
|
21
21
|
export declare function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector, enableOutline, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
|
|
22
22
|
|
|
23
23
|
export declare interface CreateCustomFocusIndicatorStyleOptions {
|
|
24
|
+
/**
|
|
25
|
+
* Control if the indicator appears when the corresponding element is focused,
|
|
26
|
+
* or any child is focused within the corresponding element.
|
|
27
|
+
* @default 'focus'
|
|
28
|
+
*/
|
|
24
29
|
selector?: 'focus' | 'focus-within';
|
|
25
30
|
/**
|
|
26
31
|
* Enables the browser default outline style
|
|
@@ -118,7 +123,11 @@ export declare const useFocusFinders: () => {
|
|
|
118
123
|
findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Partial<Types.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
|
|
119
124
|
};
|
|
120
125
|
|
|
121
|
-
export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
|
|
126
|
+
export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options?: UseFocusVisibleOptions): React_2.RefObject<TElement>;
|
|
127
|
+
|
|
128
|
+
declare type UseFocusVisibleOptions = {
|
|
129
|
+
targetDocument?: HTMLDocument;
|
|
130
|
+
};
|
|
122
131
|
|
|
123
132
|
/**
|
|
124
133
|
* A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","enableOutline","outlineStyle","undefined"],"sources":["../src/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n selector?: 'focus' | 'focus-within';\n /**\n * Enables the browser default outline style\n * @default false\n */\n enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n style: TStyle,\n {\n selector = defaultOptions.selector,\n enableOutline = false,\n }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n return {\n ':focus': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n ':focus-visible': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n\n ...(selector === 'focus' && {\n [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n }),\n ...(selector === 'focus-within' && {\n [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n }),\n };\n}\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,aAAa;
|
|
1
|
+
{"version":3,"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","enableOutline","outlineStyle","undefined"],"sources":["../src/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n /**\n * Control if the indicator appears when the corresponding element is focused,\n * or any child is focused within the corresponding element.\n * @default 'focus'\n */\n selector?: 'focus' | 'focus-within';\n /**\n * Enables the browser default outline style\n * @default false\n */\n enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n style: TStyle,\n {\n selector = defaultOptions.selector,\n enableOutline = false,\n }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n return {\n ':focus': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n ':focus-visible': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n\n ...(selector === 'focus' && {\n [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n }),\n ...(selector === 'focus-within' && {\n [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n }),\n };\n}\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,aAAa;AAsBnF;;;;;;;AAOA,OAAM,SAAUC,+BAA+BA,CAC7CC,KAAa,EACb;EACEC,QAAQ,GAAGL,cAAc,CAACK,QAAQ;EAClCC,aAAa,GAAG;AAAK,IACqBN,cAAc;EAE1D,OAAO;IACL,QAAQ,EAAE;MACRO,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IACD,gBAAgB,EAAE;MAChBD,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IAED,IAAIH,QAAQ,KAAK,OAAO,IAAI;MAC1B,CAAC,KAAKJ,kBAAkB,GAAG,GAAGG;KAC/B,CAAC;IACF,IAAIC,QAAQ,KAAK,cAAc,IAAI;MACjC,CAAC,KAAKH,iBAAiB,KAAKG,QAAQ,EAAE,GAAGD;KAC1C;GACF;AACH"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import { isHTMLElement } from '@fluentui/react-utilities';
|
|
1
2
|
import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
|
|
2
3
|
import { FOCUS_VISIBLE_ATTR } from './constants';
|
|
3
4
|
/**
|
|
4
5
|
* @internal
|
|
5
6
|
* @param scope - Applies the ponyfill to all DOM children
|
|
6
|
-
* @param
|
|
7
|
+
* @param targetWindow - window
|
|
7
8
|
*/
|
|
8
|
-
export function applyFocusVisiblePolyfill(scope,
|
|
9
|
+
export function applyFocusVisiblePolyfill(scope, targetWindow) {
|
|
9
10
|
if (alreadyInScope(scope)) {
|
|
10
11
|
// Focus visible polyfill already applied at this scope
|
|
11
12
|
return () => undefined;
|
|
@@ -13,7 +14,7 @@ export function applyFocusVisiblePolyfill(scope, win) {
|
|
|
13
14
|
const state = {
|
|
14
15
|
current: undefined
|
|
15
16
|
};
|
|
16
|
-
const keyborg = createKeyborg(
|
|
17
|
+
const keyborg = createKeyborg(targetWindow);
|
|
17
18
|
// When navigation mode changes remove the focus-visible selector
|
|
18
19
|
keyborg.subscribe(isNavigatingWithKeyboard => {
|
|
19
20
|
if (!isNavigatingWithKeyboard && state.current) {
|
|
@@ -60,12 +61,6 @@ function applyFocusVisibleClass(el) {
|
|
|
60
61
|
function removeFocusVisibleClass(el) {
|
|
61
62
|
el.removeAttribute(FOCUS_VISIBLE_ATTR);
|
|
62
63
|
}
|
|
63
|
-
function isHTMLElement(target) {
|
|
64
|
-
if (!target) {
|
|
65
|
-
return false;
|
|
66
|
-
}
|
|
67
|
-
return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
|
|
68
|
-
}
|
|
69
64
|
function alreadyInScope(el) {
|
|
70
65
|
if (!el) {
|
|
71
66
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","
|
|
1
|
+
{"version":3,"names":["isHTMLElement","KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","focusVisible","removeEventListener","el","setAttribute","removeAttribute","parentElement"],"sources":["../src/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\n\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n /**\n * Current element with focus visible in state\n */\n current: HTMLElement | undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n focusVisible: boolean | undefined;\n} & HTMLElement;\n\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return () => undefined;\n }\n\n const state: FocusVisibleState = {\n current: undefined,\n };\n\n const keyborg = createKeyborg(targetWindow);\n\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard && state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n });\n\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e: KeyborgFocusInEvent) => {\n if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n // Griffel can't create chained global styles so use the parent element for now\n state.current = e.target;\n applyFocusVisibleClass(state.current);\n }\n };\n\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n // Return disposer\n return () => {\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n disposeKeyborg(keyborg);\n };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\n\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n if (!el) {\n return false;\n }\n\n if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n return true;\n }\n\n return alreadyInScope(el?.parentElement);\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,2BAA2B;AACzD,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,SAAS;AAE7F,SAASC,kBAAkB,QAAQ,aAAa;AAoBhD;;;;;AAKA,OAAM,SAAUC,yBAAyBA,CAACC,KAAkB,EAAEC,YAAoB;EAChF,IAAIC,cAAc,CAACF,KAAK,CAAC,EAAE;IACzB;IACA,OAAO,MAAMG,SAAS;;EAGxB,MAAMC,KAAK,GAAsB;IAC/BC,OAAO,EAAEF;GACV;EAED,MAAMG,OAAO,GAAGV,aAAa,CAACK,YAAY,CAAC;EAE3C;EACAK,OAAO,CAACC,SAAS,CAACC,wBAAwB,IAAG;IAC3C,IAAI,CAACA,wBAAwB,IAAIJ,KAAK,CAACC,OAAO,EAAE;MAC9CI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;EAE7B,CAAC,CAAC;EAEF;EACA;EACA,MAAMO,eAAe,GAAIC,CAAsB,IAAI;IACjD,IAAIP,KAAK,CAACC,OAAO,EAAE;MACjBI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;IAG3B,IAAIG,OAAO,CAACE,wBAAwB,EAAE,IAAId,aAAa,CAACiB,CAAC,CAACC,MAAM,CAAC,IAAID,CAAC,CAACC,MAAM,EAAE;MAC7E;MACAR,KAAK,CAACC,OAAO,GAAGM,CAAC,CAACC,MAAM;MACxBC,sBAAsB,CAACT,KAAK,CAACC,OAAO,CAAC;;EAEzC,CAAC;EAED;EACA,MAAMS,YAAY,GAAIH,CAAa,IAAI;IACrC,IAAI,CAACA,CAAC,CAACI,aAAa,IAAKrB,aAAa,CAACiB,CAAC,CAACI,aAAa,CAAC,IAAI,CAACf,KAAK,CAACgB,QAAQ,CAACL,CAAC,CAACI,aAAa,CAAE,EAAE;MAC5F,IAAIX,KAAK,CAACC,OAAO,EAAE;QACjBI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;QACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;;EAG/B,CAAC;EAEDH,KAAK,CAACiB,gBAAgB,CAACtB,eAAe,EAAEe,eAAmC,CAAC;EAC5EV,KAAK,CAACiB,gBAAgB,CAAC,UAAU,EAAEH,YAAY,CAAC;EAC/Cd,KAA0C,CAACkB,YAAY,GAAG,IAAI;EAE/D;EACA,OAAO,MAAK;IACVlB,KAAK,CAACmB,mBAAmB,CAACxB,eAAe,EAAEe,eAAmC,CAAC;IAC/EV,KAAK,CAACmB,mBAAmB,CAAC,UAAU,EAAEL,YAAY,CAAC;IACnD,OAAQd,KAA0C,CAACkB,YAAY;IAC/DrB,cAAc,CAACS,OAAO,CAAC;EACzB,CAAC;AACH;AAEA,SAASO,sBAAsBA,CAACO,EAAe;EAC7CA,EAAE,CAACC,YAAY,CAACvB,kBAAkB,EAAE,EAAE,CAAC;AACzC;AAEA,SAASW,uBAAuBA,CAACW,EAAe;EAC9CA,EAAE,CAACE,eAAe,CAACxB,kBAAkB,CAAC;AACxC;AAEA,SAASI,cAAcA,CAACkB,EAAkC;EACxD,IAAI,CAACA,EAAE,EAAE;IACP,OAAO,KAAK;;EAGd,IAAKA,EAAuC,CAACF,YAAY,EAAE;IACzD,OAAO,IAAI;;EAGb,OAAOhB,cAAc,CAACkB,EAAE,aAAFA,EAAE,uBAAFA,EAAE,CAAEG,aAAa,CAAC;AAC1C"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
3
|
import { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';
|
|
4
|
-
export function useFocusVisible() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
} = useFluent();
|
|
4
|
+
export function useFocusVisible(options = {}) {
|
|
5
|
+
var _a;
|
|
6
|
+
const contentValue = useFluent();
|
|
8
7
|
const scopeRef = React.useRef(null);
|
|
8
|
+
const targetDocument = (_a = options.targetDocument) !== null && _a !== void 0 ? _a : contentValue.targetDocument;
|
|
9
9
|
React.useEffect(() => {
|
|
10
10
|
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
|
|
11
11
|
return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","
|
|
1
|
+
{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contentValue","scopeRef","useRef","targetDocument","_a","useEffect","defaultView","current"],"sources":["../src/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n targetDocument?: HTMLDocument;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n const contentValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contentValue.targetDocument;\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n\n return scopeRef;\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAEjF,SAASC,yBAAyB,QAAQ,+BAA+B;AAMzE,OAAM,SAAUC,eAAeA,CAA6CC,OAAA,GAAkC,EAAE;;EAC9G,MAAMC,YAAY,GAAGJ,SAAS,EAAE;EAChC,MAAMK,QAAQ,GAAGP,KAAK,CAACQ,MAAM,CAAW,IAAI,CAAC;EAE7C,MAAMC,cAAc,GAAG,CAAAC,EAAA,GAAAL,OAAO,CAACI,cAAc,cAAAC,EAAA,cAAAA,EAAA,GAAIJ,YAAY,CAACG,cAAc;EAE5ET,KAAK,CAACW,SAAS,CAAC,MAAK;IACnB,IAAI,CAAAF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,WAAW,KAAIL,QAAQ,CAACM,OAAO,EAAE;MACnD,OAAOV,yBAAyB,CAACI,QAAQ,CAACM,OAAO,EAAEJ,cAAc,CAACG,WAAW,CAAC;;EAElF,CAAC,EAAE,CAACL,QAAQ,EAAEE,cAAc,CAAC,CAAC;EAE9B,OAAOF,QAAQ;AACjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createCustomFocusIndicatorStyle.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"createCustomFocusIndicatorStyle.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;IAsBA;;;;;;OAMG;IACH,SAAgB,+BAA+B,CAC7C,KAAa,EACb,EAG0D;;YAH1D,qBAG4C,0BAAc,KAAA,EAFxD,gBAAkC,EAAlC,QAAQ,mBAAG,0BAAc,CAAC,QAAQ,KAAA,EAClC,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA;QAGvB,2CACE,QAAQ,EAAE;gBACR,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aACjD,EACD,gBAAgB,EAAE;gBAChB,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aACjD,IAEE,CAAC,QAAQ,KAAK,OAAO;YACtB,GAAC,OAAK,8BAAkB,MAAG,IAAG,KAAK;eACpC,CAAC,GACC,CAAC,QAAQ,KAAK,cAAc;YAC7B,GAAC,OAAK,6BAAiB,UAAK,QAAU,IAAG,KAAK;eAC/C,CAAC,EACF;IACJ,CAAC;IAtBD,0EAsBC","sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n /**\n * Control if the indicator appears when the corresponding element is focused,\n * or any child is focused within the corresponding element.\n * @default 'focus'\n */\n selector?: 'focus' | 'focus-within';\n /**\n * Enables the browser default outline style\n * @default false\n */\n enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n style: TStyle,\n {\n selector = defaultOptions.selector,\n enableOutline = false,\n }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n return {\n ':focus': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n ':focus-visible': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n\n ...(selector === 'focus' && {\n [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n }),\n ...(selector === 'focus-within' && {\n [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n }),\n };\n}\n"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
define(["require", "exports", "keyborg", "./constants"], function (require, exports, keyborg_1, constants_1) {
|
|
1
|
+
define(["require", "exports", "@fluentui/react-utilities", "keyborg", "./constants"], function (require, exports, react_utilities_1, keyborg_1, constants_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.applyFocusVisiblePolyfill = void 0;
|
|
5
5
|
/**
|
|
6
6
|
* @internal
|
|
7
7
|
* @param scope - Applies the ponyfill to all DOM children
|
|
8
|
-
* @param
|
|
8
|
+
* @param targetWindow - window
|
|
9
9
|
*/
|
|
10
|
-
function applyFocusVisiblePolyfill(scope,
|
|
10
|
+
function applyFocusVisiblePolyfill(scope, targetWindow) {
|
|
11
11
|
if (alreadyInScope(scope)) {
|
|
12
12
|
// Focus visible polyfill already applied at this scope
|
|
13
13
|
return function () { return undefined; };
|
|
@@ -15,7 +15,7 @@ define(["require", "exports", "keyborg", "./constants"], function (require, expo
|
|
|
15
15
|
var state = {
|
|
16
16
|
current: undefined,
|
|
17
17
|
};
|
|
18
|
-
var keyborg = keyborg_1.createKeyborg(
|
|
18
|
+
var keyborg = keyborg_1.createKeyborg(targetWindow);
|
|
19
19
|
// When navigation mode changes remove the focus-visible selector
|
|
20
20
|
keyborg.subscribe(function (isNavigatingWithKeyboard) {
|
|
21
21
|
if (!isNavigatingWithKeyboard && state.current) {
|
|
@@ -30,7 +30,7 @@ define(["require", "exports", "keyborg", "./constants"], function (require, expo
|
|
|
30
30
|
removeFocusVisibleClass(state.current);
|
|
31
31
|
state.current = undefined;
|
|
32
32
|
}
|
|
33
|
-
if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
|
|
33
|
+
if (keyborg.isNavigatingWithKeyboard() && react_utilities_1.isHTMLElement(e.target) && e.target) {
|
|
34
34
|
// Griffel can't create chained global styles so use the parent element for now
|
|
35
35
|
state.current = e.target;
|
|
36
36
|
applyFocusVisibleClass(state.current);
|
|
@@ -38,7 +38,7 @@ define(["require", "exports", "keyborg", "./constants"], function (require, expo
|
|
|
38
38
|
};
|
|
39
39
|
// Make sure that when focus leaves the scope, the focus visible class is removed
|
|
40
40
|
var blurListener = function (e) {
|
|
41
|
-
if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {
|
|
41
|
+
if (!e.relatedTarget || (react_utilities_1.isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {
|
|
42
42
|
if (state.current) {
|
|
43
43
|
removeFocusVisibleClass(state.current);
|
|
44
44
|
state.current = undefined;
|
|
@@ -63,12 +63,6 @@ define(["require", "exports", "keyborg", "./constants"], function (require, expo
|
|
|
63
63
|
function removeFocusVisibleClass(el) {
|
|
64
64
|
el.removeAttribute(constants_1.FOCUS_VISIBLE_ATTR);
|
|
65
65
|
}
|
|
66
|
-
function isHTMLElement(target) {
|
|
67
|
-
if (!target) {
|
|
68
|
-
return false;
|
|
69
|
-
}
|
|
70
|
-
return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
|
|
71
|
-
}
|
|
72
66
|
function alreadyInScope(el) {
|
|
73
67
|
if (!el) {
|
|
74
68
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusVisiblePolyfill.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"focusVisiblePolyfill.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts"],"names":[],"mappings":";;;;IAuBA;;;;OAIG;IACH,SAAgB,yBAAyB,CAAC,KAAkB,EAAE,YAAoB;QAChF,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE;YACzB,uDAAuD;YACvD,OAAO,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;SACxB;QAED,IAAM,KAAK,GAAsB;YAC/B,OAAO,EAAE,SAAS;SACnB,CAAC;QAEF,IAAM,OAAO,GAAG,uBAAa,CAAC,YAAY,CAAC,CAAC;QAE5C,iEAAiE;QACjE,OAAO,CAAC,SAAS,CAAC,UAAA,wBAAwB;YACxC,IAAI,CAAC,wBAAwB,IAAI,KAAK,CAAC,OAAO,EAAE;gBAC9C,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBACvC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;aAC3B;QACH,CAAC,CAAC,CAAC;QAEH,kFAAkF;QAClF,8CAA8C;QAC9C,IAAM,eAAe,GAAG,UAAC,CAAsB;YAC7C,IAAI,KAAK,CAAC,OAAO,EAAE;gBACjB,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBACvC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;aAC3B;YAED,IAAI,OAAO,CAAC,wBAAwB,EAAE,IAAI,+BAAa,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE;gBAC7E,+EAA+E;gBAC/E,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC;gBACzB,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aACvC;QACH,CAAC,CAAC;QAEF,iFAAiF;QACjF,IAAM,YAAY,GAAG,UAAC,CAAa;YACjC,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,+BAAa,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,EAAE;gBAC5F,IAAI,KAAK,CAAC,OAAO,EAAE;oBACjB,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;oBACvC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;iBAC3B;aACF;QACH,CAAC,CAAC;QAEF,KAAK,CAAC,gBAAgB,CAAC,yBAAe,EAAE,eAAmC,CAAC,CAAC;QAC7E,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;QAChD,KAA0C,CAAC,YAAY,GAAG,IAAI,CAAC;QAEhE,kBAAkB;QAClB,OAAO;YACL,KAAK,CAAC,mBAAmB,CAAC,yBAAe,EAAE,eAAmC,CAAC,CAAC;YAChF,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;YACpD,OAAQ,KAA0C,CAAC,YAAY,CAAC;YAChE,wBAAc,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC;IAxDD,8DAwDC;IAED,SAAS,sBAAsB,CAAC,EAAe;QAC7C,EAAE,CAAC,YAAY,CAAC,8BAAkB,EAAE,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,SAAS,uBAAuB,CAAC,EAAe;QAC9C,EAAE,CAAC,eAAe,CAAC,8BAAkB,CAAC,CAAC;IACzC,CAAC;IAED,SAAS,cAAc,CAAC,EAAkC;QACxD,IAAI,CAAC,EAAE,EAAE;YACP,OAAO,KAAK,CAAC;SACd;QAED,IAAK,EAAuC,CAAC,YAAY,EAAE;YACzD,OAAO,IAAI,CAAC;SACb;QAED,OAAO,cAAc,CAAC,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,CAAC,CAAC;IAC3C,CAAC","sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\n\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n /**\n * Current element with focus visible in state\n */\n current: HTMLElement | undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n focusVisible: boolean | undefined;\n} & HTMLElement;\n\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return () => undefined;\n }\n\n const state: FocusVisibleState = {\n current: undefined,\n };\n\n const keyborg = createKeyborg(targetWindow);\n\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard && state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n });\n\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e: KeyborgFocusInEvent) => {\n if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n // Griffel can't create chained global styles so use the parent element for now\n state.current = e.target;\n applyFocusVisibleClass(state.current);\n }\n };\n\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n // Return disposer\n return () => {\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n disposeKeyborg(keyborg);\n };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\n\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n if (!el) {\n return false;\n }\n\n if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n return true;\n }\n\n return alreadyInScope(el?.parentElement);\n}\n"]}
|
|
@@ -2,9 +2,12 @@ define(["require", "exports", "react", "@fluentui/react-shared-contexts", "../fo
|
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.useFocusVisible = void 0;
|
|
5
|
-
function useFocusVisible() {
|
|
6
|
-
var
|
|
5
|
+
function useFocusVisible(options) {
|
|
6
|
+
var _a;
|
|
7
|
+
if (options === void 0) { options = {}; }
|
|
8
|
+
var contentValue = react_shared_contexts_1.useFluent_unstable();
|
|
7
9
|
var scopeRef = React.useRef(null);
|
|
10
|
+
var targetDocument = (_a = options.targetDocument) !== null && _a !== void 0 ? _a : contentValue.targetDocument;
|
|
8
11
|
React.useEffect(function () {
|
|
9
12
|
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
|
|
10
13
|
return focusVisiblePolyfill_1.applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusVisible.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useFocusVisible.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"useFocusVisible.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useFocusVisible.ts"],"names":[],"mappings":";;;;IASA,SAAgB,eAAe,CAA6C,OAAoC;;QAApC,wBAAA,EAAA,YAAoC;QAC9G,IAAM,YAAY,GAAG,0CAAS,EAAE,CAAC;QACjC,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAW,IAAI,CAAC,CAAC;QAE9C,IAAM,cAAc,GAAG,MAAA,OAAO,CAAC,cAAc,mCAAI,YAAY,CAAC,cAAc,CAAC;QAE7E,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,KAAI,QAAQ,CAAC,OAAO,EAAE;gBACnD,OAAO,gDAAyB,CAAC,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;aAChF;QACH,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;QAE/B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAbD,0CAaC","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n targetDocument?: HTMLDocument;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n const contentValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contentValue.targetDocument;\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n\n return scopeRef;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["constants_1","require","createCustomFocusIndicatorStyle","style","selector","defaultOptions","enableOutline","outlineStyle","undefined","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","exports"],"sources":["../src/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n selector?: 'focus' | 'focus-within';\n /**\n * Enables the browser default outline style\n * @default false\n */\n enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n style: TStyle,\n {\n selector = defaultOptions.selector,\n enableOutline = false,\n }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n return {\n ':focus': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n ':focus-visible': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n\n ...(selector === 'focus' && {\n [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n }),\n ...(selector === 'focus-within' && {\n [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n }),\n };\n}\n"],"mappings":";;;;;;AAAA,MAAAA,WAAA,gBAAAC,OAAA;
|
|
1
|
+
{"version":3,"names":["constants_1","require","createCustomFocusIndicatorStyle","style","selector","defaultOptions","enableOutline","outlineStyle","undefined","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","exports"],"sources":["../src/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n /**\n * Control if the indicator appears when the corresponding element is focused,\n * or any child is focused within the corresponding element.\n * @default 'focus'\n */\n selector?: 'focus' | 'focus-within';\n /**\n * Enables the browser default outline style\n * @default false\n */\n enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n style: TStyle,\n {\n selector = defaultOptions.selector,\n enableOutline = false,\n }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n return {\n ':focus': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n ':focus-visible': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n\n ...(selector === 'focus' && {\n [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n }),\n ...(selector === 'focus-within' && {\n [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n }),\n };\n}\n"],"mappings":";;;;;;AAAA,MAAAA,WAAA,gBAAAC,OAAA;AAsBA;;;;;;;AAOA,SAAgBC,+BAA+BA,CAC7CC,KAAa,EACb;EACEC,QAAQ,GAAGJ,WAAA,CAAAK,cAAc,CAACD,QAAQ;EAClCE,aAAa,GAAG;AAAK,IACqBN,WAAA,CAAAK,cAAc;EAE1D,OAAO;IACL,QAAQ,EAAE;MACRE,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IACD,gBAAgB,EAAE;MAChBD,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IAED,IAAIJ,QAAQ,KAAK,OAAO,IAAI;MAC1B,CAAC,KAAKJ,WAAA,CAAAS,kBAAkB,GAAG,GAAGN;KAC/B,CAAC;IACF,IAAIC,QAAQ,KAAK,cAAc,IAAI;MACjC,CAAC,KAAKJ,WAAA,CAAAU,iBAAiB,KAAKN,QAAQ,EAAE,GAAGD;KAC1C;GACF;AACH;AAtBAQ,OAAA,CAAAT,+BAAA,GAAAA,+BAAA"}
|
|
@@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.applyFocusVisiblePolyfill = void 0;
|
|
7
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
7
8
|
const keyborg_1 = /*#__PURE__*/require("keyborg");
|
|
8
9
|
const constants_1 = /*#__PURE__*/require("./constants");
|
|
9
10
|
/**
|
|
10
11
|
* @internal
|
|
11
12
|
* @param scope - Applies the ponyfill to all DOM children
|
|
12
|
-
* @param
|
|
13
|
+
* @param targetWindow - window
|
|
13
14
|
*/
|
|
14
|
-
function applyFocusVisiblePolyfill(scope,
|
|
15
|
+
function applyFocusVisiblePolyfill(scope, targetWindow) {
|
|
15
16
|
if (alreadyInScope(scope)) {
|
|
16
17
|
// Focus visible polyfill already applied at this scope
|
|
17
18
|
return () => undefined;
|
|
@@ -19,7 +20,7 @@ function applyFocusVisiblePolyfill(scope, win) {
|
|
|
19
20
|
const state = {
|
|
20
21
|
current: undefined
|
|
21
22
|
};
|
|
22
|
-
const keyborg = keyborg_1.createKeyborg(
|
|
23
|
+
const keyborg = keyborg_1.createKeyborg(targetWindow);
|
|
23
24
|
// When navigation mode changes remove the focus-visible selector
|
|
24
25
|
keyborg.subscribe(isNavigatingWithKeyboard => {
|
|
25
26
|
if (!isNavigatingWithKeyboard && state.current) {
|
|
@@ -34,7 +35,7 @@ function applyFocusVisiblePolyfill(scope, win) {
|
|
|
34
35
|
removeFocusVisibleClass(state.current);
|
|
35
36
|
state.current = undefined;
|
|
36
37
|
}
|
|
37
|
-
if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
|
|
38
|
+
if (keyborg.isNavigatingWithKeyboard() && react_utilities_1.isHTMLElement(e.target) && e.target) {
|
|
38
39
|
// Griffel can't create chained global styles so use the parent element for now
|
|
39
40
|
state.current = e.target;
|
|
40
41
|
applyFocusVisibleClass(state.current);
|
|
@@ -42,7 +43,7 @@ function applyFocusVisiblePolyfill(scope, win) {
|
|
|
42
43
|
};
|
|
43
44
|
// Make sure that when focus leaves the scope, the focus visible class is removed
|
|
44
45
|
const blurListener = e => {
|
|
45
|
-
if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
|
|
46
|
+
if (!e.relatedTarget || react_utilities_1.isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
|
|
46
47
|
if (state.current) {
|
|
47
48
|
removeFocusVisibleClass(state.current);
|
|
48
49
|
state.current = undefined;
|
|
@@ -67,12 +68,6 @@ function applyFocusVisibleClass(el) {
|
|
|
67
68
|
function removeFocusVisibleClass(el) {
|
|
68
69
|
el.removeAttribute(constants_1.FOCUS_VISIBLE_ATTR);
|
|
69
70
|
}
|
|
70
|
-
function isHTMLElement(target) {
|
|
71
|
-
if (!target) {
|
|
72
|
-
return false;
|
|
73
|
-
}
|
|
74
|
-
return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
|
|
75
|
-
}
|
|
76
71
|
function alreadyInScope(el) {
|
|
77
72
|
if (!el) {
|
|
78
73
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["react_utilities_1","require","keyborg_1","constants_1","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","createKeyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","isHTMLElement","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","KEYBORG_FOCUSIN","focusVisible","removeEventListener","disposeKeyborg","exports","el","setAttribute","FOCUS_VISIBLE_ATTR","removeAttribute","parentElement"],"sources":["../src/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\n\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n /**\n * Current element with focus visible in state\n */\n current: HTMLElement | undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n focusVisible: boolean | undefined;\n} & HTMLElement;\n\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return () => undefined;\n }\n\n const state: FocusVisibleState = {\n current: undefined,\n };\n\n const keyborg = createKeyborg(targetWindow);\n\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard && state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n });\n\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e: KeyborgFocusInEvent) => {\n if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n // Griffel can't create chained global styles so use the parent element for now\n state.current = e.target;\n applyFocusVisibleClass(state.current);\n }\n };\n\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n // Return disposer\n return () => {\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n disposeKeyborg(keyborg);\n };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\n\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n if (!el) {\n return false;\n }\n\n if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n return true;\n }\n\n return alreadyInScope(el?.parentElement);\n}\n"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,SAAA,gBAAAD,OAAA;AAEA,MAAAE,WAAA,gBAAAF,OAAA;AAoBA;;;;;AAKA,SAAgBG,yBAAyBA,CAACC,KAAkB,EAAEC,YAAoB;EAChF,IAAIC,cAAc,CAACF,KAAK,CAAC,EAAE;IACzB;IACA,OAAO,MAAMG,SAAS;;EAGxB,MAAMC,KAAK,GAAsB;IAC/BC,OAAO,EAAEF;GACV;EAED,MAAMG,OAAO,GAAGT,SAAA,CAAAU,aAAa,CAACN,YAAY,CAAC;EAE3C;EACAK,OAAO,CAACE,SAAS,CAACC,wBAAwB,IAAG;IAC3C,IAAI,CAACA,wBAAwB,IAAIL,KAAK,CAACC,OAAO,EAAE;MAC9CK,uBAAuB,CAACN,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;EAE7B,CAAC,CAAC;EAEF;EACA;EACA,MAAMQ,eAAe,GAAIC,CAAsB,IAAI;IACjD,IAAIR,KAAK,CAACC,OAAO,EAAE;MACjBK,uBAAuB,CAACN,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;IAG3B,IAAIG,OAAO,CAACG,wBAAwB,EAAE,IAAId,iBAAA,CAAAkB,aAAa,CAACD,CAAC,CAACE,MAAM,CAAC,IAAIF,CAAC,CAACE,MAAM,EAAE;MAC7E;MACAV,KAAK,CAACC,OAAO,GAAGO,CAAC,CAACE,MAAM;MACxBC,sBAAsB,CAACX,KAAK,CAACC,OAAO,CAAC;;EAEzC,CAAC;EAED;EACA,MAAMW,YAAY,GAAIJ,CAAa,IAAI;IACrC,IAAI,CAACA,CAAC,CAACK,aAAa,IAAKtB,iBAAA,CAAAkB,aAAa,CAACD,CAAC,CAACK,aAAa,CAAC,IAAI,CAACjB,KAAK,CAACkB,QAAQ,CAACN,CAAC,CAACK,aAAa,CAAE,EAAE;MAC5F,IAAIb,KAAK,CAACC,OAAO,EAAE;QACjBK,uBAAuB,CAACN,KAAK,CAACC,OAAO,CAAC;QACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;;EAG/B,CAAC;EAEDH,KAAK,CAACmB,gBAAgB,CAACtB,SAAA,CAAAuB,eAAe,EAAET,eAAmC,CAAC;EAC5EX,KAAK,CAACmB,gBAAgB,CAAC,UAAU,EAAEH,YAAY,CAAC;EAC/ChB,KAA0C,CAACqB,YAAY,GAAG,IAAI;EAE/D;EACA,OAAO,MAAK;IACVrB,KAAK,CAACsB,mBAAmB,CAACzB,SAAA,CAAAuB,eAAe,EAAET,eAAmC,CAAC;IAC/EX,KAAK,CAACsB,mBAAmB,CAAC,UAAU,EAAEN,YAAY,CAAC;IACnD,OAAQhB,KAA0C,CAACqB,YAAY;IAC/DxB,SAAA,CAAA0B,cAAc,CAACjB,OAAO,CAAC;EACzB,CAAC;AACH;AAxDAkB,OAAA,CAAAzB,yBAAA,GAAAA,yBAAA;AA0DA,SAASgB,sBAAsBA,CAACU,EAAe;EAC7CA,EAAE,CAACC,YAAY,CAAC5B,WAAA,CAAA6B,kBAAkB,EAAE,EAAE,CAAC;AACzC;AAEA,SAASjB,uBAAuBA,CAACe,EAAe;EAC9CA,EAAE,CAACG,eAAe,CAAC9B,WAAA,CAAA6B,kBAAkB,CAAC;AACxC;AAEA,SAASzB,cAAcA,CAACuB,EAAkC;EACxD,IAAI,CAACA,EAAE,EAAE;IACP,OAAO,KAAK;;EAGd,IAAKA,EAAuC,CAACJ,YAAY,EAAE;IACzD,OAAO,IAAI;;EAGb,OAAOnB,cAAc,CAACuB,EAAE,aAAFA,EAAE,uBAAFA,EAAE,CAAEI,aAAa,CAAC;AAC1C"}
|
|
@@ -7,11 +7,11 @@ exports.useFocusVisible = void 0;
|
|
|
7
7
|
const React = /*#__PURE__*/require("react");
|
|
8
8
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
9
9
|
const focusVisiblePolyfill_1 = /*#__PURE__*/require("../focus/focusVisiblePolyfill");
|
|
10
|
-
function useFocusVisible() {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
} = react_shared_contexts_1.useFluent_unstable();
|
|
10
|
+
function useFocusVisible(options = {}) {
|
|
11
|
+
var _a;
|
|
12
|
+
const contentValue = react_shared_contexts_1.useFluent_unstable();
|
|
14
13
|
const scopeRef = React.useRef(null);
|
|
14
|
+
const targetDocument = (_a = options.targetDocument) !== null && _a !== void 0 ? _a : contentValue.targetDocument;
|
|
15
15
|
React.useEffect(() => {
|
|
16
16
|
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
|
|
17
17
|
return focusVisiblePolyfill_1.applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","require","react_shared_contexts_1","focusVisiblePolyfill_1","useFocusVisible","
|
|
1
|
+
{"version":3,"names":["React","require","react_shared_contexts_1","focusVisiblePolyfill_1","useFocusVisible","options","contentValue","useFluent_unstable","scopeRef","useRef","targetDocument","_a","useEffect","defaultView","current","applyFocusVisiblePolyfill","exports"],"sources":["../src/packages/react-components/react-tabster/src/hooks/useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n targetDocument?: HTMLDocument;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n const contentValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contentValue.targetDocument;\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n\n return scopeRef;\n}\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,uBAAA,gBAAAD,OAAA;AAEA,MAAAE,sBAAA,gBAAAF,OAAA;AAMA,SAAgBG,eAAeA,CAA6CC,OAAA,GAAkC,EAAE;;EAC9G,MAAMC,YAAY,GAAGJ,uBAAA,CAAAK,kBAAS,EAAE;EAChC,MAAMC,QAAQ,GAAGR,KAAK,CAACS,MAAM,CAAW,IAAI,CAAC;EAE7C,MAAMC,cAAc,GAAG,CAAAC,EAAA,GAAAN,OAAO,CAACK,cAAc,cAAAC,EAAA,cAAAA,EAAA,GAAIL,YAAY,CAACI,cAAc;EAE5EV,KAAK,CAACY,SAAS,CAAC,MAAK;IACnB,IAAI,CAAAF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,WAAW,KAAIL,QAAQ,CAACM,OAAO,EAAE;MACnD,OAAOX,sBAAA,CAAAY,yBAAyB,CAACP,QAAQ,CAACM,OAAO,EAAEJ,cAAc,CAACG,WAAW,CAAC;;EAElF,CAAC,EAAE,CAACL,QAAQ,EAAEE,cAAc,CAAC,CAAC;EAE9B,OAAOF,QAAQ;AACjB;AAbAQ,OAAA,CAAAZ,eAAA,GAAAA,eAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.6.0",
|
|
4
4
|
"description": "Utilities for focus management and facade for tabster",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@griffel/react": "^1.5.2",
|
|
34
|
-
"@fluentui/react-shared-contexts": "^9.3.
|
|
35
|
-
"@fluentui/react-theme": "^9.1.
|
|
36
|
-
"@fluentui/react-utilities": "^9.7.
|
|
34
|
+
"@fluentui/react-shared-contexts": "^9.3.1",
|
|
35
|
+
"@fluentui/react-theme": "^9.1.6",
|
|
36
|
+
"@fluentui/react-utilities": "^9.7.1",
|
|
37
37
|
"keyborg": "^2.0.0",
|
|
38
38
|
"tabster": "^4.1.1",
|
|
39
39
|
"tslib": "^2.1.0"
|