@fluentui/react-tabster 9.1.0 → 9.1.1

package/CHANGELOG.json

@@ -2,7 +2,78 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Wed, 03 Aug 2022 16:00:31 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": {

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Wed, 03 Aug 2022 16:00:31 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:00:31 GMT 
+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

package/dist/index.d.ts

@@ -3,6 +3,13 @@ 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

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -16,17 +16,11 @@ export const createCustomFocusIndicatorStyle = (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
-    }
+    [`&.${FOCUS_VISIBLE_CLASS}`]: style
   }),
   ...(selector === 'focus-within' && {
-    [`:global(.fui-FluentProvider)`]: {
-      [`& .${FOCUS_WITHIN_CLASS}:${selector}`]: style
-    }
+    [`&.${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,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/"}
+{"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

@@ -1,5 +1,11 @@
 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

package/lib/focus/focusVisiblePolyfill.js.map

@@ -1 +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/"}
+{"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/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/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/"}

package/lib/index.js

@@ -1,3 +1,4 @@
 export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';
 export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
+export { applyFocusVisiblePolyfill } 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,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/"}
+{"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;AASA,SAAS,yBAAT,QAA0C,eAA1C","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\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -24,17 +24,11 @@ const createCustomFocusIndicatorStyle = (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
-    }
+    [`&.${constants_1.FOCUS_VISIBLE_CLASS}`]: style
   }),
   ...(selector === 'focus-within' && {
-    [`:global(.fui-FluentProvider)`]: {
-      [`& .${constants_1.FOCUS_WITHIN_CLASS}:${selector}`]: style
-    }
+    [`&.${constants_1.FOCUS_WITHIN_CLASS}:${selector}`]: style
   })
 });
 

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,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/"}
+{"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;EAQlB,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,KAAK,WAAA,CAAA,mBAAmB,EAAzB,GAA8B;EADJ,CAA5B,CARkB;EAWlB,IAAI,QAAQ,KAAK,cAAb,IAA+B;IACjC,CAAC,KAAK,WAAA,CAAA,kBAAkB,IAAI,QAAQ,EAApC,GAAyC;EADR,CAAnC;AAXkB,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\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-commonjs/focus/focusVisiblePolyfill.js

@@ -8,6 +8,12 @@ exports.applyFocusVisiblePolyfill = void 0;
 const keyborg_1 = /*#__PURE__*/require("keyborg");
 
 const constants_1 = /*#__PURE__*/require("./constants");
+/**
+ * @internal
+ * @param scope - Applies the ponyfill to all DOM children
+ * @param win - window
+ */
+
 
 function applyFocusVisiblePolyfill(scope, win) {
   if (alreadyInScope(scope)) {

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

@@ -1 +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/"}
+{"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-commonjs/focus/index.js

@@ -9,4 +9,8 @@ const tslib_1 = /*#__PURE__*/require("tslib");
 tslib_1.__exportStar(require("./createCustomFocusIndicatorStyle"), exports);
 
 tslib_1.__exportStar(require("./createFocusOutlineStyle"), exports);
+
+tslib_1.__exportStar(require("./focusVisiblePolyfill"), exports);
+
+tslib_1.__exportStar(require("./focusWithinPolyfill"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["focus/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["focus/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\nexport * from './focusVisiblePolyfill';\nexport * from './focusWithinPolyfill';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAIA;;;;AAIG;;;AACH,SAAgB,uBAAhB,GAAuC;EACrC,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EACA,MAAM,OAAO,GAAG,OAAA,CAAA,OAAA,CAAQ,MAAM,cAAc,IAAI,SAAA,CAAA,aAAA,CAAc,cAAc,CAAC,WAA7B,CAAhC,EAA4E,CAAC,cAAD,CAA5E,CAAhB;EACA,MAAM,GAAG,GAAG,OAAA,CAAA,MAAA,CAAU,IAAV,CAAZ;EACA,OAAA,CAAA,SAAA,CAAU,MAAK;IACb,IAAI,OAAJ,EAAa;MACX,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;MACA,MAAM,EAAE,GAAoB,IAAI,IAAG;QACjC,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,IAA9B,CAAnB;MACD,CAFD;;MAGA,OAAO,CAAC,SAAR,CAAkB,EAAlB;MACA,OAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;IACD;EACF,CATD,EASG,CAAC,OAAD,CATH;EAUA,OAAO,GAAP;AACD;;AAfD,OAAA,CAAA,uBAAA,GAAA,uBAAA;;AAiBA,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,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAIA;;;;AAIG;;;AACH,SAAgB,uBAAhB,GAAuC;EACrC,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EACA,MAAM,OAAO,GAAG,OAAA,CAAA,OAAA,CAAQ,MAAM,cAAc,IAAI,SAAA,CAAA,aAAA,CAAc,cAAc,CAAC,WAA7B,CAAhC,EAA4E,CAAC,cAAD,CAA5E,CAAhB;EACA,MAAM,GAAG,GAAG,OAAA,CAAA,MAAA,CAAU,IAAV,CAAZ;EACA,OAAA,CAAA,SAAA,CAAU,MAAK;IACb,IAAI,OAAJ,EAAa;MACX,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;MACA,MAAM,EAAE,GAAoB,IAAI,IAAG;QACjC,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,IAA9B,CAAnB;MACD,CAFD;;MAGA,OAAO,CAAC,SAAR,CAAkB,EAAlB;MACA,OAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;IACD;EACF,CATD,EASG,CAAC,OAAD,CATH;EAUA,OAAO,GAAP;AACD;;AAfD,OAAA,CAAA,uBAAA,GAAA,uBAAA;;AAiBA,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/"}

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.useFocusWithin = exports.useFocusVisible = exports.useFocusFinders = exports.useFocusableGroup = exports.useArrowNavigationGroup = void 0;
+exports.applyFocusVisiblePolyfill = 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");
 
@@ -70,4 +70,13 @@ Object.defineProperty(exports, "createFocusOutlineStyle", {
     return index_2.createFocusOutlineStyle;
   }
 });
+
+var index_3 = /*#__PURE__*/require("./focus/index");
+
+Object.defineProperty(exports, "applyFocusVisiblePolyfill", {
+  enumerable: true,
+  get: function () {
+    return index_3.applyFocusVisiblePolyfill;
+  }
+});
 //# sourceMappingURL=index.js.map

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,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/"}
+{"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;;AAS1C,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,yBAAA;EAAyB;AAAzB,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\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -15,14 +15,14 @@
     "build": "just-scripts build",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "e2e": "yarn cypress run --component",
-    "e2e:local": "yarn cypress open --component",
+    "e2e": "cypress run --component",
+    "e2e:local": "cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "storybook": "node ../../../scripts/storybook/runner",
+    "storybook": "start-storybook",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-tabster/src && yarn docs",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-tabster/src && yarn docs",
     "start": "yarn storybook",
     "type-check": "tsc -b tsconfig.json"
   },
@@ -31,12 +31,12 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@griffel/react": "^1.2.3",
-    "@fluentui/react-shared-contexts": "^9.0.0",
-    "@fluentui/react-theme": "^9.0.0",
-    "@fluentui/react-utilities": "^9.0.2",
-    "keyborg": "^1.1.0",
-    "tabster": "^2.1.0",
+    "@griffel/react": "^1.3.0",
+    "@fluentui/react-shared-contexts": "^9.0.1",
+    "@fluentui/react-theme": "^9.1.0",
+    "@fluentui/react-utilities": "^9.1.0",
+    "keyborg": "^1.2.1",
+    "tabster": "^2.1.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/dist/tsdoc-metadata.json

@@ -1,11 +0,0 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.18.1"
-    }
-  ]
-}