@fluentui/react-tabster 9.0.3 → 9.1.1

package/CHANGELOG.json

@@ -2,7 +2,121 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Thu, 14 Jul 2022 21:18:40 GMT",
+      "date": "Thu, 15 Sep 2022 09:44:52 GMT",
+      "tag": "@fluentui/react-tabster_v9.1.1",
+      "version": "9.1.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e4d50f2c501c4a8be23b24373242f650a601fdaf",
+            "comment": "fix: Remove provider classname from focus styles"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e2b71230d03f2cf03eff3cda02484dfcb72e9c51",
+            "comment": "fix: Bumps tabster to 2.1.2 and removes deep import for KeyborgCallback"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "f1f4ab4ac21226c8f6729ca263ca09c1ec9b76f2",
+            "comment": "chore: Exports `applyFocusVisible` as internal"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.1",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "ba9444d594f3a960cc590eae5237c08bf7c5a07f",
+            "comment": "chore: consume cypress.config from it's package boundary"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "16aa65dcae8f75c6a221225fd0eb43800650ac66",
+            "comment": "docs: re-generate api.md files"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
+            "comment": "chore: update package scaffold"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 16:04:04 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": {
@@ -17,7 +131,7 @@
             "author": "beachball",
             "package": "@fluentui/react-tabster",
             "comment": "Bump @fluentui/react-utilities to v9.0.2",
-            "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,18 +1,48 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Thu, 14 Jul 2022 21:18:40 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Sep 2022 09:44:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.1.1)
+
+Thu, 15 Sep 2022 09:44:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.1.0..@fluentui/react-tabster_v9.1.1)
+
+### Patches
+
+- fix: Remove provider classname from focus styles ([PR #24710](https://github.com/microsoft/fluentui/pull/24710) by lingfangao@hotmail.com)
+- fix: Bumps tabster to 2.1.2 and removes deep import for KeyborgCallback ([PR #24376](https://github.com/microsoft/fluentui/pull/24376) by lingfangao@hotmail.com)
+- chore: Exports `applyFocusVisible` as internal ([PR #24712](https://github.com/microsoft/fluentui/pull/24712) by lingfangao@hotmail.com)
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.0.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.1.0)
+
+Wed, 03 Aug 2022 16:04:04 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:18:40 GMT 
+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 #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
+- 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)
 

package/dist/index.d.ts

@@ -1,7 +1,15 @@
 import type { GriffelStyle } from '@griffel/react';
+import * as React_2 from 'react';
 import type { RefObject } from 'react';
 import { Types } from 'tabster';
 
+/**
+ * @internal
+ * @param scope - Applies the ponyfill to all DOM children
+ * @param win - window
+ */
+export declare function applyFocusVisiblePolyfill(scope: HTMLElement, win: Window): () => void;
+
 /**
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
@@ -45,7 +53,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 +74,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 +104,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,14 @@ export const createCustomFocusIndicatorStyle = (style, {
   ':focus': {
     outlineStyle: 'none'
   },
-  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  ...(selector === 'focus' && {
+    [`&.${FOCUS_VISIBLE_CLASS}`]: style
+  }),
+  ...(selector === 'focus-within' && {
+    [`&.${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;EAQlB,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,KAAK,mBAAmB,EAAzB,GAA8B;EADJ,CAA5B,CARkB;EAWlB,IAAI,QAAQ,KAAK,cAAb,IAA+B;IACjC,CAAC,KAAK,kBAAkB,IAAI,QAAQ,EAApC,GAAyC;EADR,CAAnC;AAXkB,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\n  ...(selector === 'focus' && {\n    [`&.${FOCUS_VISIBLE_CLASS}`]: style,\n  }),\n  ...(selector === 'focus-within' && {\n    [`&.${FOCUS_WITHIN_CLASS}:${selector}`]: style,\n  }),\n});\n"],"sourceRoot":"../src/"}

package/lib/focus/focusVisiblePolyfill.js

@@ -0,0 +1,90 @@
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
+import { FOCUS_VISIBLE_CLASS } from './constants';
+/**
+ * @internal
+ * @param scope - Applies the ponyfill to all DOM children
+ * @param win - window
+ */
+
+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\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param win - window\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/focus/index.js

@@ -1,3 +1,5 @@
 export * from './createCustomFocusIndicatorStyle';
 export * from './createFocusOutlineStyle';
+export * from './focusVisiblePolyfill';
+export * from './focusWithinPolyfill';
 //# sourceMappingURL=index.js.map

package/lib/focus/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["focus/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["focus/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\nexport * from './focusVisiblePolyfill';\nexport * from './focusWithinPolyfill';\n"]}

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/useKeyboardNavAttribute.js.map

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,SAA9B;AACA,SAAS,SAAT,EAAoB,OAApB,EAA6B,MAA7B,QAA2C,OAA3C;AACA,SAAS,sBAAT,QAAuC,oBAAvC;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAIA;;;;AAIG;;AACH,OAAM,SAAU,uBAAV,GAAiC;EACrC,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EACA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,cAAc,IAAI,aAAa,CAAC,cAAc,CAAC,WAAhB,CAAtC,EAAqE,CAAC,cAAD,CAArE,CAAvB;EACA,MAAM,GAAG,GAAG,MAAM,CAAI,IAAJ,CAAlB;EACA,SAAS,CAAC,MAAK;IACb,IAAI,OAAJ,EAAa;MACX,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;MACA,MAAM,EAAE,GAAoB,IAAI,IAAG;QACjC,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,IAA9B,CAAnB;MACD,CAFD;;MAGA,OAAO,CAAC,SAAR,CAAkB,EAAlB;MACA,OAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;IACD;EACF,CATQ,EASN,CAAC,OAAD,CATM,CAAT;EAUA,OAAO,GAAP;AACD;;AAED,SAAS,mBAAT,CAA6B,UAA7B,EAAiE,SAAjE,EAAoF,KAApF,EAAkG;EAChG,IAAI,CAAC,UAAU,CAAC,OAAhB,EAAyB;IACvB;EACD;;EACD,IAAI,KAAJ,EAAW;IACT,UAAU,CAAC,OAAX,CAAmB,YAAnB,CAAgC,SAAhC,EAA2C,EAA3C;EACD,CAFD,MAEO;IACL,UAAU,CAAC,OAAX,CAAmB,eAAnB,CAAmC,SAAnC;EACD;AACF","sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg/dist/Keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,SAA9B;AACA,SAAS,SAAT,EAAoB,OAApB,EAA6B,MAA7B,QAA2C,OAA3C;AACA,SAAS,sBAAT,QAAuC,oBAAvC;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAIA;;;;AAIG;;AACH,OAAM,SAAU,uBAAV,GAAiC;EACrC,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EACA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,cAAc,IAAI,aAAa,CAAC,cAAc,CAAC,WAAhB,CAAtC,EAAqE,CAAC,cAAD,CAArE,CAAvB;EACA,MAAM,GAAG,GAAG,MAAM,CAAI,IAAJ,CAAlB;EACA,SAAS,CAAC,MAAK;IACb,IAAI,OAAJ,EAAa;MACX,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;MACA,MAAM,EAAE,GAAoB,IAAI,IAAG;QACjC,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,IAA9B,CAAnB;MACD,CAFD;;MAGA,OAAO,CAAC,SAAR,CAAkB,EAAlB;MACA,OAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;IACD;EACF,CATQ,EASN,CAAC,OAAD,CATM,CAAT;EAUA,OAAO,GAAP;AACD;;AAED,SAAS,mBAAT,CAA6B,UAA7B,EAAiE,SAAjE,EAAoF,KAApF,EAAkG;EAChG,IAAI,CAAC,UAAU,CAAC,OAAhB,EAAyB;IACvB;EACD;;EACD,IAAI,KAAJ,EAAW;IACT,UAAU,CAAC,OAAX,CAAmB,YAAnB,CAAgC,SAAhC,EAA2C,EAA3C;EACD,CAFD,MAEO;IACL,UAAU,CAAC,OAAX,CAAmB,eAAnB,CAAmC,SAAnC;EACD;AACF","sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"sourceRoot":"../src/"}