@fluentui/react-tabster 9.0.1 → 9.1.0

package/CHANGELOG.json

@@ -2,7 +2,86 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Tue, 28 Jun 2022 17:37:53 GMT",
+      "date": "Wed, 03 Aug 2022 16:00:31 GMT",
+      "tag": "@fluentui/react-tabster_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "b9e6c6a7dd8ce6111744739a0ec486b99c2bb2ea",
+            "comment": "chore: Bump tabster to 2.1.0"
+          },
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "08563664778fd80284561d3c9d254307a0a32362",
+            "comment": "chore: Bump Griffel dependencies"
+          }
+        ],
+        "minor": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "2756c649a83c0fa0a20b82c62855d388a5e6bc2a",
+            "comment": "feat: Adds `ignoreDefaultKeydown` option to `useArrowNavigationGroup`"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "71590ea6aeab8ce24d8c8e50e0ee80ece81a4392",
+            "comment": "feat: create `:focus-visible` and `:focus-within` polyfills"
+          }
+        ],
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
+            "comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 21:21:05 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.3",
+      "version": "9.0.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
+            "comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.0.2",
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 17:06:26 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.2",
+      "version": "9.0.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 17:39:53 GMT",
       "tag": "@fluentui/react-tabster_v9.0.1",
       "version": "9.0.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,46 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Tue, 28 Jun 2022 17:37:53 GMT and should not be manually modified.
+This log was last generated on Wed, 03 Aug 2022 16:00:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.1.0)
+
+Wed, 03 Aug 2022 16:00:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.3..@fluentui/react-tabster_v9.1.0)
+
+### Minor changes
+
+- feat: Adds `ignoreDefaultKeydown` option to `useArrowNavigationGroup` ([PR #24101](https://github.com/microsoft/fluentui/pull/24101) by lingfangao@hotmail.com)
+- feat: create `:focus-visible` and `:focus-within` polyfills ([PR #24154](https://github.com/microsoft/fluentui/pull/24154) by lingfangao@hotmail.com)
+
+### Patches
+
+- chore: Bump tabster to 2.1.0 ([PR #23811](https://github.com/microsoft/fluentui/pull/23811) by lingfangao@hotmail.com)
+- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
+
+## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.3)
+
+Thu, 14 Jul 2022 21:21:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.2..@fluentui/react-tabster_v9.0.3)
+
+### Patches
+
+- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+
+## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.2)
+
+Thu, 14 Jul 2022 17:06:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.1..@fluentui/react-tabster_v9.0.2)
+
+### Patches
+
+- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+
 ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.1)
 
-Tue, 28 Jun 2022 17:37:53 GMT 
+Tue, 28 Jun 2022 17:39:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0..@fluentui/react-tabster_v9.0.1)
 
 ### Patches

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import type { GriffelStyle } from '@griffel/react';
+import * as React_2 from 'react';
 import type { RefObject } from 'react';
 import { Types } from 'tabster';
 
@@ -45,7 +46,7 @@ export declare type FocusOutlineStyleOptions = {
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation
  */
-export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions | undefined) => Types.TabsterDOMAttribute;
+export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions) => Types.TabsterDOMAttribute;
 
 export declare interface UseArrowNavigationGroupOptions {
     /**
@@ -66,6 +67,10 @@ export declare interface UseArrowNavigationGroupOptions {
      * Allow tabbing within the arrow navigation group items.
      */
     tabbable?: boolean;
+    /**
+     * Tabster should ignore default handling of keydown events
+     */
+    ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];
 }
 
 /**
@@ -92,6 +97,15 @@ export declare const useFocusFinders: () => {
     findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Types.FindNextProps, 'container'>) => HTMLElement | null | undefined;
 };
 
+export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
+
+/**
+ * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
+ * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
+ * @returns ref to the element that uses `:focus-within` styles
+ */
+export declare function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
+
 /**
  * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
  * attribute to a referenced element to ensure keyboard navigation awareness

package/lib/focus/constants.js

@@ -1,5 +1,7 @@
 export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
 export const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;
+export const FOCUS_VISIBLE_CLASS = 'fui-focus-visible';
+export const FOCUS_WITHIN_CLASS = 'fui-focus-within';
 export const defaultOptions = {
   style: {},
   selector: 'focus'

package/lib/focus/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAhE;AACP,OAAO,MAAM,cAAc,GAAG;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAvB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAhE;AACP,OAAO,MAAM,mBAAmB,GAAG,mBAA5B;AACP,OAAO,MAAM,kBAAkB,GAAG,kBAA3B;AACP,OAAO,MAAM,cAAc,GAAG;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAvB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\nexport const FOCUS_VISIBLE_CLASS = 'fui-focus-visible';\nexport const FOCUS_WITHIN_CLASS = 'fui-focus-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -1,4 +1,4 @@
-import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';
+import { FOCUS_VISIBLE_CLASS, defaultOptions, FOCUS_WITHIN_CLASS } from './constants';
 /**
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
@@ -13,6 +13,20 @@ export const createCustomFocusIndicatorStyle = (style, {
   ':focus': {
     outlineStyle: 'none'
   },
-  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  // Remove the `.fui-FluentProvider` global selector once Griffel supports chained global styles
+  // https://github.com/microsoft/griffel/issues/178
+  ...(selector === 'focus' && {
+    [`:global(.fui-FluentProvider)`]: {
+      [`& .${FOCUS_VISIBLE_CLASS}`]: style
+    }
+  }),
+  ...(selector === 'focus-within' && {
+    [`:global(.fui-FluentProvider)`]: {
+      [`& .${FOCUS_WITHIN_CLASS}:${selector}`]: style
+    }
+  })
 });
 //# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

package/lib/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,EAAgC,cAAhC,QAAsD,aAAtD;AAOA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,cAAc,CAAC;AAA5B,IAAiF,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,CAAC,GAAG,qBAAqB,KAAK,QAAQ,EAAtC,GAA2C;AAJzB,CAH2B,CAAxC","sourcesContent":["import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style,\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,EAA8B,cAA9B,EAA8C,kBAA9C,QAAwE,aAAxE;AAOA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,cAAc,CAAC;AAA5B,IAAiF,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE;EADE,CAJA;EAOlB;EACA;EACA,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,8BAAD,GAAkC;MAChC,CAAC,MAAM,mBAAmB,EAA1B,GAA+B;IADC;EADR,CAA5B,CATkB;EAclB,IAAI,QAAQ,KAAK,cAAb,IAA+B;IACjC,CAAC,8BAAD,GAAkC;MAChC,CAAC,MAAM,kBAAkB,IAAI,QAAQ,EAArC,GAA0C;IADV;EADD,CAAnC;AAdkB,CAH2B,CAAxC","sourcesContent":["import { FOCUS_VISIBLE_CLASS, defaultOptions, FOCUS_WITHIN_CLASS } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  // Remove the `.fui-FluentProvider` global selector once Griffel supports chained global styles\n  // https://github.com/microsoft/griffel/issues/178\n  ...(selector === 'focus' && {\n    [`:global(.fui-FluentProvider)`]: {\n      [`& .${FOCUS_VISIBLE_CLASS}`]: style,\n    },\n  }),\n  ...(selector === 'focus-within' && {\n    [`:global(.fui-FluentProvider)`]: {\n      [`& .${FOCUS_WITHIN_CLASS}:${selector}`]: style,\n    },\n  }),\n});\n"],"sourceRoot":"../src/"}

package/lib/focus/focusVisiblePolyfill.js

@@ -0,0 +1,84 @@
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
+import { FOCUS_VISIBLE_CLASS } from './constants';
+export function applyFocusVisiblePolyfill(scope, win) {
+  if (alreadyInScope(scope)) {
+    // Focus visible polyfill already applied at this scope
+    return () => undefined;
+  }
+
+  const state = {
+    current: undefined
+  };
+  const keyborg = createKeyborg(win); // When navigation mode changes remove the focus-visible selector
+
+  keyborg.subscribe(isNavigatingWithKeyboard => {
+    if (!isNavigatingWithKeyboard && state.current) {
+      removeFocusVisibleClass(state.current);
+      state.current = undefined;
+    }
+  }); // Keyborg's focusin event is delegated so it's only registered once on the window
+  // and contains metadata about the focus event
+
+  const keyborgListener = e => {
+    if (state.current) {
+      removeFocusVisibleClass(state.current);
+      state.current = undefined;
+    }
+
+    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
+      // Griffel can't create chained global styles so use the parent element for now
+      state.current = e.target;
+      applyFocusVisibleClass(state.current);
+    }
+  }; // Make sure that when focus leaves the scope, the focus visible class is removed
+
+
+  const blurListener = e => {
+    if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
+      if (state.current) {
+        removeFocusVisibleClass(state.current);
+        state.current = undefined;
+      }
+    }
+  };
+
+  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
+  scope.addEventListener('focusout', blurListener);
+  scope.focusVisible = true; // Return disposer
+
+  return () => {
+    scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
+    scope.removeEventListener('focusout', blurListener);
+    delete scope.focusVisible;
+    disposeKeyborg(keyborg);
+  };
+}
+
+function applyFocusVisibleClass(el) {
+  el.classList.add(FOCUS_VISIBLE_CLASS);
+}
+
+function removeFocusVisibleClass(el) {
+  el.classList.remove(FOCUS_VISIBLE_CLASS);
+}
+
+function isHTMLElement(target) {
+  if (!target) {
+    return false;
+  }
+
+  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
+}
+
+function alreadyInScope(el) {
+  if (!el) {
+    return false;
+  }
+
+  if (el.focusVisible) {
+    return true;
+  }
+
+  return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);
+}
+//# sourceMappingURL=focusVisiblePolyfill.js.map

package/lib/focus/focusVisiblePolyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/focusVisiblePolyfill.ts"],"names":[],"mappings":"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","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_CLASS } 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\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, win: 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(win);\n\n  // When navigation mode changes remove the focus-visible selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard && state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n      // Griffel can't create chained global styles so use the parent element for now\n      state.current = e.target;\n      applyFocusVisibleClass(state.current);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus visible class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n      if (state.current) {\n        removeFocusVisibleClass(state.current);\n        state.current = undefined;\n      }\n    }\n  };\n\n  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  scope.addEventListener('focusout', blurListener);\n  (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n  // Return disposer\n  return () => {\n    scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    scope.removeEventListener('focusout', blurListener);\n    delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n  el.classList.add(FOCUS_VISIBLE_CLASS);\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n  el.classList.remove(FOCUS_VISIBLE_CLASS);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n  if (!target) {\n    return false;\n  }\n  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\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"],"sourceRoot":"../src/"}

package/lib/focus/focusWithinPolyfill.js

@@ -0,0 +1,58 @@
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
+import { FOCUS_WITHIN_CLASS } from './constants';
+/**
+ * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
+ * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
+ * @returns ref to the element that uses `:focus-within` styles
+ */
+
+export function applyFocusWithinPolyfill(element, win) {
+  const keyborg = createKeyborg(win); // When navigation mode changes to mouse, remove the focus-within selector
+
+  keyborg.subscribe(isNavigatingWithKeyboard => {
+    if (!isNavigatingWithKeyboard) {
+      removeFocusWithinClass(element);
+    }
+  }); // Keyborg's focusin event is delegated so it's only registered once on the window
+  // and contains metadata about the focus event
+
+  const keyborgListener = e => {
+    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {
+      // Griffel can't create chained global styles so use the parent element for now
+      applyFocusWithinClass(element);
+    }
+  }; // Make sure that when focus leaves the scope, the focus within class is removed
+
+
+  const blurListener = e => {
+    if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget)) {
+      removeFocusWithinClass(element);
+    }
+  };
+
+  element.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
+  element.addEventListener('focusout', blurListener); // Return disposer
+
+  return () => {
+    element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
+    element.removeEventListener('focusout', blurListener);
+    disposeKeyborg(keyborg);
+  };
+}
+
+function applyFocusWithinClass(el) {
+  el.classList.add(FOCUS_WITHIN_CLASS);
+}
+
+function removeFocusWithinClass(el) {
+  el.classList.remove(FOCUS_WITHIN_CLASS);
+}
+
+function isHTMLElement(target) {
+  if (!target) {
+    return false;
+  }
+
+  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
+}
+//# sourceMappingURL=focusWithinPolyfill.js.map

package/lib/focus/focusWithinPolyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/focusWithinPolyfill.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,EAA+C,aAA/C,EAA8D,cAA9D,QAAoF,SAApF;AACA,SAAS,kBAAT,QAAmC,aAAnC;AASA;;;;AAIG;;AACH,OAAM,SAAU,wBAAV,CAAmC,OAAnC,EAAyD,GAAzD,EAAoE;EACxE,MAAM,OAAO,GAAG,aAAa,CAAC,GAAD,CAA7B,CADwE,CAGxE;;EACA,OAAO,CAAC,SAAR,CAAkB,wBAAwB,IAAG;IAC3C,IAAI,CAAC,wBAAL,EAA+B;MAC7B,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD,EAJwE,CAUxE;EACA;;EACA,MAAM,eAAe,GAAI,CAAD,IAA2B;IACjD,IAAI,OAAO,CAAC,wBAAR,MAAsC,aAAa,CAAC,CAAC,CAAC,MAAH,CAAvD,EAAmE;MACjE;MACA,qBAAqB,CAAC,OAAD,CAArB;IACD;EACF,CALD,CAZwE,CAmBxE;;;EACA,MAAM,YAAY,GAAI,CAAD,IAAkB;IACrC,IAAI,CAAC,CAAC,CAAC,aAAH,IAAqB,aAAa,CAAC,CAAC,CAAC,aAAH,CAAb,IAAkC,CAAC,OAAO,CAAC,QAAR,CAAiB,CAAC,CAAC,aAAnB,CAA5D,EAAgG;MAC9F,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD;;EAMA,OAAO,CAAC,gBAAR,CAAyB,eAAzB,EAA0C,eAA1C;EACA,OAAO,CAAC,gBAAR,CAAyB,UAAzB,EAAqC,YAArC,EA3BwE,CA6BxE;;EACA,OAAO,MAAK;IACV,OAAO,CAAC,mBAAR,CAA4B,eAA5B,EAA6C,eAA7C;IACA,OAAO,CAAC,mBAAR,CAA4B,UAA5B,EAAwC,YAAxC;IACA,cAAc,CAAC,OAAD,CAAd;EACD,CAJD;AAKD;;AAED,SAAS,qBAAT,CAA+B,EAA/B,EAA8C;EAC5C,EAAE,CAAC,SAAH,CAAa,GAAb,CAAiB,kBAAjB;AACD;;AAED,SAAS,sBAAT,CAAgC,EAAhC,EAA+C;EAC7C,EAAE,CAAC,SAAH,CAAa,MAAb,CAAoB,kBAApB;AACD;;AAED,SAAS,aAAT,CAAuB,MAAvB,EAAiD;EAC/C,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,KAAP;EACD;;EACD,OAAO,OAAO,CAAC,MAAM,IAAI,OAAO,MAAP,KAAkB,QAA5B,IAAwC,eAAe,MAAvD,IAAiE,cAAc,MAAhF,CAAd;AACD","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_CLASS } 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\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function applyFocusWithinPolyfill(element: HTMLElement, win: Window): () => void {\n  const keyborg = createKeyborg(win);\n\n  // When navigation mode changes to mouse, remove the focus-within selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard) {\n      removeFocusWithinClass(element);\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {\n      // Griffel can't create chained global styles so use the parent element for now\n      applyFocusWithinClass(element);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus within class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget))) {\n      removeFocusWithinClass(element);\n    }\n  };\n\n  element.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  element.addEventListener('focusout', blurListener);\n\n  // Return disposer\n  return () => {\n    element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    element.removeEventListener('focusout', blurListener);\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusWithinClass(el: HTMLElement) {\n  el.classList.add(FOCUS_WITHIN_CLASS);\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n  el.classList.remove(FOCUS_WITHIN_CLASS);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n  if (!target) {\n    return false;\n  }\n  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/index.js

@@ -1,6 +1,8 @@
 export * from './useArrowNavigationGroup';
 export * from './useFocusableGroup';
 export * from './useFocusFinders';
+export * from './useFocusVisible';
+export * from './useFocusWithin';
 export * from './useKeyboardNavAttribute';
 export * from './useModalAttributes';
 export * from './useTabsterAttributes';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"]}

package/lib/hooks/useArrowNavigationGroup.js

@@ -6,9 +6,14 @@ import { useTabster } from './useTabster';
  * @param options - Options to configure keyboard navigation
  */
 
-export const useArrowNavigationGroup = options => {
-  var _a;
-
+export const useArrowNavigationGroup = (options = {}) => {
+  const {
+    circular,
+    axis,
+    memorizeCurrent,
+    tabbable,
+    ignoreDefaultKeydown
+  } = options;
   const tabster = useTabster();
 
   if (tabster) {
@@ -17,11 +22,16 @@ export const useArrowNavigationGroup = options => {
 
   return useTabsterAttributes({
     mover: {
-      cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
-      direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
-      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent,
-      tabbable: options === null || options === void 0 ? void 0 : options.tabbable
-    }
+      cyclic: !!circular,
+      direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
+      memorizeCurrent: memorizeCurrent,
+      tabbable: tabbable
+    },
+    ...(ignoreDefaultKeydown && {
+      focusable: {
+        ignoreKeydown: ignoreDefaultKeydown
+      }
+    })
   });
 };
 

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,QAAhB,QAAgC,SAAhC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AAuBA;;;AAGG;;AACH,OAAO,MAAM,uBAAuB,GAAI,OAAD,IAAwE;;;EAC7G,MAAM,OAAO,GAAG,UAAU,EAA1B;;EAEA,IAAI,OAAJ,EAAa;IACX,QAAQ,CAAC,OAAD,CAAR;EACD;;EAED,OAAO,oBAAoB,CAAC;IAC1B,KAAK,EAAE;MACL,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;MAEL,SAAS,EAAE,oBAAoB,CAAC,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAT,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,UAAlB,CAF1B;MAGL,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAHrB;MAIL,QAAQ,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;IAJd;EADmB,CAAD,CAA3B;AAQD,CAfM;;AAiBP,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;EACxE,QAAQ,IAAR;IACE,KAAK,YAAL;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,UAA7B;;IACF,KAAK,MAAL;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,IAA7B;;IAEF,KAAK,UAAL;IACA;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,QAA7B;EARJ;AAUD","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options?: UseArrowNavigationGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!options?.circular,\n      direction: axisToMoverDirection(options?.axis ?? 'vertical'),\n      memorizeCurrent: options?.memorizeCurrent,\n      tabbable: options?.tabbable,\n    },\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,QAAhB,QAAgC,SAAhC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AA2BA;;;AAGG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,OAAA,GAA0C,EAA3C,KAA4E;EACjH,MAAM;IAAE,QAAF;IAAY,IAAZ;IAAkB,eAAlB;IAAmC,QAAnC;IAA6C;EAA7C,IAAsE,OAA5E;EACA,MAAM,OAAO,GAAG,UAAU,EAA1B;;EAEA,IAAI,OAAJ,EAAa;IACX,QAAQ,CAAC,OAAD,CAAR;EACD;;EAED,OAAO,oBAAoB,CAAC;IAC1B,KAAK,EAAE;MACL,MAAM,EAAE,CAAC,CAAC,QADL;MAEL,SAAS,EAAE,oBAAoB,CAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,UAAT,CAF1B;MAGL,eAAe,EAAE,eAHZ;MAIL,QAAQ,EAAE;IAJL,CADmB;IAO1B,IAAI,oBAAoB,IAAI;MAC1B,SAAS,EAAE;QACT,aAAa,EAAE;MADN;IADe,CAA5B;EAP0B,CAAD,CAA3B;AAaD,CArBM;;AAuBP,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;EACxE,QAAQ,IAAR;IACE,KAAK,YAAL;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,UAA7B;;IACF,KAAK,MAAL;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,IAA7B;;IAEF,KAAK,UAAL;IACA;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,QAA7B;EARJ;AAUD","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n  /**\n   * Tabster should ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n  const { circular, axis, memorizeCurrent, tabbable, ignoreDefaultKeydown } = options;\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!circular,\n      direction: axisToMoverDirection(axis ?? 'vertical'),\n      memorizeCurrent: memorizeCurrent,\n      tabbable: tabbable,\n    },\n    ...(ignoreDefaultKeydown && {\n      focusable: {\n        ignoreKeydown: ignoreDefaultKeydown,\n      },\n    }),\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/useFocusVisible.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';
+export function useFocusVisible() {
+  const {
+    targetDocument
+  } = useFluent();
+  const scopeRef = React.useRef(null);
+  React.useEffect(() => {
+    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
+      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
+    }
+  }, [scopeRef, targetDocument]);
+  return scopeRef;
+}
+//# sourceMappingURL=useFocusVisible.js.map

package/lib/hooks/useFocusVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useFocusVisible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,yBAAT,QAA0C,+BAA1C;AAEA,OAAM,SAAU,eAAV,GAAyB;EAC7B,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAjB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,QAAQ,CAAC,OAA5C,EAAqD;MACnD,OAAO,yBAAyB,CAAC,QAAQ,CAAC,OAAV,EAAmB,cAAc,CAAC,WAAlC,CAAhC;IACD;EACF,CAJD,EAIG,CAAC,QAAD,EAAW,cAAX,CAJH;EAMA,OAAO,QAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && scopeRef.current) {\n      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n    }\n  }, [scopeRef, targetDocument]);\n\n  return scopeRef;\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/useFocusWithin.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';
+/**
+ * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
+ * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
+ * @returns ref to the element that uses `:focus-within` styles
+ */
+
+export function useFocusWithin() {
+  const {
+    targetDocument
+  } = useFluent();
+  const elementRef = React.useRef(null);
+  React.useEffect(() => {
+    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
+      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);
+    }
+  }, [elementRef, targetDocument]);
+  return elementRef;
+}
+//# sourceMappingURL=useFocusWithin.js.map

package/lib/hooks/useFocusWithin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,wBAAT,QAAyC,8BAAzC;AAEA;;;;AAIG;;AACH,OAAM,SAAU,cAAV,GAAwB;EAC5B,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAnB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,UAAU,CAAC,OAA9C,EAAuD;MACrD,OAAO,wBAAwB,CAAC,UAAU,CAAC,OAAZ,EAAqB,cAAc,CAAC,WAApC,CAA/B;IACD;EACF,CAJD,EAIG,CAAC,UAAD,EAAa,cAAb,CAJH;EAMA,OAAO,UAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const elementRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && elementRef.current) {\n      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n    }\n  }, [elementRef, targetDocument]);\n\n  return elementRef;\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/useTabster.js

@@ -1,5 +1,7 @@
+import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { getCurrentTabster, createTabster } from 'tabster';
+import { createTabster, disposeTabster } from 'tabster';
+import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 /**
  * Tries to get a tabster instance on the current window or creates a new one
  * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary
@@ -9,22 +11,27 @@ import { getCurrentTabster, createTabster } from 'tabster';
  */
 
 export const useTabster = () => {
-  var _a;
-
   const {
     targetDocument
   } = useFluent();
   const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
-  const tabsterOptions = {
-    autoRoot: {},
-    controlTab: false
-  };
-
-  if (!defaultView) {
-    return null;
-  } // TODO: worth memoizing once more tabster options are used
-
+  const tabster = React.useMemo(() => {
+    if (!defaultView) {
+      return null;
+    }
 
-  return (_a = getCurrentTabster(defaultView)) !== null && _a !== void 0 ? _a : createTabster(defaultView, tabsterOptions);
+    return createTabster(defaultView, {
+      autoRoot: {},
+      controlTab: false
+    });
+  }, [defaultView]);
+  useIsomorphicLayoutEffect(() => {
+    return () => {
+      if (tabster) {
+        disposeTabster(tabster);
+      }
+    };
+  }, [tabster]);
+  return tabster;
 };
 //# sourceMappingURL=useTabster.js.map

package/lib/hooks/useTabster.js.map

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,iBAAT,EAA4B,aAA5B,QAAwE,SAAxE;AAEA;;;;;;AAMG;;AACH,OAAO,MAAM,UAAU,GAAG,MAAsC;;;EAC9D,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EAEA,MAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;EACA,MAAM,cAAc,GAAkC;IAAE,QAAQ,EAAE,EAAZ;IAAgB,UAAU,EAAE;EAA5B,CAAtD;;EAEA,IAAI,CAAC,WAAL,EAAkB;IAChB,OAAO,IAAP;EACD,CAR6D,CAU9D;;;EACA,OAAO,CAAA,EAAA,GAAA,iBAAiB,CAAC,WAAD,CAAjB,MAA8B,IAA9B,IAA8B,EAAA,KAAA,KAAA,CAA9B,GAA8B,EAA9B,GAAkC,aAAa,CAAC,WAAD,EAAc,cAAd,CAAtD;AACD,CAZM","sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getCurrentTabster, createTabster, Types as TabsterTypes } from 'tabster';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabsterOptions: TabsterTypes.TabsterCoreProps = { autoRoot: {}, controlTab: false };\n\n  if (!defaultView) {\n    return null;\n  }\n\n  // TODO: worth memoizing once more tabster options are used\n  return getCurrentTabster(defaultView) ?? createTabster(defaultView, tabsterOptions);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,aAAT,EAAwB,cAAxB,QAAqE,SAArE;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AAEA;;;;;;AAMG;;AACH,OAAO,MAAM,UAAU,GAAG,MAAsC;EAC9D,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EAEA,MAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;EACA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,IAAI,CAAC,WAAL,EAAkB;MAChB,OAAO,IAAP;IACD;;IAED,OAAO,aAAa,CAAC,WAAD,EAAc;MAAE,QAAQ,EAAE,EAAZ;MAAgB,UAAU,EAAE;IAA5B,CAAd,CAApB;EACD,CANe,EAMb,CAAC,WAAD,CANa,CAAhB;EAQA,yBAAyB,CAAC,MAAK;IAC7B,OAAO,MAAK;MACV,IAAI,OAAJ,EAAa;QACX,cAAc,CAAC,OAAD,CAAd;MACD;IACF,CAJD;EAKD,CANwB,EAMtB,CAAC,OAAD,CANsB,CAAzB;EAQA,OAAO,OAAP;AACD,CArBM","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n  }, [defaultView]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,3 +1,3 @@
-export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';
+export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';
 export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,uBADF,EAEE,iBAFF,EAGE,eAHF,EAIE,uBAJF,EAKE,kBALF,EAME,oBANF,QAOO,eAPP;AAcA,SAAS,+BAAT,EAA0C,uBAA1C,QAAyE,eAAzE","sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,uBADF,EAEE,iBAFF,EAGE,eAHF,EAIE,eAJF,EAKE,cALF,EAME,uBANF,EAOE,kBAPF,EAQE,oBARF,QASO,eATP;AAgBA,SAAS,+BAAT,EAA0C,uBAA1C,QAAyE,eAAzE","sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/focus/constants.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultOptions = exports.KEYBOARD_NAV_SELECTOR = exports.KEYBOARD_NAV_ATTRIBUTE = void 0;
+exports.defaultOptions = exports.FOCUS_WITHIN_CLASS = exports.FOCUS_VISIBLE_CLASS = exports.KEYBOARD_NAV_SELECTOR = exports.KEYBOARD_NAV_ATTRIBUTE = void 0;
 exports.KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
 exports.KEYBOARD_NAV_SELECTOR = `:global([${exports.KEYBOARD_NAV_ATTRIBUTE}])`;
+exports.FOCUS_VISIBLE_CLASS = 'fui-focus-visible';
+exports.FOCUS_WITHIN_CLASS = 'fui-focus-within';
 exports.defaultOptions = {
   style: {},
   selector: 'focus'

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

@@ -1 +1 @@
-{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,qBAAA,GAAwB,YAAY,OAAA,CAAA,sBAAsB,IAA1D;AACA,OAAA,CAAA,cAAA,GAAiB;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAjB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,qBAAA,GAAwB,YAAY,OAAA,CAAA,sBAAsB,IAA1D;AACA,OAAA,CAAA,mBAAA,GAAsB,mBAAtB;AACA,OAAA,CAAA,kBAAA,GAAqB,kBAArB;AACA,OAAA,CAAA,cAAA,GAAiB;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAjB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\nexport const FOCUS_VISIBLE_CLASS = 'fui-focus-visible';\nexport const FOCUS_WITHIN_CLASS = 'fui-focus-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -21,7 +21,21 @@ const createCustomFocusIndicatorStyle = (style, {
   ':focus': {
     outlineStyle: 'none'
   },
-  [`${constants_1.KEYBOARD_NAV_SELECTOR} :${selector}`]: style
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  // Remove the `.fui-FluentProvider` global selector once Griffel supports chained global styles
+  // https://github.com/microsoft/griffel/issues/178
+  ...(selector === 'focus' && {
+    [`:global(.fui-FluentProvider)`]: {
+      [`& .${constants_1.FOCUS_VISIBLE_CLASS}`]: style
+    }
+  }),
+  ...(selector === 'focus-within' && {
+    [`:global(.fui-FluentProvider)`]: {
+      [`& .${constants_1.FOCUS_WITHIN_CLASS}:${selector}`]: style
+    }
+  })
 });
 
 exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;

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

@@ -1 +1 @@
-{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,CAAC,GAAG,WAAA,CAAA,qBAAqB,KAAK,QAAQ,EAAtC,GAA2C;AAJzB,CAH2B,CAAxC;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style,\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE;EADE,CAJA;EAOlB;EACA;EACA,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,8BAAD,GAAkC;MAChC,CAAC,MAAM,WAAA,CAAA,mBAAmB,EAA1B,GAA+B;IADC;EADR,CAA5B,CATkB;EAclB,IAAI,QAAQ,KAAK,cAAb,IAA+B;IACjC,CAAC,8BAAD,GAAkC;MAChC,CAAC,MAAM,WAAA,CAAA,kBAAkB,IAAI,QAAQ,EAArC,GAA0C;IADV;EADD,CAAnC;AAdkB,CAH2B,CAAxC;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { FOCUS_VISIBLE_CLASS, defaultOptions, FOCUS_WITHIN_CLASS } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  // Remove the `.fui-FluentProvider` global selector once Griffel supports chained global styles\n  // https://github.com/microsoft/griffel/issues/178\n  ...(selector === 'focus' && {\n    [`:global(.fui-FluentProvider)`]: {\n      [`& .${FOCUS_VISIBLE_CLASS}`]: style,\n    },\n  }),\n  ...(selector === 'focus-within' && {\n    [`:global(.fui-FluentProvider)`]: {\n      [`& .${FOCUS_WITHIN_CLASS}:${selector}`]: style,\n    },\n  }),\n});\n"],"sourceRoot":"../src/"}

package/lib-commonjs/focus/focusVisiblePolyfill.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyFocusVisiblePolyfill = void 0;
+
+const keyborg_1 = /*#__PURE__*/require("keyborg");
+
+const constants_1 = /*#__PURE__*/require("./constants");
+
+function applyFocusVisiblePolyfill(scope, win) {
+  if (alreadyInScope(scope)) {
+    // Focus visible polyfill already applied at this scope
+    return () => undefined;
+  }
+
+  const state = {
+    current: undefined
+  };
+  const keyborg = keyborg_1.createKeyborg(win); // When navigation mode changes remove the focus-visible selector
+
+  keyborg.subscribe(isNavigatingWithKeyboard => {
+    if (!isNavigatingWithKeyboard && state.current) {
+      removeFocusVisibleClass(state.current);
+      state.current = undefined;
+    }
+  }); // Keyborg's focusin event is delegated so it's only registered once on the window
+  // and contains metadata about the focus event
+
+  const keyborgListener = e => {
+    if (state.current) {
+      removeFocusVisibleClass(state.current);
+      state.current = undefined;
+    }
+
+    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
+      // Griffel can't create chained global styles so use the parent element for now
+      state.current = e.target;
+      applyFocusVisibleClass(state.current);
+    }
+  }; // Make sure that when focus leaves the scope, the focus visible class is removed
+
+
+  const blurListener = e => {
+    if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
+      if (state.current) {
+        removeFocusVisibleClass(state.current);
+        state.current = undefined;
+      }
+    }
+  };
+
+  scope.addEventListener(keyborg_1.KEYBORG_FOCUSIN, keyborgListener);
+  scope.addEventListener('focusout', blurListener);
+  scope.focusVisible = true; // Return disposer
+
+  return () => {
+    scope.removeEventListener(keyborg_1.KEYBORG_FOCUSIN, keyborgListener);
+    scope.removeEventListener('focusout', blurListener);
+    delete scope.focusVisible;
+    keyborg_1.disposeKeyborg(keyborg);
+  };
+}
+
+exports.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
+
+function applyFocusVisibleClass(el) {
+  el.classList.add(constants_1.FOCUS_VISIBLE_CLASS);
+}
+
+function removeFocusVisibleClass(el) {
+  el.classList.remove(constants_1.FOCUS_VISIBLE_CLASS);
+}
+
+function isHTMLElement(target) {
+  if (!target) {
+    return false;
+  }
+
+  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
+}
+
+function alreadyInScope(el) {
+  if (!el) {
+    return false;
+  }
+
+  if (el.focusVisible) {
+    return true;
+  }
+
+  return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);
+}
+//# sourceMappingURL=focusVisiblePolyfill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/focusVisiblePolyfill.ts"],"names":[],"mappings":"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","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_CLASS } 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\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, win: 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(win);\n\n  // When navigation mode changes remove the focus-visible selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard && state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n      // Griffel can't create chained global styles so use the parent element for now\n      state.current = e.target;\n      applyFocusVisibleClass(state.current);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus visible class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n      if (state.current) {\n        removeFocusVisibleClass(state.current);\n        state.current = undefined;\n      }\n    }\n  };\n\n  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  scope.addEventListener('focusout', blurListener);\n  (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n  // Return disposer\n  return () => {\n    scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    scope.removeEventListener('focusout', blurListener);\n    delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n  el.classList.add(FOCUS_VISIBLE_CLASS);\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n  el.classList.remove(FOCUS_VISIBLE_CLASS);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n  if (!target) {\n    return false;\n  }\n  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\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"],"sourceRoot":"../src/"}

package/lib-commonjs/focus/focusWithinPolyfill.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyFocusWithinPolyfill = void 0;
+
+const keyborg_1 = /*#__PURE__*/require("keyborg");
+
+const constants_1 = /*#__PURE__*/require("./constants");
+/**
+ * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
+ * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
+ * @returns ref to the element that uses `:focus-within` styles
+ */
+
+
+function applyFocusWithinPolyfill(element, win) {
+  const keyborg = keyborg_1.createKeyborg(win); // When navigation mode changes to mouse, remove the focus-within selector
+
+  keyborg.subscribe(isNavigatingWithKeyboard => {
+    if (!isNavigatingWithKeyboard) {
+      removeFocusWithinClass(element);
+    }
+  }); // Keyborg's focusin event is delegated so it's only registered once on the window
+  // and contains metadata about the focus event
+
+  const keyborgListener = e => {
+    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {
+      // Griffel can't create chained global styles so use the parent element for now
+      applyFocusWithinClass(element);
+    }
+  }; // Make sure that when focus leaves the scope, the focus within class is removed
+
+
+  const blurListener = e => {
+    if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget)) {
+      removeFocusWithinClass(element);
+    }
+  };
+
+  element.addEventListener(keyborg_1.KEYBORG_FOCUSIN, keyborgListener);
+  element.addEventListener('focusout', blurListener); // Return disposer
+
+  return () => {
+    element.removeEventListener(keyborg_1.KEYBORG_FOCUSIN, keyborgListener);
+    element.removeEventListener('focusout', blurListener);
+    keyborg_1.disposeKeyborg(keyborg);
+  };
+}
+
+exports.applyFocusWithinPolyfill = applyFocusWithinPolyfill;
+
+function applyFocusWithinClass(el) {
+  el.classList.add(constants_1.FOCUS_WITHIN_CLASS);
+}
+
+function removeFocusWithinClass(el) {
+  el.classList.remove(constants_1.FOCUS_WITHIN_CLASS);
+}
+
+function isHTMLElement(target) {
+  if (!target) {
+    return false;
+  }
+
+  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
+}
+//# sourceMappingURL=focusWithinPolyfill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/focusWithinPolyfill.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AASA;;;;AAIG;;;AACH,SAAgB,wBAAhB,CAAyC,OAAzC,EAA+D,GAA/D,EAA0E;EACxE,MAAM,OAAO,GAAG,SAAA,CAAA,aAAA,CAAc,GAAd,CAAhB,CADwE,CAGxE;;EACA,OAAO,CAAC,SAAR,CAAkB,wBAAwB,IAAG;IAC3C,IAAI,CAAC,wBAAL,EAA+B;MAC7B,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD,EAJwE,CAUxE;EACA;;EACA,MAAM,eAAe,GAAI,CAAD,IAA2B;IACjD,IAAI,OAAO,CAAC,wBAAR,MAAsC,aAAa,CAAC,CAAC,CAAC,MAAH,CAAvD,EAAmE;MACjE;MACA,qBAAqB,CAAC,OAAD,CAArB;IACD;EACF,CALD,CAZwE,CAmBxE;;;EACA,MAAM,YAAY,GAAI,CAAD,IAAkB;IACrC,IAAI,CAAC,CAAC,CAAC,aAAH,IAAqB,aAAa,CAAC,CAAC,CAAC,aAAH,CAAb,IAAkC,CAAC,OAAO,CAAC,QAAR,CAAiB,CAAC,CAAC,aAAnB,CAA5D,EAAgG;MAC9F,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD;;EAMA,OAAO,CAAC,gBAAR,CAAyB,SAAA,CAAA,eAAzB,EAA0C,eAA1C;EACA,OAAO,CAAC,gBAAR,CAAyB,UAAzB,EAAqC,YAArC,EA3BwE,CA6BxE;;EACA,OAAO,MAAK;IACV,OAAO,CAAC,mBAAR,CAA4B,SAAA,CAAA,eAA5B,EAA6C,eAA7C;IACA,OAAO,CAAC,mBAAR,CAA4B,UAA5B,EAAwC,YAAxC;IACA,SAAA,CAAA,cAAA,CAAe,OAAf;EACD,CAJD;AAKD;;AAnCD,OAAA,CAAA,wBAAA,GAAA,wBAAA;;AAqCA,SAAS,qBAAT,CAA+B,EAA/B,EAA8C;EAC5C,EAAE,CAAC,SAAH,CAAa,GAAb,CAAiB,WAAA,CAAA,kBAAjB;AACD;;AAED,SAAS,sBAAT,CAAgC,EAAhC,EAA+C;EAC7C,EAAE,CAAC,SAAH,CAAa,MAAb,CAAoB,WAAA,CAAA,kBAApB;AACD;;AAED,SAAS,aAAT,CAAuB,MAAvB,EAAiD;EAC/C,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,KAAP;EACD;;EACD,OAAO,OAAO,CAAC,MAAM,IAAI,OAAO,MAAP,KAAkB,QAA5B,IAAwC,eAAe,MAAvD,IAAiE,cAAc,MAAhF,CAAd;AACD","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_CLASS } 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\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function applyFocusWithinPolyfill(element: HTMLElement, win: Window): () => void {\n  const keyborg = createKeyborg(win);\n\n  // When navigation mode changes to mouse, remove the focus-within selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard) {\n      removeFocusWithinClass(element);\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {\n      // Griffel can't create chained global styles so use the parent element for now\n      applyFocusWithinClass(element);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus within class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget))) {\n      removeFocusWithinClass(element);\n    }\n  };\n\n  element.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  element.addEventListener('focusout', blurListener);\n\n  // Return disposer\n  return () => {\n    element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    element.removeEventListener('focusout', blurListener);\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusWithinClass(el: HTMLElement) {\n  el.classList.add(FOCUS_WITHIN_CLASS);\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n  el.classList.remove(FOCUS_WITHIN_CLASS);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n  if (!target) {\n    return false;\n  }\n  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/index.js

@@ -12,6 +12,10 @@ tslib_1.__exportStar(require("./useFocusableGroup"), exports);
 
 tslib_1.__exportStar(require("./useFocusFinders"), exports);
 
+tslib_1.__exportStar(require("./useFocusVisible"), exports);
+
+tslib_1.__exportStar(require("./useFocusWithin"), exports);
+
 tslib_1.__exportStar(require("./useKeyboardNavAttribute"), exports);
 
 tslib_1.__exportStar(require("./useModalAttributes"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/useArrowNavigationGroup.js

@@ -16,9 +16,14 @@ const useTabster_1 = /*#__PURE__*/require("./useTabster");
  */
 
 
-const useArrowNavigationGroup = options => {
-  var _a;
-
+const useArrowNavigationGroup = (options = {}) => {
+  const {
+    circular,
+    axis,
+    memorizeCurrent,
+    tabbable,
+    ignoreDefaultKeydown
+  } = options;
   const tabster = useTabster_1.useTabster();
 
   if (tabster) {
@@ -27,11 +32,16 @@ const useArrowNavigationGroup = options => {
 
   return useTabsterAttributes_1.useTabsterAttributes({
     mover: {
-      cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
-      direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
-      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent,
-      tabbable: options === null || options === void 0 ? void 0 : options.tabbable
-    }
+      cyclic: !!circular,
+      direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
+      memorizeCurrent: memorizeCurrent,
+      tabbable: tabbable
+    },
+    ...(ignoreDefaultKeydown && {
+      focusable: {
+        ignoreKeydown: ignoreDefaultKeydown
+      }
+    })
   });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAuBA;;;AAGG;;;AACI,MAAM,uBAAuB,GAAI,OAAD,IAAwE;;;EAC7G,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;EAEA,IAAI,OAAJ,EAAa;IACX,SAAA,CAAA,QAAA,CAAS,OAAT;EACD;;EAED,OAAO,sBAAA,CAAA,oBAAA,CAAqB;IAC1B,KAAK,EAAE;MACL,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;MAEL,SAAS,EAAE,oBAAoB,CAAC,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAT,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,UAAlB,CAF1B;MAGL,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAHrB;MAIL,QAAQ,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;IAJd;EADmB,CAArB,CAAP;AAQD,CAfM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;;AAiBb,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;EACxE,QAAQ,IAAR;IACE,KAAK,YAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,UAA7B;;IACF,KAAK,MAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,IAA7B;;IAEF,KAAK,UAAL;IACA;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,QAA7B;EARJ;AAUD","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options?: UseArrowNavigationGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!options?.circular,\n      direction: axisToMoverDirection(options?.axis ?? 'vertical'),\n      memorizeCurrent: options?.memorizeCurrent,\n      tabbable: options?.tabbable,\n    },\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AA2BA;;;AAGG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,OAAA,GAA0C,EAA3C,KAA4E;EACjH,MAAM;IAAE,QAAF;IAAY,IAAZ;IAAkB,eAAlB;IAAmC,QAAnC;IAA6C;EAA7C,IAAsE,OAA5E;EACA,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;EAEA,IAAI,OAAJ,EAAa;IACX,SAAA,CAAA,QAAA,CAAS,OAAT;EACD;;EAED,OAAO,sBAAA,CAAA,oBAAA,CAAqB;IAC1B,KAAK,EAAE;MACL,MAAM,EAAE,CAAC,CAAC,QADL;MAEL,SAAS,EAAE,oBAAoB,CAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,UAAT,CAF1B;MAGL,eAAe,EAAE,eAHZ;MAIL,QAAQ,EAAE;IAJL,CADmB;IAO1B,IAAI,oBAAoB,IAAI;MAC1B,SAAS,EAAE;QACT,aAAa,EAAE;MADN;IADe,CAA5B;EAP0B,CAArB,CAAP;AAaD,CArBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;;AAuBb,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;EACxE,QAAQ,IAAR;IACE,KAAK,YAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,UAA7B;;IACF,KAAK,MAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,IAA7B;;IAEF,KAAK,UAAL;IACA;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,QAA7B;EARJ;AAUD","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n  /**\n   * Tabster should ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n  const { circular, axis, memorizeCurrent, tabbable, ignoreDefaultKeydown } = options;\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!circular,\n      direction: axisToMoverDirection(axis ?? 'vertical'),\n      memorizeCurrent: memorizeCurrent,\n      tabbable: tabbable,\n    },\n    ...(ignoreDefaultKeydown && {\n      focusable: {\n        ignoreKeydown: ignoreDefaultKeydown,\n      },\n    }),\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/useFocusVisible.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusVisible = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+const focusVisiblePolyfill_1 = /*#__PURE__*/require("../focus/focusVisiblePolyfill");
+
+function useFocusVisible() {
+  const {
+    targetDocument
+  } = react_shared_contexts_1.useFluent_unstable();
+  const scopeRef = React.useRef(null);
+  React.useEffect(() => {
+    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
+      return focusVisiblePolyfill_1.applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
+    }
+  }, [scopeRef, targetDocument]);
+  return scopeRef;
+}
+
+exports.useFocusVisible = useFocusVisible;
+//# sourceMappingURL=useFocusVisible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useFocusVisible.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAEA,SAAgB,eAAhB,GAA+B;EAC7B,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAjB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,QAAQ,CAAC,OAA5C,EAAqD;MACnD,OAAO,sBAAA,CAAA,yBAAA,CAA0B,QAAQ,CAAC,OAAnC,EAA4C,cAAc,CAAC,WAA3D,CAAP;IACD;EACF,CAJD,EAIG,CAAC,QAAD,EAAW,cAAX,CAJH;EAMA,OAAO,QAAP;AACD;;AAXD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && scopeRef.current) {\n      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n    }\n  }, [scopeRef, targetDocument]);\n\n  return scopeRef;\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/useFocusWithin.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusWithin = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+const focusWithinPolyfill_1 = /*#__PURE__*/require("../focus/focusWithinPolyfill");
+/**
+ * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
+ * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
+ * @returns ref to the element that uses `:focus-within` styles
+ */
+
+
+function useFocusWithin() {
+  const {
+    targetDocument
+  } = react_shared_contexts_1.useFluent_unstable();
+  const elementRef = React.useRef(null);
+  React.useEffect(() => {
+    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
+      return focusWithinPolyfill_1.applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);
+    }
+  }, [elementRef, targetDocument]);
+  return elementRef;
+}
+
+exports.useFocusWithin = useFocusWithin;
+//# sourceMappingURL=useFocusWithin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useFocusWithin.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;AAEA;;;;AAIG;;;AACH,SAAgB,cAAhB,GAA8B;EAC5B,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAnB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,UAAU,CAAC,OAA9C,EAAuD;MACrD,OAAO,qBAAA,CAAA,wBAAA,CAAyB,UAAU,CAAC,OAApC,EAA6C,cAAc,CAAC,WAA5D,CAAP;IACD;EACF,CAJD,EAIG,CAAC,UAAD,EAAa,cAAb,CAJH;EAMA,OAAO,UAAP;AACD;;AAXD,OAAA,CAAA,cAAA,GAAA,cAAA","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const elementRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && elementRef.current) {\n      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n    }\n  }, [elementRef, targetDocument]);\n\n  return elementRef;\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/useTabster.js

@@ -5,9 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTabster = void 0;
 
+const React = /*#__PURE__*/require("react");
+
 const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
 const tabster_1 = /*#__PURE__*/require("tabster");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Tries to get a tabster instance on the current window or creates a new one
  * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary
@@ -18,23 +22,28 @@ const tabster_1 = /*#__PURE__*/require("tabster");
 
 
 const useTabster = () => {
-  var _a;
-
   const {
     targetDocument
   } = react_shared_contexts_1.useFluent_unstable();
   const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
-  const tabsterOptions = {
-    autoRoot: {},
-    controlTab: false
-  };
-
-  if (!defaultView) {
-    return null;
-  } // TODO: worth memoizing once more tabster options are used
-
-
-  return (_a = tabster_1.getCurrentTabster(defaultView)) !== null && _a !== void 0 ? _a : tabster_1.createTabster(defaultView, tabsterOptions);
+  const tabster = React.useMemo(() => {
+    if (!defaultView) {
+      return null;
+    }
+
+    return tabster_1.createTabster(defaultView, {
+      autoRoot: {},
+      controlTab: false
+    });
+  }, [defaultView]);
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
+    return () => {
+      if (tabster) {
+        tabster_1.disposeTabster(tabster);
+      }
+    };
+  }, [tabster]);
+  return tabster;
 };
 
 exports.useTabster = useTabster;

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;AAEA;;;;;;AAMG;;;AACI,MAAM,UAAU,GAAG,MAAsC;;;EAC9D,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EAEA,MAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;EACA,MAAM,cAAc,GAAkC;IAAE,QAAQ,EAAE,EAAZ;IAAgB,UAAU,EAAE;EAA5B,CAAtD;;EAEA,IAAI,CAAC,WAAL,EAAkB;IAChB,OAAO,IAAP;EACD,CAR6D,CAU9D;;;EACA,OAAO,CAAA,EAAA,GAAA,SAAA,CAAA,iBAAA,CAAkB,WAAlB,CAAA,MAA8B,IAA9B,IAA8B,EAAA,KAAA,KAAA,CAA9B,GAA8B,EAA9B,GAAkC,SAAA,CAAA,aAAA,CAAc,WAAd,EAA2B,cAA3B,CAAzC;AACD,CAZM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getCurrentTabster, createTabster, Types as TabsterTypes } from 'tabster';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabsterOptions: TabsterTypes.TabsterCoreProps = { autoRoot: {}, controlTab: false };\n\n  if (!defaultView) {\n    return null;\n  }\n\n  // TODO: worth memoizing once more tabster options are used\n  return getCurrentTabster(defaultView) ?? createTabster(defaultView, tabsterOptions);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;AAMG;;;AACI,MAAM,UAAU,GAAG,MAAsC;EAC9D,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EAEA,MAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;EACA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,IAAI,CAAC,WAAL,EAAkB;MAChB,OAAO,IAAP;IACD;;IAED,OAAO,SAAA,CAAA,aAAA,CAAc,WAAd,EAA2B;MAAE,QAAQ,EAAE,EAAZ;MAAgB,UAAU,EAAE;IAA5B,CAA3B,CAAP;EACD,CANe,EAMb,CAAC,WAAD,CANa,CAAhB;EAQA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,OAAO,MAAK;MACV,IAAI,OAAJ,EAAa;QACX,SAAA,CAAA,cAAA,CAAe,OAAf;MACD;IACF,CAJD;EAKD,CAND,EAMG,CAAC,OAAD,CANH;EAQA,OAAO,OAAP;AACD,CArBM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n  }, [defaultView]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createFocusOutlineStyle = exports.createCustomFocusIndicatorStyle = exports.useTabsterAttributes = exports.useModalAttributes = exports.useKeyboardNavAttribute = exports.useFocusFinders = exports.useFocusableGroup = exports.useArrowNavigationGroup = void 0;
+exports.createFocusOutlineStyle = exports.createCustomFocusIndicatorStyle = exports.useTabsterAttributes = exports.useModalAttributes = exports.useKeyboardNavAttribute = exports.useFocusWithin = exports.useFocusVisible = exports.useFocusFinders = exports.useFocusableGroup = exports.useArrowNavigationGroup = void 0;
 
 var index_1 = /*#__PURE__*/require("./hooks/index");
 
@@ -25,6 +25,18 @@ Object.defineProperty(exports, "useFocusFinders", {
     return index_1.useFocusFinders;
   }
 });
+Object.defineProperty(exports, "useFocusVisible", {
+  enumerable: true,
+  get: function () {
+    return index_1.useFocusVisible;
+  }
+});
+Object.defineProperty(exports, "useFocusWithin", {
+  enumerable: true,
+  get: function () {
+    return index_1.useFocusWithin;
+  }
+});
 Object.defineProperty(exports, "useKeyboardNavAttribute", {
   enumerable: true,
   get: function () {

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AAQF,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,+BAAA;EAA+B;AAA/B,CAAA;AAAiC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AAQF,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,+BAAA;EAA+B;AAA/B,CAAA;AAAiC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,12 +31,12 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@griffel/react": "^1.2.0",
+    "@griffel/react": "^1.2.3",
     "@fluentui/react-shared-contexts": "^9.0.0",
     "@fluentui/react-theme": "^9.0.0",
-    "@fluentui/react-utilities": "^9.0.0",
+    "@fluentui/react-utilities": "^9.0.2",
     "keyborg": "^1.1.0",
-    "tabster": "^1.4.2",
+    "tabster": "^2.1.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -47,7 +47,8 @@
   },
   "beachball": {
     "disallowedChangeTypes": [
-      "major"
+      "major",
+      "prerelease"
     ]
   },
   "exports": {