@fluentui/react-tabster 9.0.3 → 9.1.1

package/lib/hooks/useTabster.js

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

package/lib/hooks/useTabster.js.map

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

package/lib/index.js

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

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

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

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

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -21,7 +21,15 @@ const createCustomFocusIndicatorStyle = (style, {
   ':focus': {
     outlineStyle: 'none'
   },
-  [`${constants_1.KEYBOARD_NAV_SELECTOR} :${selector}`]: style
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  ...(selector === 'focus' && {
+    [`&.${constants_1.FOCUS_VISIBLE_CLASS}`]: style
+  }),
+  ...(selector === 'focus-within' && {
+    [`&.${constants_1.FOCUS_WITHIN_CLASS}:${selector}`]: style
+  })
 });
 
 exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;

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

@@ -1 +1 @@
-{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,CAAC,GAAG,WAAA,CAAA,qBAAqB,KAAK,QAAQ,EAAtC,GAA2C;AAJzB,CAH2B,CAAxC;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style,\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE;EADE,CAJA;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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/focusVisiblePolyfill.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAoBA;;;;AAIG;;;AACH,SAAgB,yBAAhB,CAA0C,KAA1C,EAA8D,GAA9D,EAAyE;EACvE,IAAI,cAAc,CAAC,KAAD,CAAlB,EAA2B;IACzB;IACA,OAAO,MAAM,SAAb;EACD;;EAED,MAAM,KAAK,GAAsB;IAC/B,OAAO,EAAE;EADsB,CAAjC;EAIA,MAAM,OAAO,GAAG,SAAA,CAAA,aAAA,CAAc,GAAd,CAAhB,CAVuE,CAYvE;;EACA,OAAO,CAAC,SAAR,CAAkB,wBAAwB,IAAG;IAC3C,IAAI,CAAC,wBAAD,IAA6B,KAAK,CAAC,OAAvC,EAAgD;MAC9C,uBAAuB,CAAC,KAAK,CAAC,OAAP,CAAvB;MACA,KAAK,CAAC,OAAN,GAAgB,SAAhB;IACD;EACF,CALD,EAbuE,CAoBvE;EACA;;EACA,MAAM,eAAe,GAAI,CAAD,IAA2B;IACjD,IAAI,KAAK,CAAC,OAAV,EAAmB;MACjB,uBAAuB,CAAC,KAAK,CAAC,OAAP,CAAvB;MACA,KAAK,CAAC,OAAN,GAAgB,SAAhB;IACD;;IAED,IAAI,OAAO,CAAC,wBAAR,MAAsC,aAAa,CAAC,CAAC,CAAC,MAAH,CAAnD,IAAiE,CAAC,CAAC,MAAvE,EAA+E;MAC7E;MACA,KAAK,CAAC,OAAN,GAAgB,CAAC,CAAC,MAAlB;MACA,sBAAsB,CAAC,KAAK,CAAC,OAAP,CAAtB;IACD;EACF,CAXD,CAtBuE,CAmCvE;;;EACA,MAAM,YAAY,GAAI,CAAD,IAAkB;IACrC,IAAI,CAAC,CAAC,CAAC,aAAH,IAAqB,aAAa,CAAC,CAAC,CAAC,aAAH,CAAb,IAAkC,CAAC,KAAK,CAAC,QAAN,CAAe,CAAC,CAAC,aAAjB,CAA5D,EAA8F;MAC5F,IAAI,KAAK,CAAC,OAAV,EAAmB;QACjB,uBAAuB,CAAC,KAAK,CAAC,OAAP,CAAvB;QACA,KAAK,CAAC,OAAN,GAAgB,SAAhB;MACD;IACF;EACF,CAPD;;EASA,KAAK,CAAC,gBAAN,CAAuB,SAAA,CAAA,eAAvB,EAAwC,eAAxC;EACA,KAAK,CAAC,gBAAN,CAAuB,UAAvB,EAAmC,YAAnC;EACC,KAA0C,CAAC,YAA3C,GAA0D,IAA1D,CA/CsE,CAiDvE;;EACA,OAAO,MAAK;IACV,KAAK,CAAC,mBAAN,CAA0B,SAAA,CAAA,eAA1B,EAA2C,eAA3C;IACA,KAAK,CAAC,mBAAN,CAA0B,UAA1B,EAAsC,YAAtC;IACA,OAAQ,KAA0C,CAAC,YAAnD;IACA,SAAA,CAAA,cAAA,CAAe,OAAf;EACD,CALD;AAMD;;AAxDD,OAAA,CAAA,yBAAA,GAAA,yBAAA;;AA0DA,SAAS,sBAAT,CAAgC,EAAhC,EAA+C;EAC7C,EAAE,CAAC,SAAH,CAAa,GAAb,CAAiB,WAAA,CAAA,mBAAjB;AACD;;AAED,SAAS,uBAAT,CAAiC,EAAjC,EAAgD;EAC9C,EAAE,CAAC,SAAH,CAAa,MAAb,CAAoB,WAAA,CAAA,mBAApB;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;;AAED,SAAS,cAAT,CAAwB,EAAxB,EAA0D;EACxD,IAAI,CAAC,EAAL,EAAS;IACP,OAAO,KAAP;EACD;;EAED,IAAK,EAAuC,CAAC,YAA7C,EAA2D;IACzD,OAAO,IAAP;EACD;;EAED,OAAO,cAAc,CAAC,EAAE,KAAA,IAAF,IAAA,EAAE,KAAA,KAAA,CAAF,GAAE,KAAA,CAAF,GAAA,EAAE,CAAE,aAAL,CAArB;AACD","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/focusWithinPolyfill.js

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

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

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

package/lib-commonjs/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/index.js

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

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

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

package/lib-commonjs/hooks/useArrowNavigationGroup.js

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

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

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

package/lib-commonjs/hooks/useFocusVisible.js

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

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

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

package/lib-commonjs/hooks/useFocusWithin.js

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

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

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

package/lib-commonjs/hooks/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/hooks/useTabster.js

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

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

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

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createFocusOutlineStyle = exports.createCustomFocusIndicatorStyle = exports.useTabsterAttributes = exports.useModalAttributes = exports.useKeyboardNavAttribute = exports.useFocusFinders = exports.useFocusableGroup = exports.useArrowNavigationGroup = void 0;
+exports.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");
 
@@ -25,6 +25,18 @@ Object.defineProperty(exports, "useFocusFinders", {
     return index_1.useFocusFinders;
   }
 });
+Object.defineProperty(exports, "useFocusVisible", {
+  enumerable: true,
+  get: function () {
+    return index_1.useFocusVisible;
+  }
+});
+Object.defineProperty(exports, "useFocusWithin", {
+  enumerable: true,
+  get: function () {
+    return index_1.useFocusWithin;
+  }
+});
 Object.defineProperty(exports, "useKeyboardNavAttribute", {
   enumerable: true,
   get: function () {
@@ -58,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