@fluentui/react-tabster 9.14.0 → 9.14.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.json CHANGED
@@ -2,7 +2,22 @@
2
2
  "name": "@fluentui/react-tabster",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 18 Oct 2023 17:47:36 GMT",
5
+ "date": "Mon, 23 Oct 2023 09:48:55 GMT",
6
+ "tag": "@fluentui/react-tabster_v9.14.1",
7
+ "version": "9.14.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-tabster",
13
+ "commit": "0c71d4a05d9ce16cca3fdddda4854e265b227ff5",
14
+ "comment": "fix: focus visible polyfill should be initialised/disposed correctly"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Wed, 18 Oct 2023 17:54:06 GMT",
6
21
  "tag": "@fluentui/react-tabster_v9.14.0",
7
22
  "version": "9.14.0",
8
23
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui/react-tabster
2
2
 
3
- This log was last generated on Wed, 18 Oct 2023 17:47:36 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 23 Oct 2023 09:48:55 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.14.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.14.1)
8
+
9
+ Mon, 23 Oct 2023 09:48:55 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.14.0..@fluentui/react-tabster_v9.14.1)
11
+
12
+ ### Patches
13
+
14
+ - fix: focus visible polyfill should be initialised/disposed correctly ([PR #29564](https://github.com/microsoft/fluentui/pull/29564) by lingfangao@hotmail.com)
15
+
7
16
  ## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.14.0)
8
17
 
9
- Wed, 18 Oct 2023 17:47:36 GMT
18
+ Wed, 18 Oct 2023 17:54:06 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.13.6..@fluentui/react-tabster_v9.14.0)
11
20
 
12
21
  ### Minor changes
@@ -14,52 +14,49 @@ import { FOCUS_VISIBLE_ATTR } from './constants';
14
14
  current: undefined
15
15
  };
16
16
  const keyborg = createKeyborg(targetWindow);
17
+ function registerElementIfNavigating(el) {
18
+ if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {
19
+ state.current = el;
20
+ el.setAttribute(FOCUS_VISIBLE_ATTR, '');
21
+ }
22
+ }
23
+ function disposeCurrentElement() {
24
+ if (state.current) {
25
+ state.current.removeAttribute(FOCUS_VISIBLE_ATTR);
26
+ state.current = undefined;
27
+ }
28
+ }
17
29
  // When navigation mode changes remove the focus-visible selector
18
30
  keyborg.subscribe((isNavigatingWithKeyboard)=>{
19
- if (!isNavigatingWithKeyboard && state.current) {
20
- removeFocusVisibleClass(state.current);
21
- state.current = undefined;
31
+ if (!isNavigatingWithKeyboard) {
32
+ disposeCurrentElement();
22
33
  }
23
34
  });
24
35
  // Keyborg's focusin event is delegated so it's only registered once on the window
25
36
  // and contains metadata about the focus event
26
37
  const keyborgListener = (e)=>{
27
- if (state.current) {
28
- removeFocusVisibleClass(state.current);
29
- state.current = undefined;
30
- }
31
- if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
32
- // Griffel can't create chained global styles so use the parent element for now
33
- state.current = e.target;
34
- applyFocusVisibleClass(state.current);
35
- }
38
+ disposeCurrentElement();
39
+ registerElementIfNavigating(e.target);
36
40
  };
37
41
  // Make sure that when focus leaves the scope, the focus visible class is removed
38
42
  const blurListener = (e)=>{
39
43
  if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
40
- if (state.current) {
41
- removeFocusVisibleClass(state.current);
42
- state.current = undefined;
43
- }
44
+ disposeCurrentElement();
44
45
  }
45
46
  };
46
47
  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
47
48
  scope.addEventListener('focusout', blurListener);
48
49
  scope.focusVisible = true;
50
+ registerElementIfNavigating(targetWindow.document.activeElement);
49
51
  // Return disposer
50
52
  return ()=>{
53
+ disposeCurrentElement();
51
54
  scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
52
55
  scope.removeEventListener('focusout', blurListener);
53
56
  delete scope.focusVisible;
54
57
  disposeKeyborg(keyborg);
55
58
  };
56
59
  }
57
- function applyFocusVisibleClass(el) {
58
- el.setAttribute(FOCUS_VISIBLE_ATTR, '');
59
- }
60
- function removeFocusVisibleClass(el) {
61
- el.removeAttribute(FOCUS_VISIBLE_ATTR);
62
- }
63
60
  function alreadyInScope(el) {
64
61
  if (!el) {
65
62
  return false;
@@ -1 +1 @@
1
- {"version":3,"sources":["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"],"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"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAE9F,SAASC,kBAAkB,QAAQ,cAAc;AAoBjD;;;;CAIC,GACD,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB;IAChF,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf;IAEA,MAAMC,QAA2B;QAC/BC,SAASF;IACX;IAEA,MAAMG,UAAUV,cAAcK;IAE9B,iEAAiE;IACjEK,QAAQC,SAAS,CAACC,CAAAA;QAChB,IAAI,CAACA,4BAA4BJ,MAAMC,OAAO,EAAE;YAC9CI,wBAAwBL,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMO,kBAAkB,CAACC;QACvB,IAAIP,MAAMC,OAAO,EAAE;YACjBI,wBAAwBL,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB;QAEA,IAAIG,QAAQE,wBAAwB,MAAMd,cAAciB,EAAEC,MAAM,KAAKD,EAAEC,MAAM,EAAE;YAC7E,+EAA+E;YAC/ER,MAAMC,OAAO,GAAGM,EAAEC,MAAM;YACxBC,uBAAuBT,MAAMC,OAAO;QACtC;IACF;IAEA,iFAAiF;IACjF,MAAMS,eAAe,CAACH;QACpB,IAAI,CAACA,EAAEI,aAAa,IAAKrB,cAAciB,EAAEI,aAAa,KAAK,CAACf,MAAMgB,QAAQ,CAACL,EAAEI,aAAa,GAAI;YAC5F,IAAIX,MAAMC,OAAO,EAAE;gBACjBI,wBAAwBL,MAAMC,OAAO;gBACrCD,MAAMC,OAAO,GAAGF;YAClB;QACF;IACF;IAEAH,MAAMiB,gBAAgB,CAACtB,iBAAiBe;IACxCV,MAAMiB,gBAAgB,CAAC,YAAYH;IAClCd,MAA2CkB,YAAY,GAAG;IAE3D,kBAAkB;IAClB,OAAO;QACLlB,MAAMmB,mBAAmB,CAACxB,iBAAiBe;QAC3CV,MAAMmB,mBAAmB,CAAC,YAAYL;QACtC,OAAO,AAACd,MAA2CkB,YAAY;QAC/DrB,eAAeS;IACjB;AACF;AAEA,SAASO,uBAAuBO,EAAe;IAC7CA,GAAGC,YAAY,CAACvB,oBAAoB;AACtC;AAEA,SAASW,wBAAwBW,EAAe;IAC9CA,GAAGE,eAAe,CAACxB;AACrB;AAEA,SAASI,eAAekB,EAAkC;IACxD,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,AAACA,GAAwCF,YAAY,EAAE;QACzD,OAAO;IACT;IAEA,OAAOhB,eAAekB,eAAAA,yBAAAA,GAAIG,aAAa;AACzC"}
1
+ {"version":3,"sources":["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 function registerElementIfNavigating(el: EventTarget | HTMLElement | null) {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {\n state.current = el;\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n }\n }\n\n function disposeCurrentElement() {\n if (state.current) {\n state.current.removeAttribute(FOCUS_VISIBLE_ATTR);\n state.current = undefined;\n }\n }\n\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard) {\n disposeCurrentElement();\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 disposeCurrentElement();\n registerElementIfNavigating(e.target);\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 disposeCurrentElement();\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n registerElementIfNavigating(targetWindow.document.activeElement);\n\n // Return disposer\n return () => {\n disposeCurrentElement();\n\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n\n disposeKeyborg(keyborg);\n };\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"],"names":["isHTMLElement","KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","registerElementIfNavigating","el","isNavigatingWithKeyboard","setAttribute","disposeCurrentElement","removeAttribute","subscribe","keyborgListener","e","target","blurListener","relatedTarget","contains","addEventListener","focusVisible","document","activeElement","removeEventListener","parentElement"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAE9F,SAASC,kBAAkB,QAAQ,cAAc;AAoBjD;;;;CAIC,GACD,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB;IAChF,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf;IAEA,MAAMC,QAA2B;QAC/BC,SAASF;IACX;IAEA,MAAMG,UAAUV,cAAcK;IAE9B,SAASM,4BAA4BC,EAAoC;QACvE,IAAIF,QAAQG,wBAAwB,MAAMf,cAAcc,KAAK;YAC3DJ,MAAMC,OAAO,GAAGG;YAChBA,GAAGE,YAAY,CAACZ,oBAAoB;QACtC;IACF;IAEA,SAASa;QACP,IAAIP,MAAMC,OAAO,EAAE;YACjBD,MAAMC,OAAO,CAACO,eAAe,CAACd;YAC9BM,MAAMC,OAAO,GAAGF;QAClB;IACF;IAEA,iEAAiE;IACjEG,QAAQO,SAAS,CAACJ,CAAAA;QAChB,IAAI,CAACA,0BAA0B;YAC7BE;QACF;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMG,kBAAkB,CAACC;QACvBJ;QACAJ,4BAA4BQ,EAAEC,MAAM;IACtC;IAEA,iFAAiF;IACjF,MAAMC,eAAe,CAACF;QACpB,IAAI,CAACA,EAAEG,aAAa,IAAKxB,cAAcqB,EAAEG,aAAa,KAAK,CAAClB,MAAMmB,QAAQ,CAACJ,EAAEG,aAAa,GAAI;YAC5FP;QACF;IACF;IAEAX,MAAMoB,gBAAgB,CAACzB,iBAAiBmB;IACxCd,MAAMoB,gBAAgB,CAAC,YAAYH;IAClCjB,MAA2CqB,YAAY,GAAG;IAE3Dd,4BAA4BN,aAAaqB,QAAQ,CAACC,aAAa;IAE/D,kBAAkB;IAClB,OAAO;QACLZ;QAEAX,MAAMwB,mBAAmB,CAAC7B,iBAAiBmB;QAC3Cd,MAAMwB,mBAAmB,CAAC,YAAYP;QACtC,OAAO,AAACjB,MAA2CqB,YAAY;QAE/DxB,eAAeS;IACjB;AACF;AAEA,SAASJ,eAAeM,EAAkC;IACxD,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,AAACA,GAAwCa,YAAY,EAAE;QACzD,OAAO;IACT;IAEA,OAAOnB,eAAeM,eAAAA,yBAAAA,GAAIiB,aAAa;AACzC"}
@@ -20,52 +20,49 @@ function applyFocusVisiblePolyfill(scope, targetWindow) {
20
20
  current: undefined
21
21
  };
22
22
  const keyborg = (0, _keyborg.createKeyborg)(targetWindow);
23
+ function registerElementIfNavigating(el) {
24
+ if (keyborg.isNavigatingWithKeyboard() && (0, _reactutilities.isHTMLElement)(el)) {
25
+ state.current = el;
26
+ el.setAttribute(_constants.FOCUS_VISIBLE_ATTR, '');
27
+ }
28
+ }
29
+ function disposeCurrentElement() {
30
+ if (state.current) {
31
+ state.current.removeAttribute(_constants.FOCUS_VISIBLE_ATTR);
32
+ state.current = undefined;
33
+ }
34
+ }
23
35
  // When navigation mode changes remove the focus-visible selector
24
36
  keyborg.subscribe((isNavigatingWithKeyboard)=>{
25
- if (!isNavigatingWithKeyboard && state.current) {
26
- removeFocusVisibleClass(state.current);
27
- state.current = undefined;
37
+ if (!isNavigatingWithKeyboard) {
38
+ disposeCurrentElement();
28
39
  }
29
40
  });
30
41
  // Keyborg's focusin event is delegated so it's only registered once on the window
31
42
  // and contains metadata about the focus event
32
43
  const keyborgListener = (e)=>{
33
- if (state.current) {
34
- removeFocusVisibleClass(state.current);
35
- state.current = undefined;
36
- }
37
- if (keyborg.isNavigatingWithKeyboard() && (0, _reactutilities.isHTMLElement)(e.target) && e.target) {
38
- // Griffel can't create chained global styles so use the parent element for now
39
- state.current = e.target;
40
- applyFocusVisibleClass(state.current);
41
- }
44
+ disposeCurrentElement();
45
+ registerElementIfNavigating(e.target);
42
46
  };
43
47
  // Make sure that when focus leaves the scope, the focus visible class is removed
44
48
  const blurListener = (e)=>{
45
49
  if (!e.relatedTarget || (0, _reactutilities.isHTMLElement)(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
46
- if (state.current) {
47
- removeFocusVisibleClass(state.current);
48
- state.current = undefined;
49
- }
50
+ disposeCurrentElement();
50
51
  }
51
52
  };
52
53
  scope.addEventListener(_keyborg.KEYBORG_FOCUSIN, keyborgListener);
53
54
  scope.addEventListener('focusout', blurListener);
54
55
  scope.focusVisible = true;
56
+ registerElementIfNavigating(targetWindow.document.activeElement);
55
57
  // Return disposer
56
58
  return ()=>{
59
+ disposeCurrentElement();
57
60
  scope.removeEventListener(_keyborg.KEYBORG_FOCUSIN, keyborgListener);
58
61
  scope.removeEventListener('focusout', blurListener);
59
62
  delete scope.focusVisible;
60
63
  (0, _keyborg.disposeKeyborg)(keyborg);
61
64
  };
62
65
  }
63
- function applyFocusVisibleClass(el) {
64
- el.setAttribute(_constants.FOCUS_VISIBLE_ATTR, '');
65
- }
66
- function removeFocusVisibleClass(el) {
67
- el.removeAttribute(_constants.FOCUS_VISIBLE_ATTR);
68
- }
69
66
  function alreadyInScope(el) {
70
67
  if (!el) {
71
68
  return false;
@@ -1 +1 @@
1
- {"version":3,"sources":["focusVisiblePolyfill.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */ export function applyFocusVisiblePolyfill(scope, targetWindow) {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return ()=>undefined;\n }\n const state = {\n current: undefined\n };\n const keyborg = createKeyborg(targetWindow);\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 // 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)=>{\n if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\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 // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e)=>{\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 scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.addEventListener('focusout', blurListener);\n scope.focusVisible = true;\n // Return disposer\n return ()=>{\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.removeEventListener('focusout', blurListener);\n delete scope.focusVisible;\n disposeKeyborg(keyborg);\n };\n}\nfunction applyFocusVisibleClass(el) {\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\nfunction removeFocusVisibleClass(el) {\n el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\nfunction alreadyInScope(el) {\n if (!el) {\n return false;\n }\n if (el.focusVisible) {\n return true;\n }\n return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);\n}\n"],"names":["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","el","setAttribute","FOCUS_VISIBLE_ATTR","removeAttribute","parentElement"],"mappings":";;;;+BAOoBA;;;eAAAA;;;gCAPU;yBACiC;2BAC5B;AAKxB,SAASA,0BAA0BC,KAAK,EAAEC,YAAY;IAC7D,IAAIC,eAAeF,QAAQ;QACvB,uDAAuD;QACvD,OAAO,IAAIG;IACf;IACA,MAAMC,QAAQ;QACVC,SAASF;IACb;IACA,MAAMG,UAAUC,IAAAA,sBAAa,EAACN;IAC9B,iEAAiE;IACjEK,QAAQE,SAAS,CAAC,CAACC;QACf,IAAI,CAACA,4BAA4BL,MAAMC,OAAO,EAAE;YAC5CK,wBAAwBN,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QACpB;IACJ;IACA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMQ,kBAAkB,CAACC;QACrB,IAAIR,MAAMC,OAAO,EAAE;YACfK,wBAAwBN,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QACpB;QACA,IAAIG,QAAQG,wBAAwB,MAAMI,IAAAA,6BAAa,EAACD,EAAEE,MAAM,KAAKF,EAAEE,MAAM,EAAE;YAC3E,+EAA+E;YAC/EV,MAAMC,OAAO,GAAGO,EAAEE,MAAM;YACxBC,uBAAuBX,MAAMC,OAAO;QACxC;IACJ;IACA,iFAAiF;IACjF,MAAMW,eAAe,CAACJ;QAClB,IAAI,CAACA,EAAEK,aAAa,IAAIJ,IAAAA,6BAAa,EAACD,EAAEK,aAAa,KAAK,CAACjB,MAAMkB,QAAQ,CAACN,EAAEK,aAAa,GAAG;YACxF,IAAIb,MAAMC,OAAO,EAAE;gBACfK,wBAAwBN,MAAMC,OAAO;gBACrCD,MAAMC,OAAO,GAAGF;YACpB;QACJ;IACJ;IACAH,MAAMmB,gBAAgB,CAACC,wBAAe,EAAET;IACxCX,MAAMmB,gBAAgB,CAAC,YAAYH;IACnChB,MAAMqB,YAAY,GAAG;IACrB,kBAAkB;IAClB,OAAO;QACHrB,MAAMsB,mBAAmB,CAACF,wBAAe,EAAET;QAC3CX,MAAMsB,mBAAmB,CAAC,YAAYN;QACtC,OAAOhB,MAAMqB,YAAY;QACzBE,IAAAA,uBAAc,EAACjB;IACnB;AACJ;AACA,SAASS,uBAAuBS,EAAE;IAC9BA,GAAGC,YAAY,CAACC,6BAAkB,EAAE;AACxC;AACA,SAAShB,wBAAwBc,EAAE;IAC/BA,GAAGG,eAAe,CAACD,6BAAkB;AACzC;AACA,SAASxB,eAAesB,EAAE;IACtB,IAAI,CAACA,IAAI;QACL,OAAO;IACX;IACA,IAAIA,GAAGH,YAAY,EAAE;QACjB,OAAO;IACX;IACA,OAAOnB,eAAesB,OAAO,QAAQA,OAAO,KAAK,IAAI,KAAK,IAAIA,GAAGI,aAAa;AAClF"}
1
+ {"version":3,"sources":["focusVisiblePolyfill.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */ export function applyFocusVisiblePolyfill(scope, targetWindow) {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return ()=>undefined;\n }\n const state = {\n current: undefined\n };\n const keyborg = createKeyborg(targetWindow);\n function registerElementIfNavigating(el) {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {\n state.current = el;\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n }\n }\n function disposeCurrentElement() {\n if (state.current) {\n state.current.removeAttribute(FOCUS_VISIBLE_ATTR);\n state.current = undefined;\n }\n }\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe((isNavigatingWithKeyboard)=>{\n if (!isNavigatingWithKeyboard) {\n disposeCurrentElement();\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)=>{\n disposeCurrentElement();\n registerElementIfNavigating(e.target);\n };\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e)=>{\n if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {\n disposeCurrentElement();\n }\n };\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.addEventListener('focusout', blurListener);\n scope.focusVisible = true;\n registerElementIfNavigating(targetWindow.document.activeElement);\n // Return disposer\n return ()=>{\n disposeCurrentElement();\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.removeEventListener('focusout', blurListener);\n delete scope.focusVisible;\n disposeKeyborg(keyborg);\n };\n}\nfunction alreadyInScope(el) {\n if (!el) {\n return false;\n }\n if (el.focusVisible) {\n return true;\n }\n return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);\n}\n"],"names":["applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","createKeyborg","registerElementIfNavigating","el","isNavigatingWithKeyboard","isHTMLElement","setAttribute","FOCUS_VISIBLE_ATTR","disposeCurrentElement","removeAttribute","subscribe","keyborgListener","e","target","blurListener","relatedTarget","contains","addEventListener","KEYBORG_FOCUSIN","focusVisible","document","activeElement","removeEventListener","disposeKeyborg","parentElement"],"mappings":";;;;+BAOoBA;;;eAAAA;;;gCAPU;yBACiC;2BAC5B;AAKxB,SAASA,0BAA0BC,KAAK,EAAEC,YAAY;IAC7D,IAAIC,eAAeF,QAAQ;QACvB,uDAAuD;QACvD,OAAO,IAAIG;IACf;IACA,MAAMC,QAAQ;QACVC,SAASF;IACb;IACA,MAAMG,UAAUC,IAAAA,sBAAa,EAACN;IAC9B,SAASO,4BAA4BC,EAAE;QACnC,IAAIH,QAAQI,wBAAwB,MAAMC,IAAAA,6BAAa,EAACF,KAAK;YACzDL,MAAMC,OAAO,GAAGI;YAChBA,GAAGG,YAAY,CAACC,6BAAkB,EAAE;QACxC;IACJ;IACA,SAASC;QACL,IAAIV,MAAMC,OAAO,EAAE;YACfD,MAAMC,OAAO,CAACU,eAAe,CAACF,6BAAkB;YAChDT,MAAMC,OAAO,GAAGF;QACpB;IACJ;IACA,iEAAiE;IACjEG,QAAQU,SAAS,CAAC,CAACN;QACf,IAAI,CAACA,0BAA0B;YAC3BI;QACJ;IACJ;IACA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMG,kBAAkB,CAACC;QACrBJ;QACAN,4BAA4BU,EAAEC,MAAM;IACxC;IACA,iFAAiF;IACjF,MAAMC,eAAe,CAACF;QAClB,IAAI,CAACA,EAAEG,aAAa,IAAIV,IAAAA,6BAAa,EAACO,EAAEG,aAAa,KAAK,CAACrB,MAAMsB,QAAQ,CAACJ,EAAEG,aAAa,GAAG;YACxFP;QACJ;IACJ;IACAd,MAAMuB,gBAAgB,CAACC,wBAAe,EAAEP;IACxCjB,MAAMuB,gBAAgB,CAAC,YAAYH;IACnCpB,MAAMyB,YAAY,GAAG;IACrBjB,4BAA4BP,aAAayB,QAAQ,CAACC,aAAa;IAC/D,kBAAkB;IAClB,OAAO;QACHb;QACAd,MAAM4B,mBAAmB,CAACJ,wBAAe,EAAEP;QAC3CjB,MAAM4B,mBAAmB,CAAC,YAAYR;QACtC,OAAOpB,MAAMyB,YAAY;QACzBI,IAAAA,uBAAc,EAACvB;IACnB;AACJ;AACA,SAASJ,eAAeO,EAAE;IACtB,IAAI,CAACA,IAAI;QACL,OAAO;IACX;IACA,IAAIA,GAAGgB,YAAY,EAAE;QACjB,OAAO;IACX;IACA,OAAOvB,eAAeO,OAAO,QAAQA,OAAO,KAAK,IAAI,KAAK,IAAIA,GAAGqB,aAAa;AAClF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-tabster",
3
- "version": "9.14.0",
3
+ "version": "9.14.1",
4
4
  "description": "Utilities for focus management and facade for tabster",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",