@fluentui/react-tabster 9.7.4 → 9.8.0

package/lib/focus/focusWithinPolyfill.js

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

package/lib/focus/focusWithinPolyfill.js.map

@@ -1 +1 @@
-{"version":3,"names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_WITHIN_ATTR","applyFocusWithinPolyfill","element","win","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusWithinClass","keyborgListener","e","isHTMLElement","target","applyFocusWithinClass","blurListener","relatedTarget","contains","addEventListener","removeEventListener","el","setAttribute","removeAttribute","Boolean"],"sources":["../../src/focus/focusWithinPolyfill.ts"],"sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_ATTR } 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.setAttribute(FOCUS_WITHIN_ATTR, '');\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_WITHIN_ATTR);\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"],"mappings":"AAAA,SAASA,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ;AACpF,SAASC,iBAAiB,QAAQ;AASlC;;;;;AAKA,OAAO,SAASC,yBAAyBC,OAAoB,EAAEC,GAAW,EAAc;EACtF,MAAMC,OAAA,GAAUN,aAAA,CAAcK,GAAA;EAE9B;EACAC,OAAA,CAAQC,SAAS,CAACC,wBAAA,IAA4B;IAC5C,IAAI,CAACA,wBAAA,EAA0B;MAC7BC,sBAAA,CAAuBL,OAAA;IACzB;EACF;EAEA;EACA;EACA,MAAMM,eAAA,GAAmBC,CAAA,IAA2B;IAClD,IAAIL,OAAA,CAAQE,wBAAwB,MAAMI,aAAA,CAAcD,CAAA,CAAEE,MAAM,GAAG;MACjE;MACAC,qBAAA,CAAsBV,OAAA;IACxB;EACF;EAEA;EACA,MAAMW,YAAA,GAAgBJ,CAAA,IAAkB;IACtC,IAAI,CAACA,CAAA,CAAEK,aAAa,IAAKJ,aAAA,CAAcD,CAAA,CAAEK,aAAa,KAAK,CAACZ,OAAA,CAAQa,QAAQ,CAACN,CAAA,CAAEK,aAAa,GAAI;MAC9FP,sBAAA,CAAuBL,OAAA;IACzB;EACF;EAEAA,OAAA,CAAQc,gBAAgB,CAACnB,eAAA,EAAiBW,eAAA;EAC1CN,OAAA,CAAQc,gBAAgB,CAAC,YAAYH,YAAA;EAErC;EACA,OAAO,MAAM;IACXX,OAAA,CAAQe,mBAAmB,CAACpB,eAAA,EAAiBW,eAAA;IAC7CN,OAAA,CAAQe,mBAAmB,CAAC,YAAYJ,YAAA;IACxCd,cAAA,CAAeK,OAAA;EACjB;AACF;AAEA,SAASQ,sBAAsBM,EAAe,EAAE;EAC9CA,EAAA,CAAGC,YAAY,CAACnB,iBAAA,EAAmB;AACrC;AAEA,SAASO,uBAAuBW,EAAe,EAAE;EAC/CA,EAAA,CAAGE,eAAe,CAACpB,iBAAA;AACrB;AAEA,SAASU,cAAcC,MAA0B,EAAyB;EACxE,IAAI,CAACA,MAAA,EAAQ;IACX,OAAO,KAAK;EACd;EACA,OAAOU,OAAA,CAAQV,MAAA,IAAU,OAAOA,MAAA,KAAW,YAAY,eAAeA,MAAA,IAAU,cAAcA,MAAA;AAChG"}
+{"version":3,"sources":["focusWithinPolyfill.ts"],"sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_ATTR } 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.setAttribute(FOCUS_WITHIN_ATTR, '');\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_WITHIN_ATTR);\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"],"names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_WITHIN_ATTR","applyFocusWithinPolyfill","element","win","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusWithinClass","keyborgListener","e","isHTMLElement","target","applyFocusWithinClass","blurListener","relatedTarget","contains","addEventListener","removeEventListener","el","setAttribute","removeAttribute","Boolean"],"mappings":"AAAA,SAASA,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAC9F,SAASC,iBAAiB,QAAQ,cAAc;AAShD;;;;CAIC,GACD,OAAO,SAASC,yBAAyBC,OAAoB,EAAEC,GAAW,EAAc;IACtF,MAAMC,UAAUN,cAAcK;IAE9B,0EAA0E;IAC1EC,QAAQC,SAAS,CAACC,CAAAA,2BAA4B;QAC5C,IAAI,CAACA,0BAA0B;YAC7BC,uBAAuBL;QACzB,CAAC;IACH;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMM,kBAAkB,CAACC,IAA2B;QAClD,IAAIL,QAAQE,wBAAwB,MAAMI,cAAcD,EAAEE,MAAM,GAAG;YACjE,+EAA+E;YAC/EC,sBAAsBV;QACxB,CAAC;IACH;IAEA,gFAAgF;IAChF,MAAMW,eAAe,CAACJ,IAAkB;QACtC,IAAI,CAACA,EAAEK,aAAa,IAAKJ,cAAcD,EAAEK,aAAa,KAAK,CAACZ,QAAQa,QAAQ,CAACN,EAAEK,aAAa,GAAI;YAC9FP,uBAAuBL;QACzB,CAAC;IACH;IAEAA,QAAQc,gBAAgB,CAACnB,iBAAiBW;IAC1CN,QAAQc,gBAAgB,CAAC,YAAYH;IAErC,kBAAkB;IAClB,OAAO,IAAM;QACXX,QAAQe,mBAAmB,CAACpB,iBAAiBW;QAC7CN,QAAQe,mBAAmB,CAAC,YAAYJ;QACxCd,eAAeK;IACjB;AACF,CAAC;AAED,SAASQ,sBAAsBM,EAAe,EAAE;IAC9CA,GAAGC,YAAY,CAACnB,mBAAmB;AACrC;AAEA,SAASO,uBAAuBW,EAAe,EAAE;IAC/CA,GAAGE,eAAe,CAACpB;AACrB;AAEA,SAASU,cAAcC,MAA0B,EAAyB;IACxE,IAAI,CAACA,QAAQ;QACX,OAAO,KAAK;IACd,CAAC;IACD,OAAOU,QAAQV,UAAU,OAAOA,WAAW,YAAY,eAAeA,UAAU,cAAcA;AAChG"}

package/lib/focus/index.js

@@ -2,4 +2,3 @@ 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,"names":[],"sources":["../../src/focus/index.ts"],"sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\nexport * from './focusVisiblePolyfill';\nexport * from './focusWithinPolyfill';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\nexport * from './focusVisiblePolyfill';\nexport * from './focusWithinPolyfill';\n"],"names":[],"mappings":"AAAA,cAAc,oCAAoC;AAClD,cAAc,4BAA4B;AAC1C,cAAc,yBAAyB;AACvC,cAAc,wBAAwB"}

package/lib/hooks/index.js

@@ -6,4 +6,3 @@ export * from './useFocusWithin';
 export * from './useKeyboardNavAttribute';
 export * from './useModalAttributes';
 export * from './useTabsterAttributes';
-//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/hooks/index.ts"],"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"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"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"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,4BAA4B;AAC1C,cAAc,uBAAuB;AACrC,cAAc,yBAAyB"}

package/lib/hooks/useArrowNavigationGroup.js

@@ -4,47 +4,40 @@ import { useTabster } from './useTabster';
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation
- */
-export const useArrowNavigationGroup = (options = {}) => {
-  const {
-    circular,
-    axis,
-    memorizeCurrent,
-    tabbable,
-    ignoreDefaultKeydown,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_hasDefault
-  } = options;
-  const tabster = useTabster();
-  if (tabster) {
-    getMover(tabster);
-  }
-  return useTabsterAttributes({
-    mover: {
-      cyclic: !!circular,
-      direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
-      memorizeCurrent,
-      tabbable,
-      hasDefault: unstable_hasDefault
-    },
-    ...(ignoreDefaultKeydown && {
-      focusable: {
-        ignoreKeydown: ignoreDefaultKeydown
-      }
-    })
-  });
+ */ export const useArrowNavigationGroup = (options = {})=>{
+    const { circular , axis , memorizeCurrent , tabbable , ignoreDefaultKeydown , // eslint-disable-next-line @typescript-eslint/naming-convention
+    unstable_hasDefault  } = options;
+    const tabster = useTabster();
+    if (tabster) {
+        getMover(tabster);
+    }
+    return useTabsterAttributes({
+        mover: {
+            cyclic: !!circular,
+            direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
+            memorizeCurrent,
+            tabbable,
+            hasDefault: unstable_hasDefault
+        },
+        ...ignoreDefaultKeydown && {
+            focusable: {
+                ignoreKeydown: ignoreDefaultKeydown
+            }
+        }
+    });
 };
 function axisToMoverDirection(axis) {
-  switch (axis) {
-    case 'horizontal':
-      return Types.MoverDirections.Horizontal;
-    case 'grid':
-      return Types.MoverDirections.Grid;
-    case 'both':
-      return Types.MoverDirections.Both;
-    case 'vertical':
-    default:
-      return Types.MoverDirections.Vertical;
-  }
+    switch(axis){
+        case 'horizontal':
+            return Types.MoverDirections.Horizontal;
+        case 'grid':
+            return Types.MoverDirections.Grid;
+        case 'grid-linear':
+            return Types.MoverDirections.GridLinear;
+        case 'both':
+            return Types.MoverDirections.Both;
+        case 'vertical':
+        default:
+            return Types.MoverDirections.Vertical;
+    }
 }
-//# sourceMappingURL=useArrowNavigationGroup.js.map

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["Types","getMover","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","Both","Vertical"],"sources":["../../src/hooks/useArrowNavigationGroup.ts"],"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' | 'both';\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   * The default focusable item in the group will be an element with Focusable.isDefault property.\n   * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n   * and this option is currently for internal testing purposes only.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_hasDefault?: 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 {\n    circular,\n    axis,\n    memorizeCurrent,\n    tabbable,\n    ignoreDefaultKeydown,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault,\n  } = 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,\n      tabbable,\n      hasDefault: unstable_hasDefault,\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    case 'both':\n      return Types.MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,UAAU,QAAQ;AAkC3B;;;;AAIA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,OAAA,GAA0C,CAAC,CAAC,KAAgC;EAClH,MAAM;IACJC,QAAA;IACAC,IAAA;IACAC,eAAA;IACAC,QAAA;IACAC,oBAAA;IACA;IACAC;EAAmB,CACpB,GAAGN,OAAA;EACJ,MAAMO,OAAA,GAAUT,UAAA;EAEhB,IAAIS,OAAA,EAAS;IACXX,QAAA,CAASW,OAAA;EACX;EAEA,OAAOV,oBAAA,CAAqB;IAC1BW,KAAA,EAAO;MACLC,MAAA,EAAQ,CAAC,CAACR,QAAA;MACVS,SAAA,EAAWC,oBAAA,CAAqBT,IAAA,aAAAA,IAAA,cAAAA,IAAA,GAAQ,UAAU;MAClDC,eAAA;MACAC,QAAA;MACAQ,UAAA,EAAYN;IACd;IACA,IAAID,oBAAA,IAAwB;MAC1BQ,SAAA,EAAW;QACTC,aAAA,EAAeT;MACjB;IACF,CAAC;EACH;AACF;AAEA,SAASM,qBAAqBT,IAA4C,EAAwB;EAChG,QAAQA,IAAA;IACN,KAAK;MACH,OAAOP,KAAA,CAAMoB,eAAe,CAACC,UAAU;IACzC,KAAK;MACH,OAAOrB,KAAA,CAAMoB,eAAe,CAACE,IAAI;IACnC,KAAK;MACH,OAAOtB,KAAA,CAAMoB,eAAe,CAACG,IAAI;IAEnC,KAAK;IACL;MACE,OAAOvB,KAAA,CAAMoB,eAAe,CAACI,QAAQ;EAAA;AAE3C"}
+{"version":3,"sources":["useArrowNavigationGroup.ts"],"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' | 'grid-linear' | 'both';\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   * The default focusable item in the group will be an element with Focusable.isDefault property.\n   * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n   * and this option is currently for internal testing purposes only.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_hasDefault?: 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 {\n    circular,\n    axis,\n    memorizeCurrent,\n    tabbable,\n    ignoreDefaultKeydown,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault,\n  } = 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,\n      tabbable,\n      hasDefault: unstable_hasDefault,\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    case 'grid-linear':\n      return Types.MoverDirections.GridLinear;\n    case 'both':\n      return Types.MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"names":["Types","getMover","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","GridLinear","Both","Vertical"],"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,UAAU;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAkC1C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC,UAA0C,CAAC,CAAC,GAAgC;IAClH,MAAM,EACJC,SAAQ,EACRC,KAAI,EACJC,gBAAe,EACfC,SAAQ,EACRC,qBAAoB,EACpB,gEAAgE;IAChEC,oBAAmB,EACpB,GAAGN;IACJ,MAAMO,UAAUT;IAEhB,IAAIS,SAAS;QACXX,SAASW;IACX,CAAC;IAED,OAAOV,qBAAqB;QAC1BW,OAAO;YACLC,QAAQ,CAAC,CAACR;YACVS,WAAWC,qBAAqBT,iBAAAA,kBAAAA,OAAQ,UAAU;YAClDC;YACAC;YACAQ,YAAYN;QACd;QACA,GAAID,wBAAwB;YAC1BQ,WAAW;gBACTC,eAAeT;YACjB;QACF,CAAC;IACH;AACF,EAAE;AAEF,SAASM,qBAAqBT,IAA4C,EAAwB;IAChG,OAAQA;QACN,KAAK;YACH,OAAOP,MAAMoB,eAAe,CAACC,UAAU;QACzC,KAAK;YACH,OAAOrB,MAAMoB,eAAe,CAACE,IAAI;QACnC,KAAK;YACH,OAAOtB,MAAMoB,eAAe,CAACG,UAAU;QACzC,KAAK;YACH,OAAOvB,MAAMoB,eAAe,CAACI,IAAI;QAEnC,KAAK;QACL;YACE,OAAOxB,MAAMoB,eAAe,CAACK,QAAQ;IACzC;AACF"}

package/lib/hooks/useFocusFinders.js

@@ -3,59 +3,63 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
 import { useTabster } from './useTabster';
 /**
  * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
- */
-export const useFocusFinders = () => {
-  const tabster = useTabster();
-  const {
-    targetDocument
-  } = useFluent();
-  // Narrow props for now and let need dictate additional props in the future
-  const findAllFocusable = React.useCallback((container, acceptCondition) => {
-    return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
-      container,
-      acceptCondition
-    })) || [];
-  }, [tabster]);
-  const findFirstFocusable = React.useCallback(container => {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
-      container
-    });
-  }, [tabster]);
-  const findLastFocusable = React.useCallback(container => {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
-      container
-    });
-  }, [tabster]);
-  const findNextFocusable = React.useCallback((currentElement, options = {}) => {
-    if (!tabster || !targetDocument) {
-      return null;
-    }
-    const {
-      container = targetDocument.body
-    } = options;
-    return tabster.focusable.findNext({
-      currentElement,
-      container
-    });
-  }, [tabster, targetDocument]);
-  const findPrevFocusable = React.useCallback((currentElement, options = {}) => {
-    if (!tabster || !targetDocument) {
-      return null;
-    }
-    const {
-      container = targetDocument.body
-    } = options;
-    return tabster.focusable.findPrev({
-      currentElement,
-      container
-    });
-  }, [tabster, targetDocument]);
-  return {
-    findAllFocusable,
-    findFirstFocusable,
-    findLastFocusable,
-    findNextFocusable,
-    findPrevFocusable
-  };
+ */ export const useFocusFinders = ()=>{
+    const tabster = useTabster();
+    const { targetDocument  } = useFluent();
+    // Narrow props for now and let need dictate additional props in the future
+    const findAllFocusable = React.useCallback((container, acceptCondition)=>{
+        return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
+            container,
+            acceptCondition
+        })) || [];
+    }, [
+        tabster
+    ]);
+    const findFirstFocusable = React.useCallback((container)=>{
+        return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
+            container
+        });
+    }, [
+        tabster
+    ]);
+    const findLastFocusable = React.useCallback((container)=>{
+        return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
+            container
+        });
+    }, [
+        tabster
+    ]);
+    const findNextFocusable = React.useCallback((currentElement, options = {})=>{
+        if (!tabster || !targetDocument) {
+            return null;
+        }
+        const { container =targetDocument.body  } = options;
+        return tabster.focusable.findNext({
+            currentElement,
+            container
+        });
+    }, [
+        tabster,
+        targetDocument
+    ]);
+    const findPrevFocusable = React.useCallback((currentElement, options = {})=>{
+        if (!tabster || !targetDocument) {
+            return null;
+        }
+        const { container =targetDocument.body  } = options;
+        return tabster.focusable.findPrev({
+            currentElement,
+            container
+        });
+    }, [
+        tabster,
+        targetDocument
+    ]);
+    return {
+        findAllFocusable,
+        findFirstFocusable,
+        findLastFocusable,
+        findNextFocusable,
+        findPrevFocusable
+    };
 };
-//# sourceMappingURL=useFocusFinders.js.map

package/lib/hooks/useFocusFinders.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","useTabster","useFocusFinders","tabster","targetDocument","findAllFocusable","useCallback","container","acceptCondition","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"sources":["../../src/hooks/useFocusFinders.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = () => {\n  const tabster = useTabster();\n  const { targetDocument } = useFluent();\n\n  // Narrow props for now and let need dictate additional props in the future\n  const findAllFocusable = React.useCallback(\n    (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) =>\n      tabster?.focusable.findAll({ container, acceptCondition }) || [],\n    [tabster],\n  );\n\n  const findFirstFocusable = React.useCallback(\n    (container: HTMLElement) => tabster?.focusable.findFirst({ container }),\n    [tabster],\n  );\n\n  const findLastFocusable = React.useCallback(\n    (container: HTMLElement) => tabster?.focusable.findLast({ container }),\n    [tabster],\n  );\n\n  const findNextFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n      if (!tabster || !targetDocument) {\n        return null;\n      }\n\n      const { container = targetDocument.body } = options;\n\n      return tabster.focusable.findNext({ currentElement, container });\n    },\n    [tabster, targetDocument],\n  );\n\n  const findPrevFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n      if (!tabster || !targetDocument) {\n        return null;\n      }\n\n      const { container = targetDocument.body } = options;\n\n      return tabster.focusable.findPrev({ currentElement, container });\n    },\n    [tabster, targetDocument],\n  );\n\n  return {\n    findAllFocusable,\n    findFirstFocusable,\n    findLastFocusable,\n    findNextFocusable,\n    findPrevFocusable,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,UAAU,QAAQ;AAE3B;;;AAGA,OAAO,MAAMC,eAAA,GAAkBA,CAAA,KAAM;EACnC,MAAMC,OAAA,GAAUF,UAAA;EAChB,MAAM;IAAEG;EAAc,CAAE,GAAGJ,SAAA;EAE3B;EACA,MAAMK,gBAAA,GAAmBP,KAAA,CAAMQ,WAAW,CACxC,CAACC,SAAA,EAAwBC,eAAA;IACvB,QAAAL,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASM,SAAS,CAACC,OAAO,CAAC;MAAEH,SAAA;MAAWC;IAAgB,EAAE,KAAI,EAAE;KAClE,CAACL,OAAA,CAAQ;EAGX,MAAMQ,kBAAA,GAAqBb,KAAA,CAAMQ,WAAW,CACzCC,SAAA;IAA2B,OAAAJ,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASM,SAAS,CAACG,SAAS,CAAC;MAAEL;IAAU,EAAE;KACvE,CAACJ,OAAA,CAAQ;EAGX,MAAMU,iBAAA,GAAoBf,KAAA,CAAMQ,WAAW,CACxCC,SAAA;IAA2B,OAAAJ,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASM,SAAS,CAACK,QAAQ,CAAC;MAAEP;IAAU,EAAE;KACtE,CAACJ,OAAA,CAAQ;EAGX,MAAMY,iBAAA,GAAoBjB,KAAA,CAAMQ,WAAW,CACzC,CAACU,cAAA,EAA6BC,OAAA,GAAkE,CAAC,CAAC,KAAK;IACrG,IAAI,CAACd,OAAA,IAAW,CAACC,cAAA,EAAgB;MAC/B,OAAO,IAAI;IACb;IAEA,MAAM;MAAEG,SAAA,GAAYH,cAAA,CAAec;IAAI,CAAE,GAAGD,OAAA;IAE5C,OAAOd,OAAA,CAAQM,SAAS,CAACU,QAAQ,CAAC;MAAEH,cAAA;MAAgBT;IAAU;EAChE,GACA,CAACJ,OAAA,EAASC,cAAA,CAAe;EAG3B,MAAMgB,iBAAA,GAAoBtB,KAAA,CAAMQ,WAAW,CACzC,CAACU,cAAA,EAA6BC,OAAA,GAAkE,CAAC,CAAC,KAAK;IACrG,IAAI,CAACd,OAAA,IAAW,CAACC,cAAA,EAAgB;MAC/B,OAAO,IAAI;IACb;IAEA,MAAM;MAAEG,SAAA,GAAYH,cAAA,CAAec;IAAI,CAAE,GAAGD,OAAA;IAE5C,OAAOd,OAAA,CAAQM,SAAS,CAACY,QAAQ,CAAC;MAAEL,cAAA;MAAgBT;IAAU;EAChE,GACA,CAACJ,OAAA,EAASC,cAAA,CAAe;EAG3B,OAAO;IACLC,gBAAA;IACAM,kBAAA;IACAE,iBAAA;IACAE,iBAAA;IACAK;EACF;AACF"}
+{"version":3,"sources":["useFocusFinders.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = () => {\n  const tabster = useTabster();\n  const { targetDocument } = useFluent();\n\n  // Narrow props for now and let need dictate additional props in the future\n  const findAllFocusable = React.useCallback(\n    (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) =>\n      tabster?.focusable.findAll({ container, acceptCondition }) || [],\n    [tabster],\n  );\n\n  const findFirstFocusable = React.useCallback(\n    (container: HTMLElement) => tabster?.focusable.findFirst({ container }),\n    [tabster],\n  );\n\n  const findLastFocusable = React.useCallback(\n    (container: HTMLElement) => tabster?.focusable.findLast({ container }),\n    [tabster],\n  );\n\n  const findNextFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n      if (!tabster || !targetDocument) {\n        return null;\n      }\n\n      const { container = targetDocument.body } = options;\n\n      return tabster.focusable.findNext({ currentElement, container });\n    },\n    [tabster, targetDocument],\n  );\n\n  const findPrevFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n      if (!tabster || !targetDocument) {\n        return null;\n      }\n\n      const { container = targetDocument.body } = options;\n\n      return tabster.focusable.findPrev({ currentElement, container });\n    },\n    [tabster, targetDocument],\n  );\n\n  return {\n    findAllFocusable,\n    findFirstFocusable,\n    findLastFocusable,\n    findNextFocusable,\n    findPrevFocusable,\n  };\n};\n"],"names":["React","useFluent_unstable","useFluent","useTabster","useFocusFinders","tabster","targetDocument","findAllFocusable","useCallback","container","acceptCondition","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,eAAe;AAE1C;;CAEC,GACD,OAAO,MAAMC,kBAAkB,IAAM;IACnC,MAAMC,UAAUF;IAChB,MAAM,EAAEG,eAAc,EAAE,GAAGJ;IAE3B,2EAA2E;IAC3E,MAAMK,mBAAmBP,MAAMQ,WAAW,CACxC,CAACC,WAAwBC;QACvBL,OAAAA,CAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASM,SAAS,CAACC,OAAO,CAAC;YAAEH;YAAWC;QAAgB,EAAE,AAAD,KAAK,EAAE;OAClE;QAACL;KAAQ;IAGX,MAAMQ,qBAAqBb,MAAMQ,WAAW,CAC1C,CAACC;QAA2BJ,OAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASM,SAAS,CAACG,SAAS,CAAC;YAAEL;QAAU,EAAE;OACvE;QAACJ;KAAQ;IAGX,MAAMU,oBAAoBf,MAAMQ,WAAW,CACzC,CAACC;QAA2BJ,OAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASM,SAAS,CAACK,QAAQ,CAAC;YAAEP;QAAU,EAAE;OACtE;QAACJ;KAAQ;IAGX,MAAMY,oBAAoBjB,MAAMQ,WAAW,CACzC,CAACU,gBAA6BC,UAAkE,CAAC,CAAC,GAAK;QACrG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO,IAAI;QACb,CAAC;QAED,MAAM,EAAEG,WAAYH,eAAec,IAAI,CAAA,EAAE,GAAGD;QAE5C,OAAOd,QAAQM,SAAS,CAACU,QAAQ,CAAC;YAAEH;YAAgBT;QAAU;IAChE,GACA;QAACJ;QAASC;KAAe;IAG3B,MAAMgB,oBAAoBtB,MAAMQ,WAAW,CACzC,CAACU,gBAA6BC,UAAkE,CAAC,CAAC,GAAK;QACrG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO,IAAI;QACb,CAAC;QAED,MAAM,EAAEG,WAAYH,eAAec,IAAI,CAAA,EAAE,GAAGD;QAE5C,OAAOd,QAAQM,SAAS,CAACY,QAAQ,CAAC;YAAEL;YAAgBT;QAAU;IAChE,GACA;QAACJ;QAASC;KAAe;IAG3B,OAAO;QACLC;QACAM;QACAE;QACAE;QACAK;IACF;AACF,EAAE"}

package/lib/hooks/useFocusVisible.js

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

package/lib/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contentValue","scopeRef","useRef","_options_targetDocument","targetDocument","useEffect","defaultView","current"],"sources":["../../src/hooks/useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n  targetDocument?: HTMLDocument;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n  const contentValue = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  const targetDocument = options.targetDocument ?? contentValue.targetDocument;\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAEhD,SAASC,yBAAyB,QAAQ;AAM1C,OAAO,SAASC,gBAA4DC,OAAA,GAAkC,CAAC,CAAC,EAAE;EAChH,MAAMC,YAAA,GAAeJ,SAAA;EACrB,MAAMK,QAAA,GAAWP,KAAA,CAAMQ,MAAM,CAAW,IAAI;MAErBC,uBAAA;EAAvB,MAAMC,cAAA,GAAiB,CAAAD,uBAAA,GAAAJ,OAAA,CAAQK,cAAc,cAAtBD,uBAAA,cAAAA,uBAAA,GAA0BH,YAAA,CAAaI,cAAc;EAE5EV,KAAA,CAAMW,SAAS,CAAC,MAAM;IACpB,IAAI,CAAAD,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBE,WAAW,KAAIL,QAAA,CAASM,OAAO,EAAE;MACnD,OAAOV,yBAAA,CAA0BI,QAAA,CAASM,OAAO,EAAEH,cAAA,CAAeE,WAAW;IAC/E;EACF,GAAG,CAACL,QAAA,EAAUG,cAAA,CAAe;EAE7B,OAAOH,QAAA;AACT"}
+{"version":3,"sources":["useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n  targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n  const contentValue = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  const targetDocument = options.targetDocument ?? contentValue.targetDocument;\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"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contentValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,gCAAgC;AAM1E,OAAO,SAASC,gBAA4DC,UAAkC,CAAC,CAAC,EAAE;IAChH,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW,IAAI;QAErBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC,IAAM;QACpB,IAAID,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBE,WAAW,AAAD,KAAKJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E,CAAC;IACH,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT,CAAC"}

package/lib/hooks/useFocusWithin.js

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

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"sources":["../../src/hooks/useFocusWithin.ts"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,wBAAwB,QAAQ;AAEzC;;;;;AAKA,OAAO,SAASC,eAAA,EAA6D;EAC3E,MAAM;IAAEC;EAAc,CAAE,GAAGH,SAAA;EAC3B,MAAMI,UAAA,GAAaN,KAAA,CAAMO,MAAM,CAAW,IAAI;EAE9CP,KAAA,CAAMQ,SAAS,CAAC,MAAM;IACpB,IAAI,CAAAH,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBI,WAAW,KAAIH,UAAA,CAAWI,OAAO,EAAE;MACrD,OAAOP,wBAAA,CAAyBG,UAAA,CAAWI,OAAO,EAAEL,cAAA,CAAeI,WAAW;IAChF;EACF,GAAG,CAACH,UAAA,EAAYD,cAAA,CAAe;EAE/B,OAAOC,UAAA;AACT"}
+{"version":3,"sources":["useFocusWithin.ts"],"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"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,wBAAwB,QAAQ,+BAA+B;AAExE;;;;CAIC,GACD,OAAO,SAASC,iBAA6D;IAC3E,MAAM,EAAEC,eAAc,EAAE,GAAGH;IAC3B,MAAMI,aAAaN,MAAMO,MAAM,CAAW,IAAI;IAE9CP,MAAMQ,SAAS,CAAC,IAAM;QACpB,IAAIH,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBI,WAAW,AAAD,KAAKH,WAAWI,OAAO,EAAE;YACrD,OAAOP,yBAAyBG,WAAWI,OAAO,EAAEL,eAAeI,WAAW;QAChF,CAAC;IACH,GAAG;QAACH;QAAYD;KAAe;IAE/B,OAAOC;AACT,CAAC"}

package/lib/hooks/useFocusableGroup.js

@@ -4,28 +4,26 @@ import { useTabster } from './useTabster';
 /**
  * A hook that returns the necessary tabster attributes to support groupping.
  * @param options - Options to configure keyboard navigation
- */
-export const useFocusableGroup = options => {
-  const tabster = useTabster();
-  if (tabster) {
-    getGroupper(tabster);
-  }
-  return useTabsterAttributes({
-    groupper: {
-      tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
+ */ export const useFocusableGroup = (options)=>{
+    const tabster = useTabster();
+    if (tabster) {
+        getGroupper(tabster);
     }
-  });
+    return useTabsterAttributes({
+        groupper: {
+            tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
+        }
+    });
 };
-const getTabbability = tabBehavior => {
-  switch (tabBehavior) {
-    case 'unlimited':
-      return Types.GroupperTabbabilities.Unlimited;
-    case 'limited':
-      return Types.GroupperTabbabilities.Limited;
-    case 'limited-trap-focus':
-      return Types.GroupperTabbabilities.LimitedTrapFocus;
-    default:
-      return undefined;
-  }
+const getTabbability = (tabBehavior)=>{
+    switch(tabBehavior){
+        case 'unlimited':
+            return Types.GroupperTabbabilities.Unlimited;
+        case 'limited':
+            return Types.GroupperTabbabilities.Limited;
+        case 'limited-trap-focus':
+            return Types.GroupperTabbabilities.LimitedTrapFocus;
+        default:
+            return undefined;
+    }
 };
-//# sourceMappingURL=useFocusableGroup.js.map

package/lib/hooks/useFocusableGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["Types","getGroupper","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"sources":["../../src/hooks/useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,WAAW,QAAQ;AACnC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,UAAU,QAAQ;AAS3B;;;;AAIA,OAAO,MAAMC,iBAAA,GAAqBC,OAAA,IAAkE;EAClG,MAAMC,OAAA,GAAUH,UAAA;EAEhB,IAAIG,OAAA,EAAS;IACXL,WAAA,CAAYK,OAAA;EACd;EAEA,OAAOJ,oBAAA,CAAqB;IAC1BK,QAAA,EAAU;MACRC,WAAA,EAAaC,cAAA,CAAeJ,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASK,WAAW;IAClD;EACF;AACF;AAEA,MAAMD,cAAA,GACJC,WAAA,IAC0C;EAC1C,QAAQA,WAAA;IACN,KAAK;MACH,OAAOV,KAAA,CAAMW,qBAAqB,CAACC,SAAS;IAC9C,KAAK;MACH,OAAOZ,KAAA,CAAMW,qBAAqB,CAACE,OAAO;IAC5C,KAAK;MACH,OAAOb,KAAA,CAAMW,qBAAqB,CAACG,gBAAgB;IACrD;MACE,OAAOC,SAAA;EAAA;AAEb"}
+{"version":3,"sources":["useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"names":["Types","getGroupper","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":"AAAA,SAASA,KAAK,EAAEC,WAAW,QAAQ,UAAU;AAC7C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAS1C;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC,UAAkE;IAClG,MAAMC,UAAUH;IAEhB,IAAIG,SAAS;QACXL,YAAYK;IACd,CAAC;IAED,OAAOJ,qBAAqB;QAC1BK,UAAU;YACRC,aAAaC,eAAeJ,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASK,WAAW;QAClD;IACF;AACF,EAAE;AAEF,MAAMD,iBAAiB,CACrBC,cAC0C;IAC1C,OAAQA;QACN,KAAK;YACH,OAAOV,MAAMW,qBAAqB,CAACC,SAAS;QAC9C,KAAK;YACH,OAAOZ,MAAMW,qBAAqB,CAACE,OAAO;QAC5C,KAAK;YACH,OAAOb,MAAMW,qBAAqB,CAACG,gBAAgB;QACrD;YACE,OAAOC;IACX;AACF"}

package/lib/hooks/useKeyboardNavAttribute.js

@@ -6,33 +6,33 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
  * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
  * attribute to a referenced element to ensure keyboard navigation awareness
  * synced to keyborg logic without having to cause a re-render on react tree.
- */
-export function useKeyboardNavAttribute() {
-  const {
-    targetDocument
-  } = useFluent();
-  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView), [targetDocument]);
-  const ref = useRef(null);
-  useEffect(() => {
-    if (keyborg) {
-      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());
-      const cb = next => {
-        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);
-      };
-      keyborg.subscribe(cb);
-      return () => keyborg.unsubscribe(cb);
-    }
-  }, [keyborg]);
-  return ref;
+ */ export function useKeyboardNavAttribute() {
+    const { targetDocument  } = useFluent();
+    const keyborg = useMemo(()=>targetDocument && createKeyborg(targetDocument.defaultView), [
+        targetDocument
+    ]);
+    const ref = useRef(null);
+    useEffect(()=>{
+        if (keyborg) {
+            setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());
+            const cb = (next)=>{
+                setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);
+            };
+            keyborg.subscribe(cb);
+            return ()=>keyborg.unsubscribe(cb);
+        }
+    }, [
+        keyborg
+    ]);
+    return ref;
 }
 function setBooleanAttribute(elementRef, attribute, value) {
-  if (!elementRef.current) {
-    return;
-  }
-  if (value) {
-    elementRef.current.setAttribute(attribute, '');
-  } else {
-    elementRef.current.removeAttribute(attribute);
-  }
+    if (!elementRef.current) {
+        return;
+    }
+    if (value) {
+        elementRef.current.setAttribute(attribute, '');
+    } else {
+        elementRef.current.removeAttribute(attribute);
+    }
 }
-//# sourceMappingURL=useKeyboardNavAttribute.js.map