@fluentui/react-tabster 9.21.1 → 9.21.3

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Mon, 06 May 2024 12:48:53 GMT and should not be manually modified.
+This log was last generated on Mon, 20 May 2024 12:36:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.21.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.21.3)
+
+Mon, 20 May 2024 12:36:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.21.2..@fluentui/react-tabster_v9.21.3)
+
+### Patches
+
+- chore: bump @griffel/react ([PR #31258](https://github.com/microsoft/fluentui/pull/31258) by olfedias@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-utilities to v9.18.9 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+
+## [9.21.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.21.2)
+
+Thu, 09 May 2024 19:35:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.21.1..@fluentui/react-tabster_v9.21.2)
+
+### Patches
+
+- fix: replace internal useKeyborg() with useKeyborgRef() ([PR #31295](https://github.com/microsoft/fluentui/pull/31295) by olfedias@microsoft.com)
+
 ## [9.21.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.21.1)
 
-Mon, 06 May 2024 12:48:53 GMT 
+Mon, 06 May 2024 12:55:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.21.0..@fluentui/react-tabster_v9.21.1)
 
 ### Patches

package/lib/focus/createFocusOutlineStyle.js

@@ -35,11 +35,11 @@ import { defaultOptions } from './constants';
             position: 'absolute',
             pointerEvents: 'none',
             zIndex: 1,
-            ...shorthands.borderStyle('solid'),
+            /* eslint-disable deprecation/deprecation */ ...shorthands.borderStyle('solid'),
             ...shorthands.borderWidth(outlineWidth),
             ...shorthands.borderRadius(outlineRadius),
             ...shorthands.borderColor(outlineColor),
-            top: getOutlinePosition(options, 'top'),
+            /* eslint-enable deprecation/deprecation */ top: getOutlinePosition(options, 'top'),
             right: getOutlinePosition(options, 'right'),
             bottom: getOutlinePosition(options, 'bottom'),
             left: getOutlinePosition(options, 'left')

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    '@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"}
+{"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      /* eslint-disable deprecation/deprecation */\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n      /* eslint-enable deprecation/deprecation */\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,0CAA0C,GAC1C,GAAGf,WAAWgB,WAAW,CAAC,QAAQ;YAClC,GAAGhB,WAAWiB,WAAW,CAACb,aAAa;YACvC,GAAGJ,WAAWkB,YAAY,CAACR,cAAc;YACzC,GAAGV,WAAWY,WAAW,CAACD,aAAa;YACvC,yCAAyC,GAEzCQ,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/hooks/{useKeyborg.js → useKeyborgRef.js}

@@ -5,15 +5,20 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
  * @internal
  * Instantiates [keyborg](https://github.com/microsoft/keyborg)
  * @returns - keyborg instance
- */ export function useKeyborg() {
+ */ export function useKeyborgRef() {
     const { targetDocument } = useFluent();
-    const keyborg = React.useMemo(()=>targetDocument && createKeyborg(targetDocument.defaultView), [
-        targetDocument
-    ]);
+    const keyborgRef = React.useRef(null);
     React.useEffect(()=>{
-        return ()=>keyborg && disposeKeyborg(keyborg);
+        if (targetDocument) {
+            const keyborg = createKeyborg(targetDocument.defaultView);
+            keyborgRef.current = keyborg;
+            return ()=>{
+                disposeKeyborg(keyborg);
+                keyborgRef.current = null;
+            };
+        }
     }, [
-        keyborg
+        targetDocument
     ]);
-    return keyborg;
+    return keyborgRef;
 }

package/lib/hooks/useKeyborgRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useKeyborgRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg, type Keyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */\nexport function useKeyborgRef() {\n  const { targetDocument } = useFluent();\n  const keyborgRef = React.useRef<Keyborg | null>(null);\n\n  React.useEffect(() => {\n    if (targetDocument) {\n      const keyborg = createKeyborg(targetDocument.defaultView!);\n      keyborgRef.current = keyborg;\n\n      return () => {\n        disposeKeyborg(keyborg);\n        keyborgRef.current = null;\n      };\n    }\n  }, [targetDocument]);\n\n  return keyborgRef;\n}\n"],"names":["React","createKeyborg","disposeKeyborg","useFluent_unstable","useFluent","useKeyborgRef","targetDocument","keyborgRef","useRef","useEffect","keyborg","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAAsB,UAAU;AACtE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,aAAaP,MAAMQ,MAAM,CAAiB;IAEhDR,MAAMS,SAAS,CAAC;QACd,IAAIH,gBAAgB;YAClB,MAAMI,UAAUT,cAAcK,eAAeK,WAAW;YACxDJ,WAAWK,OAAO,GAAGF;YAErB,OAAO;gBACLR,eAAeQ;gBACfH,WAAWK,OAAO,GAAG;YACvB;QACF;IACF,GAAG;QAACN;KAAe;IAEnB,OAAOC;AACT"}

package/lib/hooks/useOnKeyboardNavigationChange.js

@@ -1,25 +1,28 @@
 import * as React from 'react';
 import { useEventCallback } from '@fluentui/react-utilities';
-import { useKeyborg } from './useKeyborg';
+import { useKeyborgRef } from './useKeyborgRef';
 /**
  * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes
  * in the keyboard navigation mode.
  *
  * @param callback - called every time the keyboard navigation state changes
  */ export function useOnKeyboardNavigationChange(callback) {
-    const keyborg = useKeyborg();
+    const keyborgRef = useKeyborgRef();
     const eventCallback = useEventCallback(callback);
     React.useEffect(()=>{
+        const keyborg = keyborgRef.current;
         if (keyborg) {
             const cb = (next)=>{
                 eventCallback(next);
             };
             keyborg.subscribe(cb);
             cb(keyborg.isNavigatingWithKeyboard());
-            return ()=>keyborg.unsubscribe(cb);
+            return ()=>{
+                keyborg.unsubscribe(cb);
+            };
         }
     }, [
-        keyborg,
+        keyborgRef,
         eventCallback
     ]);
 }

package/lib/hooks/useOnKeyboardNavigationChange.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOnKeyboardNavigationChange.ts"],"sourcesContent":["import * as React from 'react';\nimport type { KeyborgCallback } from 'keyborg';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useKeyborg } from './useKeyborg';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */\nexport function useOnKeyboardNavigationChange(callback: (isNavigatingWithKeyboard: boolean) => void) {\n  const keyborg = useKeyborg();\n  const eventCallback = useEventCallback(callback);\n  React.useEffect(() => {\n    if (keyborg) {\n      const cb: KeyborgCallback = next => {\n        eventCallback(next);\n      };\n      keyborg.subscribe(cb);\n      cb(keyborg.isNavigatingWithKeyboard());\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg, eventCallback]);\n}\n"],"names":["React","useEventCallback","useKeyborg","useOnKeyboardNavigationChange","callback","keyborg","eventCallback","useEffect","cb","next","subscribe","isNavigatingWithKeyboard","unsubscribe"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,UAAU,QAAQ,eAAe;AAE1C;;;;;CAKC,GACD,OAAO,SAASC,8BAA8BC,QAAqD;IACjG,MAAMC,UAAUH;IAChB,MAAMI,gBAAgBL,iBAAiBG;IACvCJ,MAAMO,SAAS,CAAC;QACd,IAAIF,SAAS;YACX,MAAMG,KAAsBC,CAAAA;gBAC1BH,cAAcG;YAChB;YACAJ,QAAQK,SAAS,CAACF;YAClBA,GAAGH,QAAQM,wBAAwB;YACnC,OAAO,IAAMN,QAAQO,WAAW,CAACJ;QACnC;IACF,GAAG;QAACH;QAASC;KAAc;AAC7B"}
+{"version":3,"sources":["useOnKeyboardNavigationChange.ts"],"sourcesContent":["import type { KeyborgCallback } from 'keyborg';\nimport * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\n\nimport { useKeyborgRef } from './useKeyborgRef';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */\nexport function useOnKeyboardNavigationChange(callback: (isNavigatingWithKeyboard: boolean) => void) {\n  const keyborgRef = useKeyborgRef();\n  const eventCallback = useEventCallback(callback);\n\n  React.useEffect(() => {\n    const keyborg = keyborgRef.current;\n\n    if (keyborg) {\n      const cb: KeyborgCallback = next => {\n        eventCallback(next);\n      };\n\n      keyborg.subscribe(cb);\n      cb(keyborg.isNavigatingWithKeyboard());\n\n      return () => {\n        keyborg.unsubscribe(cb);\n      };\n    }\n  }, [keyborgRef, eventCallback]);\n}\n"],"names":["React","useEventCallback","useKeyborgRef","useOnKeyboardNavigationChange","callback","keyborgRef","eventCallback","useEffect","keyborg","current","cb","next","subscribe","isNavigatingWithKeyboard","unsubscribe"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,aAAa,QAAQ,kBAAkB;AAEhD;;;;;CAKC,GACD,OAAO,SAASC,8BAA8BC,QAAqD;IACjG,MAAMC,aAAaH;IACnB,MAAMI,gBAAgBL,iBAAiBG;IAEvCJ,MAAMO,SAAS,CAAC;QACd,MAAMC,UAAUH,WAAWI,OAAO;QAElC,IAAID,SAAS;YACX,MAAME,KAAsBC,CAAAA;gBAC1BL,cAAcK;YAChB;YAEAH,QAAQI,SAAS,CAACF;YAClBA,GAAGF,QAAQK,wBAAwB;YAEnC,OAAO;gBACLL,QAAQM,WAAW,CAACJ;YACtB;QACF;IACF,GAAG;QAACL;QAAYC;KAAc;AAChC"}

package/lib/hooks/useSetKeyboardNavigation.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { useKeyborg } from './useKeyborg';
+import { useKeyborgRef } from './useKeyborgRef';
 /**
  */ export function useSetKeyboardNavigation() {
-    const keyborg = useKeyborg();
+    const keyborgRef = useKeyborgRef();
     return React.useCallback((isNavigatingWithKeyboard)=>{
-        keyborg === null || keyborg === void 0 ? void 0 : keyborg.setVal(isNavigatingWithKeyboard);
+        var _keyborgRef_current;
+        (_keyborgRef_current = keyborgRef.current) === null || _keyborgRef_current === void 0 ? void 0 : _keyborgRef_current.setVal(isNavigatingWithKeyboard);
     }, [
-        keyborg
+        keyborgRef
     ]);
 }

package/lib/hooks/useSetKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSetKeyboardNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useKeyborg } from './useKeyborg';\n\n/**\n */\nexport function useSetKeyboardNavigation() {\n  const keyborg = useKeyborg();\n\n  return React.useCallback(\n    (isNavigatingWithKeyboard: boolean) => {\n      keyborg?.setVal(isNavigatingWithKeyboard);\n    },\n    [keyborg],\n  );\n}\n"],"names":["React","useKeyborg","useSetKeyboardNavigation","keyborg","useCallback","isNavigatingWithKeyboard","setVal"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,eAAe;AAE1C;CACC,GACD,OAAO,SAASC;IACd,MAAMC,UAAUF;IAEhB,OAAOD,MAAMI,WAAW,CACtB,CAACC;QACCF,oBAAAA,8BAAAA,QAASG,MAAM,CAACD;IAClB,GACA;QAACF;KAAQ;AAEb"}
+{"version":3,"sources":["useSetKeyboardNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useKeyborgRef } from './useKeyborgRef';\n\n/**\n */\nexport function useSetKeyboardNavigation() {\n  const keyborgRef = useKeyborgRef();\n\n  return React.useCallback(\n    (isNavigatingWithKeyboard: boolean) => {\n      keyborgRef.current?.setVal(isNavigatingWithKeyboard);\n    },\n    [keyborgRef],\n  );\n}\n"],"names":["React","useKeyborgRef","useSetKeyboardNavigation","keyborgRef","useCallback","isNavigatingWithKeyboard","current","setVal"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,kBAAkB;AAEhD;CACC,GACD,OAAO,SAASC;IACd,MAAMC,aAAaF;IAEnB,OAAOD,MAAMI,WAAW,CACtB,CAACC;YACCF;SAAAA,sBAAAA,WAAWG,OAAO,cAAlBH,0CAAAA,oBAAoBI,MAAM,CAACF;IAC7B,GACA;QAACF;KAAW;AAEhB"}

package/lib-commonjs/focus/createFocusOutlineStyle.js

@@ -45,11 +45,11 @@ const _constants = require("./constants");
             position: 'absolute',
             pointerEvents: 'none',
             zIndex: 1,
-            ..._react.shorthands.borderStyle('solid'),
+            /* eslint-disable deprecation/deprecation */ ..._react.shorthands.borderStyle('solid'),
             ..._react.shorthands.borderWidth(outlineWidth),
             ..._react.shorthands.borderRadius(outlineRadius),
             ..._react.shorthands.borderColor(outlineColor),
-            top: getOutlinePosition(options, 'top'),
+            /* eslint-enable deprecation/deprecation */ top: getOutlinePosition(options, 'top'),
             right: getOutlinePosition(options, 'right'),
             bottom: getOutlinePosition(options, 'bottom'),
             left: getOutlinePosition(options, 'left')

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        '@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"}
+{"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            /* eslint-disable deprecation/deprecation */ ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth(outlineWidth),\n            ...shorthands.borderRadius(outlineRadius),\n            ...shorthands.borderColor(outlineColor),\n            /* eslint-enable deprecation/deprecation */ 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,0CAA0C,GAAG,GAAGJ,iBAAU,CAACK,WAAW,CAAC,QAAQ;YAC/E,GAAGL,iBAAU,CAACM,WAAW,CAACd,aAAa;YACvC,GAAGQ,iBAAU,CAACO,YAAY,CAACT,cAAc;YACzC,GAAGE,iBAAU,CAACC,WAAW,CAACF,aAAa;YACvC,yCAAyC,GAAGS,KAAKjB,mBAAmBM,SAAS;YAC7EY,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/hooks/{useKeyborg.js → useKeyborgRef.js}

@@ -2,25 +2,30 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useKeyborg", {
+Object.defineProperty(exports, "useKeyborgRef", {
     enumerable: true,
     get: function() {
-        return useKeyborg;
+        return useKeyborgRef;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _keyborg = require("keyborg");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
-function useKeyborg() {
+function useKeyborgRef() {
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const keyborg = _react.useMemo(()=>targetDocument && (0, _keyborg.createKeyborg)(targetDocument.defaultView), [
-        targetDocument
-    ]);
+    const keyborgRef = _react.useRef(null);
     _react.useEffect(()=>{
-        return ()=>keyborg && (0, _keyborg.disposeKeyborg)(keyborg);
+        if (targetDocument) {
+            const keyborg = (0, _keyborg.createKeyborg)(targetDocument.defaultView);
+            keyborgRef.current = keyborg;
+            return ()=>{
+                (0, _keyborg.disposeKeyborg)(keyborg);
+                keyborgRef.current = null;
+            };
+        }
     }, [
-        keyborg
+        targetDocument
     ]);
-    return keyborg;
+    return keyborgRef;
 }

package/lib-commonjs/hooks/useKeyborgRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useKeyborgRef.js"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */ export function useKeyborgRef() {\n    const { targetDocument } = useFluent();\n    const keyborgRef = React.useRef(null);\n    React.useEffect(()=>{\n        if (targetDocument) {\n            const keyborg = createKeyborg(targetDocument.defaultView);\n            keyborgRef.current = keyborg;\n            return ()=>{\n                disposeKeyborg(keyborg);\n                keyborgRef.current = null;\n            };\n        }\n    }, [\n        targetDocument\n    ]);\n    return keyborgRef;\n}\n"],"names":["useKeyborgRef","targetDocument","useFluent","keyborgRef","React","useRef","useEffect","keyborg","createKeyborg","defaultView","current","disposeKeyborg"],"mappings":";;;;+BAOoBA;;;eAAAA;;;;iEAPG;yBACuB;qCACE;AAKrC,SAASA;IAChB,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,aAAaC,OAAMC,MAAM,CAAC;IAChCD,OAAME,SAAS,CAAC;QACZ,IAAIL,gBAAgB;YAChB,MAAMM,UAAUC,IAAAA,sBAAa,EAACP,eAAeQ,WAAW;YACxDN,WAAWO,OAAO,GAAGH;YACrB,OAAO;gBACHI,IAAAA,uBAAc,EAACJ;gBACfJ,WAAWO,OAAO,GAAG;YACzB;QACJ;IACJ,GAAG;QACCT;KACH;IACD,OAAOE;AACX"}

package/lib-commonjs/hooks/useOnKeyboardNavigationChange.js

@@ -11,21 +11,24 @@ Object.defineProperty(exports, "useOnKeyboardNavigationChange", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
-const _useKeyborg = require("./useKeyborg");
+const _useKeyborgRef = require("./useKeyborgRef");
 function useOnKeyboardNavigationChange(callback) {
-    const keyborg = (0, _useKeyborg.useKeyborg)();
+    const keyborgRef = (0, _useKeyborgRef.useKeyborgRef)();
     const eventCallback = (0, _reactutilities.useEventCallback)(callback);
     _react.useEffect(()=>{
+        const keyborg = keyborgRef.current;
         if (keyborg) {
             const cb = (next)=>{
                 eventCallback(next);
             };
             keyborg.subscribe(cb);
             cb(keyborg.isNavigatingWithKeyboard());
-            return ()=>keyborg.unsubscribe(cb);
+            return ()=>{
+                keyborg.unsubscribe(cb);
+            };
         }
     }, [
-        keyborg,
+        keyborgRef,
         eventCallback
     ]);
 }

package/lib-commonjs/hooks/useOnKeyboardNavigationChange.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOnKeyboardNavigationChange.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useKeyborg } from './useKeyborg';\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */ export function useOnKeyboardNavigationChange(callback) {\n    const keyborg = useKeyborg();\n    const eventCallback = useEventCallback(callback);\n    React.useEffect(()=>{\n        if (keyborg) {\n            const cb = (next)=>{\n                eventCallback(next);\n            };\n            keyborg.subscribe(cb);\n            cb(keyborg.isNavigatingWithKeyboard());\n            return ()=>keyborg.unsubscribe(cb);\n        }\n    }, [\n        keyborg,\n        eventCallback\n    ]);\n}\n"],"names":["useOnKeyboardNavigationChange","callback","keyborg","useKeyborg","eventCallback","useEventCallback","React","useEffect","cb","next","subscribe","isNavigatingWithKeyboard","unsubscribe"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;gCACU;4BACN;AAMhB,SAASA,8BAA8BC,QAAQ;IACtD,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,MAAMC,gBAAgBC,IAAAA,gCAAgB,EAACJ;IACvCK,OAAMC,SAAS,CAAC;QACZ,IAAIL,SAAS;YACT,MAAMM,KAAK,CAACC;gBACRL,cAAcK;YAClB;YACAP,QAAQQ,SAAS,CAACF;YAClBA,GAAGN,QAAQS,wBAAwB;YACnC,OAAO,IAAIT,QAAQU,WAAW,CAACJ;QACnC;IACJ,GAAG;QACCN;QACAE;KACH;AACL"}
+{"version":3,"sources":["useOnKeyboardNavigationChange.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useKeyborgRef } from './useKeyborgRef';\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */ export function useOnKeyboardNavigationChange(callback) {\n    const keyborgRef = useKeyborgRef();\n    const eventCallback = useEventCallback(callback);\n    React.useEffect(()=>{\n        const keyborg = keyborgRef.current;\n        if (keyborg) {\n            const cb = (next)=>{\n                eventCallback(next);\n            };\n            keyborg.subscribe(cb);\n            cb(keyborg.isNavigatingWithKeyboard());\n            return ()=>{\n                keyborg.unsubscribe(cb);\n            };\n        }\n    }, [\n        keyborgRef,\n        eventCallback\n    ]);\n}\n"],"names":["useOnKeyboardNavigationChange","callback","keyborgRef","useKeyborgRef","eventCallback","useEventCallback","React","useEffect","keyborg","current","cb","next","subscribe","isNavigatingWithKeyboard","unsubscribe"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;gCACU;+BACH;AAMnB,SAASA,8BAA8BC,QAAQ;IACtD,MAAMC,aAAaC,IAAAA,4BAAa;IAChC,MAAMC,gBAAgBC,IAAAA,gCAAgB,EAACJ;IACvCK,OAAMC,SAAS,CAAC;QACZ,MAAMC,UAAUN,WAAWO,OAAO;QAClC,IAAID,SAAS;YACT,MAAME,KAAK,CAACC;gBACRP,cAAcO;YAClB;YACAH,QAAQI,SAAS,CAACF;YAClBA,GAAGF,QAAQK,wBAAwB;YACnC,OAAO;gBACHL,QAAQM,WAAW,CAACJ;YACxB;QACJ;IACJ,GAAG;QACCR;QACAE;KACH;AACL"}

package/lib-commonjs/hooks/useSetKeyboardNavigation.js

@@ -10,12 +10,13 @@ Object.defineProperty(exports, "useSetKeyboardNavigation", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useKeyborg = require("./useKeyborg");
+const _useKeyborgRef = require("./useKeyborgRef");
 function useSetKeyboardNavigation() {
-    const keyborg = (0, _useKeyborg.useKeyborg)();
+    const keyborgRef = (0, _useKeyborgRef.useKeyborgRef)();
     return _react.useCallback((isNavigatingWithKeyboard)=>{
-        keyborg === null || keyborg === void 0 ? void 0 : keyborg.setVal(isNavigatingWithKeyboard);
+        var _keyborgRef_current;
+        (_keyborgRef_current = keyborgRef.current) === null || _keyborgRef_current === void 0 ? void 0 : _keyborgRef_current.setVal(isNavigatingWithKeyboard);
     }, [
-        keyborg
+        keyborgRef
     ]);
 }

package/lib-commonjs/hooks/useSetKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSetKeyboardNavigation.js"],"sourcesContent":["import * as React from 'react';\nimport { useKeyborg } from './useKeyborg';\n/**\n */ export function useSetKeyboardNavigation() {\n    const keyborg = useKeyborg();\n    return React.useCallback((isNavigatingWithKeyboard)=>{\n        keyborg === null || keyborg === void 0 ? void 0 : keyborg.setVal(isNavigatingWithKeyboard);\n    }, [\n        keyborg\n    ]);\n}\n"],"names":["useSetKeyboardNavigation","keyborg","useKeyborg","React","useCallback","isNavigatingWithKeyboard","setVal"],"mappings":";;;;+BAGoBA;;;eAAAA;;;;iEAHG;4BACI;AAEhB,SAASA;IAChB,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,OAAOC,OAAMC,WAAW,CAAC,CAACC;QACtBJ,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQK,MAAM,CAACD;IACrE,GAAG;QACCJ;KACH;AACL"}
+{"version":3,"sources":["useSetKeyboardNavigation.js"],"sourcesContent":["import * as React from 'react';\nimport { useKeyborgRef } from './useKeyborgRef';\n/**\n */ export function useSetKeyboardNavigation() {\n    const keyborgRef = useKeyborgRef();\n    return React.useCallback((isNavigatingWithKeyboard)=>{\n        var _keyborgRef_current;\n        (_keyborgRef_current = keyborgRef.current) === null || _keyborgRef_current === void 0 ? void 0 : _keyborgRef_current.setVal(isNavigatingWithKeyboard);\n    }, [\n        keyborgRef\n    ]);\n}\n"],"names":["useSetKeyboardNavigation","keyborgRef","useKeyborgRef","React","useCallback","isNavigatingWithKeyboard","_keyborgRef_current","current","setVal"],"mappings":";;;;+BAGoBA;;;eAAAA;;;;iEAHG;+BACO;AAEnB,SAASA;IAChB,MAAMC,aAAaC,IAAAA,4BAAa;IAChC,OAAOC,OAAMC,WAAW,CAAC,CAACC;QACtB,IAAIC;QACHA,CAAAA,sBAAsBL,WAAWM,OAAO,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,MAAM,CAACH;IAChI,GAAG;QACCJ;KACH;AACL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.21.1",
+  "version": "9.21.3",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,10 +31,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.18.0",
+    "@fluentui/react-shared-contexts": "^9.19.0",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.8",
-    "@griffel/react": "^1.5.14",
+    "@fluentui/react-utilities": "^9.18.9",
+    "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1",
     "keyborg": "^2.6.0",
     "tabster": "^7.1.2"

package/lib/hooks/useKeyborg.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useKeyborg.ts"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */\nexport function useKeyborg() {\n  const { targetDocument } = useFluent();\n  const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n\n  React.useEffect(() => {\n    return () => keyborg && disposeKeyborg(keyborg);\n  }, [keyborg]);\n\n  return keyborg;\n}\n"],"names":["React","createKeyborg","disposeKeyborg","useFluent_unstable","useFluent","useKeyborg","targetDocument","keyborg","useMemo","defaultView","useEffect"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AACxD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,UAAUP,MAAMQ,OAAO,CAAC,IAAMF,kBAAkBL,cAAcK,eAAeG,WAAW,GAAI;QAACH;KAAe;IAElHN,MAAMU,SAAS,CAAC;QACd,OAAO,IAAMH,WAAWL,eAAeK;IACzC,GAAG;QAACA;KAAQ;IAEZ,OAAOA;AACT"}

package/lib-commonjs/hooks/useKeyborg.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useKeyborg.js"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */ export function useKeyborg() {\n    const { targetDocument } = useFluent();\n    const keyborg = React.useMemo(()=>targetDocument && createKeyborg(targetDocument.defaultView), [\n        targetDocument\n    ]);\n    React.useEffect(()=>{\n        return ()=>keyborg && disposeKeyborg(keyborg);\n    }, [\n        keyborg\n    ]);\n    return keyborg;\n}\n"],"names":["useKeyborg","targetDocument","useFluent","keyborg","React","useMemo","createKeyborg","defaultView","useEffect","disposeKeyborg"],"mappings":";;;;+BAOoBA;;;eAAAA;;;;iEAPG;yBACuB;qCACE;AAKrC,SAASA;IAChB,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,UAAUC,OAAMC,OAAO,CAAC,IAAIJ,kBAAkBK,IAAAA,sBAAa,EAACL,eAAeM,WAAW,GAAG;QAC3FN;KACH;IACDG,OAAMI,SAAS,CAAC;QACZ,OAAO,IAAIL,WAAWM,IAAAA,uBAAc,EAACN;IACzC,GAAG;QACCA;KACH;IACD,OAAOA;AACX"}