@fluentui/react-tabster 9.15.1 → 9.16.1

package/CHANGELOG.md

@@ -1,18 +1,42 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Thu, 14 Dec 2023 09:51:37 GMT and should not be manually modified.
+This log was last generated on Wed, 03 Jan 2024 09:22:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.16.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.16.1)
+
+Wed, 03 Jan 2024 09:22:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.16.0..@fluentui/react-tabster_v9.16.1)
+
+### Patches
+
+- Bump @fluentui/react-utilities to v9.15.5 ([PR #30163](https://github.com/microsoft/fluentui/pull/30163) by beachball)
+
+## [9.16.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.16.0)
+
+Mon, 18 Dec 2023 14:40:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.15.1..@fluentui/react-tabster_v9.16.0)
+
+### Minor changes
+
+- feat: focus-visible polyfill shadow DOM support ([PR #30098](https://github.com/microsoft/fluentui/pull/30098) by lingfangao@hotmail.com)
+- Bump @fluentui/react-shared-contexts to v9.13.2 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
+- Bump @fluentui/react-utilities to v9.15.4 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
+
+### Patches
+
+- fix: focus outline should have `Highlight` colour in high contrast ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by lingfan.gao@microsoft.com)
+
 ## [9.15.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.15.1)
 
-Thu, 14 Dec 2023 09:51:37 GMT 
+Thu, 14 Dec 2023 09:58:46 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.15.0..@fluentui/react-tabster_v9.15.1)
 
 ### Patches
 
-- Bump @fluentui/react-shared-contexts to v9.13.1 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
-- Bump @fluentui/react-utilities to v9.15.3 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.13.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
+- Bump @fluentui/react-utilities to v9.15.3 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
 
 ## [9.15.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.15.0)
 

package/lib/focus/createFocusOutlineStyle.js

@@ -25,6 +25,11 @@ import { defaultOptions } from './constants';
     const { outlineRadius, outlineColor, outlineWidth } = options;
     return {
         ...shorthands.borderColor('transparent'),
+        '@media (forced-colors: active)': {
+            '::after': {
+                ...shorthands.borderColor('Highlight')
+            }
+        },
         '::after': {
             content: '""',
             position: 'absolute',

package/lib/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {\n  style?: Partial<FocusOutlineStyleOptions>;\n\n  /**\n   * Enables the browser default outline style\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Get the position of the focus outline\n *\n * @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n */\nfunction getOutlinePosition(\n  { outlineWidth, outlineOffset }: FocusOutlineStyleOptions,\n  position: 'top' | 'bottom' | 'left' | 'right',\n) {\n  const offsetValue = (outlineOffset as FocusOutlineOffset)?.[position] || outlineOffset;\n\n  if (!outlineOffset) {\n    return `calc(${outlineWidth} * -1)`;\n  }\n\n  return `calc(0px - ${outlineWidth} - ${offsetValue})`;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineWidth } = options;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: getOutlinePosition(options, 'top'),\n      right: getOutlinePosition(options, 'right'),\n      bottom: getOutlinePosition(options, 'bottom'),\n      left: getOutlinePosition(options, 'left'),\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  enableOutline = false,\n  selector = defaultOptions.selector,\n  customizeSelector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: enableOutline ? undefined : 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: enableOutline ? undefined : 'none',\n  },\n\n  ...createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector, customizeSelector },\n  ),\n});\n"],"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getOutlinePosition","outlineWidth","outlineOffset","position","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","borderColor","content","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","top","right","bottom","left","createFocusOutlineStyle","enableOutline","selector","customizeSelector","style","outlineStyle","undefined","colorStrokeFocus2","borderRadiusMedium"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SACEC,+BAA+B,QAE1B,oCAAoC;AAC3C,SAASC,cAAc,QAAQ,cAAc;AAsB7C;;;;;;CAMC,GACD,SAASC,mBACP,EAAEC,YAAY,EAAEC,aAAa,EAA4B,EACzDC,QAA6C;IAE7C,MAAMC,cAAc,CAACF,0BAAAA,oCAAD,AAACA,aAAsC,CAACC,SAAS,KAAID;IAEzE,IAAI,CAACA,eAAe;QAClB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACrC;IAEA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACvD;AAEA;;;;;;CAMC,GACD,MAAMC,wBAAwB,CAACC;IAC7B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEP,YAAY,EAAE,GAAGK;IAEtD,OAAO;QACL,GAAGT,WAAWY,WAAW,CAAC,cAAc;QACxC,WAAW;YACTC,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAER,GAAGf,WAAWgB,WAAW,CAAC,QAAQ;YAClC,GAAGhB,WAAWiB,WAAW,CAACb,aAAa;YACvC,GAAGJ,WAAWkB,YAAY,CAACR,cAAc;YACzC,GAAGV,WAAWY,WAAW,CAACD,aAAa;YAEvCQ,KAAKhB,mBAAmBM,SAAS;YACjCW,OAAOjB,mBAAmBM,SAAS;YACnCY,QAAQlB,mBAAmBM,SAAS;YACpCa,MAAMnB,mBAAmBM,SAAS;QACpC;IACF;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMc,0BAA0B,CAAC,EACtCC,gBAAgB,KAAK,EACrBC,WAAWvB,eAAeuB,QAAQ,EAClCC,iBAAiB,EACjBC,QAAQzB,eAAeyB,KAAK,EACG,GAAGzB,cAAc,GAAoB,CAAA;QACpE,UAAU;YACR0B,cAAcJ,gBAAgBK,YAAY;QAC5C;QACA,kBAAkB;YAChBD,cAAcJ,gBAAgBK,YAAY;QAC5C;QAEA,GAAG5B,gCACDO,sBAAsB;YACpBG,cAAcZ,OAAO+B,iBAAiB;YACtCpB,eAAeX,OAAOgC,kBAAkB;YACxC,wDAAwD;YACxD3B,cAAc;YACd,GAAGuB,KAAK;QACV,IACA;YAAEF;YAAUC;QAAkB,EAC/B;IACH,CAAA,EAAG"}
+{"version":3,"sources":["createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {\n  style?: Partial<FocusOutlineStyleOptions>;\n\n  /**\n   * Enables the browser default outline style\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Get the position of the focus outline\n *\n * @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n */\nfunction getOutlinePosition(\n  { outlineWidth, outlineOffset }: FocusOutlineStyleOptions,\n  position: 'top' | 'bottom' | 'left' | 'right',\n) {\n  const offsetValue = (outlineOffset as FocusOutlineOffset)?.[position] || outlineOffset;\n\n  if (!outlineOffset) {\n    return `calc(${outlineWidth} * -1)`;\n  }\n\n  return `calc(0px - ${outlineWidth} - ${offsetValue})`;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineWidth } = options;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    '@media (forced-colors: active)': {\n      '::after': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: getOutlinePosition(options, 'top'),\n      right: getOutlinePosition(options, 'right'),\n      bottom: getOutlinePosition(options, 'bottom'),\n      left: getOutlinePosition(options, 'left'),\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  enableOutline = false,\n  selector = defaultOptions.selector,\n  customizeSelector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: enableOutline ? undefined : 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: enableOutline ? undefined : 'none',\n  },\n\n  ...createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector, customizeSelector },\n  ),\n});\n"],"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getOutlinePosition","outlineWidth","outlineOffset","position","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","borderColor","content","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","top","right","bottom","left","createFocusOutlineStyle","enableOutline","selector","customizeSelector","style","outlineStyle","undefined","colorStrokeFocus2","borderRadiusMedium"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SACEC,+BAA+B,QAE1B,oCAAoC;AAC3C,SAASC,cAAc,QAAQ,cAAc;AAsB7C;;;;;;CAMC,GACD,SAASC,mBACP,EAAEC,YAAY,EAAEC,aAAa,EAA4B,EACzDC,QAA6C;IAE7C,MAAMC,cAAc,CAACF,0BAAAA,oCAAD,AAACA,aAAsC,CAACC,SAAS,KAAID;IAEzE,IAAI,CAACA,eAAe;QAClB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACrC;IAEA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACvD;AAEA;;;;;;CAMC,GACD,MAAMC,wBAAwB,CAACC;IAC7B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEP,YAAY,EAAE,GAAGK;IAEtD,OAAO;QACL,GAAGT,WAAWY,WAAW,CAAC,cAAc;QACxC,kCAAkC;YAChC,WAAW;gBACT,GAAGZ,WAAWY,WAAW,CAAC,YAAY;YACxC;QACF;QACA,WAAW;YACTC,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAER,GAAGf,WAAWgB,WAAW,CAAC,QAAQ;YAClC,GAAGhB,WAAWiB,WAAW,CAACb,aAAa;YACvC,GAAGJ,WAAWkB,YAAY,CAACR,cAAc;YACzC,GAAGV,WAAWY,WAAW,CAACD,aAAa;YAEvCQ,KAAKhB,mBAAmBM,SAAS;YACjCW,OAAOjB,mBAAmBM,SAAS;YACnCY,QAAQlB,mBAAmBM,SAAS;YACpCa,MAAMnB,mBAAmBM,SAAS;QACpC;IACF;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMc,0BAA0B,CAAC,EACtCC,gBAAgB,KAAK,EACrBC,WAAWvB,eAAeuB,QAAQ,EAClCC,iBAAiB,EACjBC,QAAQzB,eAAeyB,KAAK,EACG,GAAGzB,cAAc,GAAoB,CAAA;QACpE,UAAU;YACR0B,cAAcJ,gBAAgBK,YAAY;QAC5C;QACA,kBAAkB;YAChBD,cAAcJ,gBAAgBK,YAAY;QAC5C;QAEA,GAAG5B,gCACDO,sBAAsB;YACpBG,cAAcZ,OAAO+B,iBAAiB;YACtCpB,eAAeX,OAAOgC,kBAAkB;YACxC,wDAAwD;YACxD3B,cAAc;YACd,GAAGuB,KAAK;QACV,IACA;YAAEF;YAAUC;QAAkB,EAC/B;IACH,CAAA,EAAG"}

package/lib/focus/focusVisiblePolyfill.js

@@ -36,7 +36,8 @@ import { FOCUS_VISIBLE_ATTR } from './constants';
     // and contains metadata about the focus event
     const keyborgListener = (e)=>{
         disposeCurrentElement();
-        registerElementIfNavigating(e.target);
+        const target = e.composedPath()[0];
+        registerElementIfNavigating(target);
     };
     // Make sure that when focus leaves the scope, the focus visible class is removed
     const blurListener = (e)=>{

package/lib/focus/focusVisiblePolyfill.js.map

@@ -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  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"}
+{"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    const target = e.composedPath()[0];\n    registerElementIfNavigating(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","composedPath","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;QACA,MAAMK,SAASD,EAAEE,YAAY,EAAE,CAAC,EAAE;QAClCV,4BAA4BS;IAC9B;IAEA,iFAAiF;IACjF,MAAME,eAAe,CAACH;QACpB,IAAI,CAACA,EAAEI,aAAa,IAAKzB,cAAcqB,EAAEI,aAAa,KAAK,CAACnB,MAAMoB,QAAQ,CAACL,EAAEI,aAAa,GAAI;YAC5FR;QACF;IACF;IAEAX,MAAMqB,gBAAgB,CAAC1B,iBAAiBmB;IACxCd,MAAMqB,gBAAgB,CAAC,YAAYH;IAClClB,MAA2CsB,YAAY,GAAG;IAE3Df,4BAA4BN,aAAasB,QAAQ,CAACC,aAAa;IAE/D,kBAAkB;IAClB,OAAO;QACLb;QAEAX,MAAMyB,mBAAmB,CAAC9B,iBAAiBmB;QAC3Cd,MAAMyB,mBAAmB,CAAC,YAAYP;QACtC,OAAO,AAAClB,MAA2CsB,YAAY;QAE/DzB,eAAeS;IACjB;AACF;AAEA,SAASJ,eAAeM,EAAkC;IACxD,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,AAACA,GAAwCc,YAAY,EAAE;QACzD,OAAO;IACT;IAEA,OAAOpB,eAAeM,eAAAA,yBAAAA,GAAIkB,aAAa;AACzC"}

package/lib-commonjs/focus/createFocusOutlineStyle.js

@@ -35,6 +35,11 @@ const _constants = require("./constants");
     const { outlineRadius, outlineColor, outlineWidth } = options;
     return {
         ..._react.shorthands.borderColor('transparent'),
+        '@media (forced-colors: active)': {
+            '::after': {
+                ..._react.shorthands.borderColor('Highlight')
+            }
+        },
         '::after': {
             content: '""',
             position: 'absolute',

package/lib-commonjs/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createFocusOutlineStyle.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n/**\n * Get the position of the focus outline\n *\n * @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n */ function getOutlinePosition({ outlineWidth, outlineOffset }, position) {\n    const offsetValue = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset[position]) || outlineOffset;\n    if (!outlineOffset) {\n        return `calc(${outlineWidth} * -1)`;\n    }\n    return `calc(0px - ${outlineWidth} - ${offsetValue})`;\n}\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */ const getFocusOutlineStyles = (options)=>{\n    const { outlineRadius, outlineColor, outlineWidth } = options;\n    return {\n        ...shorthands.borderColor('transparent'),\n        '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth(outlineWidth),\n            ...shorthands.borderRadius(outlineRadius),\n            ...shorthands.borderColor(outlineColor),\n            top: getOutlinePosition(options, 'top'),\n            right: getOutlinePosition(options, 'right'),\n            bottom: getOutlinePosition(options, 'bottom'),\n            left: getOutlinePosition(options, 'left')\n        }\n    };\n};\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */ export const createFocusOutlineStyle = ({ enableOutline = false, selector = defaultOptions.selector, customizeSelector, style = defaultOptions.style } = defaultOptions)=>({\n        ':focus': {\n            outlineStyle: enableOutline ? undefined : 'none'\n        },\n        ':focus-visible': {\n            outlineStyle: enableOutline ? undefined : 'none'\n        },\n        ...createCustomFocusIndicatorStyle(getFocusOutlineStyles({\n            outlineColor: tokens.colorStrokeFocus2,\n            outlineRadius: tokens.borderRadiusMedium,\n            // FIXME: tokens.strokeWidthThick causes some weird bugs\n            outlineWidth: '2px',\n            ...style\n        }), {\n            selector,\n            customizeSelector\n        })\n    });\n"],"names":["createFocusOutlineStyle","getOutlinePosition","outlineWidth","outlineOffset","position","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","shorthands","borderColor","content","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","top","right","bottom","left","enableOutline","selector","defaultOptions","customizeSelector","style","outlineStyle","undefined","createCustomFocusIndicatorStyle","tokens","colorStrokeFocus2","borderRadiusMedium"],"mappings":";;;;+BAiDiBA;;;eAAAA;;;4BAjDM;uBACI;iDACqB;2BACjB;AAC/B;;;;;;CAMC,GAAG,SAASC,mBAAmB,EAAEC,YAAY,EAAEC,aAAa,EAAE,EAAEC,QAAQ;IACrE,MAAMC,cAAc,AAACF,CAAAA,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,aAAa,CAACC,SAAS,AAAD,KAAMD;IAC/G,IAAI,CAACA,eAAe;QAChB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACvC;IACA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACzD;AACA;;;;;;CAMC,GAAG,MAAMC,wBAAwB,CAACC;IAC/B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEP,YAAY,EAAE,GAAGK;IACtD,OAAO;QACH,GAAGG,iBAAU,CAACC,WAAW,CAAC,cAAc;QACxC,WAAW;YACPC,SAAS;YACTR,UAAU;YACVS,eAAe;YACfC,QAAQ;YACR,GAAGJ,iBAAU,CAACK,WAAW,CAAC,QAAQ;YAClC,GAAGL,iBAAU,CAACM,WAAW,CAACd,aAAa;YACvC,GAAGQ,iBAAU,CAACO,YAAY,CAACT,cAAc;YACzC,GAAGE,iBAAU,CAACC,WAAW,CAACF,aAAa;YACvCS,KAAKjB,mBAAmBM,SAAS;YACjCY,OAAOlB,mBAAmBM,SAAS;YACnCa,QAAQnB,mBAAmBM,SAAS;YACpCc,MAAMpB,mBAAmBM,SAAS;QACtC;IACJ;AACJ;AAOW,MAAMP,0BAA0B,CAAC,EAAEsB,gBAAgB,KAAK,EAAEC,WAAWC,yBAAc,CAACD,QAAQ,EAAEE,iBAAiB,EAAEC,QAAQF,yBAAc,CAACE,KAAK,EAAE,GAAGF,yBAAc,GAAI,CAAA;QACvK,UAAU;YACNG,cAAcL,gBAAgBM,YAAY;QAC9C;QACA,kBAAkB;YACdD,cAAcL,gBAAgBM,YAAY;QAC9C;QACA,GAAGC,IAAAA,gEAA+B,EAACvB,sBAAsB;YACrDG,cAAcqB,kBAAM,CAACC,iBAAiB;YACtCvB,eAAesB,kBAAM,CAACE,kBAAkB;YACxC,wDAAwD;YACxD9B,cAAc;YACd,GAAGwB,KAAK;QACZ,IAAI;YACAH;YACAE;QACJ,EAAE;IACN,CAAA"}
+{"version":3,"sources":["createFocusOutlineStyle.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n/**\n * Get the position of the focus outline\n *\n * @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n */ function getOutlinePosition({ outlineWidth, outlineOffset }, position) {\n    const offsetValue = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset[position]) || outlineOffset;\n    if (!outlineOffset) {\n        return `calc(${outlineWidth} * -1)`;\n    }\n    return `calc(0px - ${outlineWidth} - ${offsetValue})`;\n}\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */ const getFocusOutlineStyles = (options)=>{\n    const { outlineRadius, outlineColor, outlineWidth } = options;\n    return {\n        ...shorthands.borderColor('transparent'),\n        '@media (forced-colors: active)': {\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        },\n        '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth(outlineWidth),\n            ...shorthands.borderRadius(outlineRadius),\n            ...shorthands.borderColor(outlineColor),\n            top: getOutlinePosition(options, 'top'),\n            right: getOutlinePosition(options, 'right'),\n            bottom: getOutlinePosition(options, 'bottom'),\n            left: getOutlinePosition(options, 'left')\n        }\n    };\n};\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */ export const createFocusOutlineStyle = ({ enableOutline = false, selector = defaultOptions.selector, customizeSelector, style = defaultOptions.style } = defaultOptions)=>({\n        ':focus': {\n            outlineStyle: enableOutline ? undefined : 'none'\n        },\n        ':focus-visible': {\n            outlineStyle: enableOutline ? undefined : 'none'\n        },\n        ...createCustomFocusIndicatorStyle(getFocusOutlineStyles({\n            outlineColor: tokens.colorStrokeFocus2,\n            outlineRadius: tokens.borderRadiusMedium,\n            // FIXME: tokens.strokeWidthThick causes some weird bugs\n            outlineWidth: '2px',\n            ...style\n        }), {\n            selector,\n            customizeSelector\n        })\n    });\n"],"names":["createFocusOutlineStyle","getOutlinePosition","outlineWidth","outlineOffset","position","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","shorthands","borderColor","content","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","top","right","bottom","left","enableOutline","selector","defaultOptions","customizeSelector","style","outlineStyle","undefined","createCustomFocusIndicatorStyle","tokens","colorStrokeFocus2","borderRadiusMedium"],"mappings":";;;;+BAsDiBA;;;eAAAA;;;4BAtDM;uBACI;iDACqB;2BACjB;AAC/B;;;;;;CAMC,GAAG,SAASC,mBAAmB,EAAEC,YAAY,EAAEC,aAAa,EAAE,EAAEC,QAAQ;IACrE,MAAMC,cAAc,AAACF,CAAAA,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,aAAa,CAACC,SAAS,AAAD,KAAMD;IAC/G,IAAI,CAACA,eAAe;QAChB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACvC;IACA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACzD;AACA;;;;;;CAMC,GAAG,MAAMC,wBAAwB,CAACC;IAC/B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEP,YAAY,EAAE,GAAGK;IACtD,OAAO;QACH,GAAGG,iBAAU,CAACC,WAAW,CAAC,cAAc;QACxC,kCAAkC;YAC9B,WAAW;gBACP,GAAGD,iBAAU,CAACC,WAAW,CAAC,YAAY;YAC1C;QACJ;QACA,WAAW;YACPC,SAAS;YACTR,UAAU;YACVS,eAAe;YACfC,QAAQ;YACR,GAAGJ,iBAAU,CAACK,WAAW,CAAC,QAAQ;YAClC,GAAGL,iBAAU,CAACM,WAAW,CAACd,aAAa;YACvC,GAAGQ,iBAAU,CAACO,YAAY,CAACT,cAAc;YACzC,GAAGE,iBAAU,CAACC,WAAW,CAACF,aAAa;YACvCS,KAAKjB,mBAAmBM,SAAS;YACjCY,OAAOlB,mBAAmBM,SAAS;YACnCa,QAAQnB,mBAAmBM,SAAS;YACpCc,MAAMpB,mBAAmBM,SAAS;QACtC;IACJ;AACJ;AAOW,MAAMP,0BAA0B,CAAC,EAAEsB,gBAAgB,KAAK,EAAEC,WAAWC,yBAAc,CAACD,QAAQ,EAAEE,iBAAiB,EAAEC,QAAQF,yBAAc,CAACE,KAAK,EAAE,GAAGF,yBAAc,GAAI,CAAA;QACvK,UAAU;YACNG,cAAcL,gBAAgBM,YAAY;QAC9C;QACA,kBAAkB;YACdD,cAAcL,gBAAgBM,YAAY;QAC9C;QACA,GAAGC,IAAAA,gEAA+B,EAACvB,sBAAsB;YACrDG,cAAcqB,kBAAM,CAACC,iBAAiB;YACtCvB,eAAesB,kBAAM,CAACE,kBAAkB;YACxC,wDAAwD;YACxD9B,cAAc;YACd,GAAGwB,KAAK;QACZ,IAAI;YACAH;YACAE;QACJ,EAAE;IACN,CAAA"}

package/lib-commonjs/focus/focusVisiblePolyfill.js

@@ -42,7 +42,8 @@ function applyFocusVisiblePolyfill(scope, targetWindow) {
     // and contains metadata about the focus event
     const keyborgListener = (e)=>{
         disposeCurrentElement();
-        registerElementIfNavigating(e.target);
+        const target = e.composedPath()[0];
+        registerElementIfNavigating(target);
     };
     // Make sure that when focus leaves the scope, the focus visible class is removed
     const blurListener = (e)=>{

package/lib-commonjs/focus/focusVisiblePolyfill.js.map

@@ -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    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"}
+{"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        const target = e.composedPath()[0];\n        registerElementIfNavigating(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","composedPath","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;QACA,MAAMK,SAASD,EAAEE,YAAY,EAAE,CAAC,EAAE;QAClCZ,4BAA4BW;IAChC;IACA,iFAAiF;IACjF,MAAME,eAAe,CAACH;QAClB,IAAI,CAACA,EAAEI,aAAa,IAAIX,IAAAA,6BAAa,EAACO,EAAEI,aAAa,KAAK,CAACtB,MAAMuB,QAAQ,CAACL,EAAEI,aAAa,GAAG;YACxFR;QACJ;IACJ;IACAd,MAAMwB,gBAAgB,CAACC,wBAAe,EAAER;IACxCjB,MAAMwB,gBAAgB,CAAC,YAAYH;IACnCrB,MAAM0B,YAAY,GAAG;IACrBlB,4BAA4BP,aAAa0B,QAAQ,CAACC,aAAa;IAC/D,kBAAkB;IAClB,OAAO;QACHd;QACAd,MAAM6B,mBAAmB,CAACJ,wBAAe,EAAER;QAC3CjB,MAAM6B,mBAAmB,CAAC,YAAYR;QACtC,OAAOrB,MAAM0B,YAAY;QACzBI,IAAAA,uBAAc,EAACxB;IACnB;AACJ;AACA,SAASJ,eAAeO,EAAE;IACtB,IAAI,CAACA,IAAI;QACL,OAAO;IACX;IACA,IAAIA,GAAGiB,YAAY,EAAE;QACjB,OAAO;IACX;IACA,OAAOxB,eAAeO,OAAO,QAAQA,OAAO,KAAK,IAAI,KAAK,IAAIA,GAAGsB,aAAa;AAClF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.15.1",
+  "version": "9.16.1",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,12 +31,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.13.1",
+    "@fluentui/react-shared-contexts": "^9.13.2",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.15.3",
+    "@fluentui/react-utilities": "^9.15.5",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1",
-    "keyborg": "^2.2.0",
+    "keyborg": "^2.3.0",
     "tabster": "^5.0.1"
   },
   "peerDependencies": {