@fluentui/react-tabster 9.3.3 → 9.3.5

package/lib/hooks/useFocusableGroup.js

@@ -5,32 +5,25 @@ 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)
     }
   });
 };
-
 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;
   }

package/lib/hooks/useFocusableGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,SAAnC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AASA;;;AAGG;;AACH,OAAO,MAAM,iBAAiB,GAAI,OAAD,IAAkE;EACjG,MAAM,OAAO,GAAG,UAAU,EAA1B;;EAEA,IAAI,OAAJ,EAAa;IACX,WAAW,CAAC,OAAD,CAAX;EACD;;EAED,OAAO,oBAAoB,CAAC;IAC1B,QAAQ,EAAE;MACR,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;IADnB;EADgB,CAAD,CAA3B;AAKD,CAZM;;AAcP,MAAM,cAAc,GAClB,WADqB,IAEoB;EACzC,QAAQ,WAAR;IACE,KAAK,WAAL;MACE,OAAO,KAAK,CAAC,qBAAN,CAA4B,SAAnC;;IACF,KAAK,SAAL;MACE,OAAO,KAAK,CAAC,qBAAN,CAA4B,OAAnC;;IACF,KAAK,oBAAL;MACE,OAAO,KAAK,CAAC,qBAAN,CAA4B,gBAAnC;;IACF;MACE,OAAO,SAAP;EARJ;AAUD,CAbD","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,WAAW,QAAQ,SAAS;AAC5C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,QAAQ,cAAc;AASzC;;;;AAIA,OAAO,MAAMC,iBAAiB,GAAIC,OAAkC,IAA+B;EACjG,MAAMC,OAAO,GAAGH,UAAU,EAAE;EAE5B,IAAIG,OAAO,EAAE;IACXL,WAAW,CAACK,OAAO,CAAC;;EAGtB,OAAOJ,oBAAoB,CAAC;IAC1BK,QAAQ,EAAE;MACRC,WAAW,EAAEC,cAAc,CAACJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,WAAW;;GAEnD,CAAC;AACJ,CAAC;AAED,MAAMD,cAAc,GAClBC,WAAqD,IACZ;EACzC,QAAQA,WAAW;IACjB,KAAK,WAAW;MACd,OAAOV,KAAK,CAACW,qBAAqB,CAACC,SAAS;IAC9C,KAAK,SAAS;MACZ,OAAOZ,KAAK,CAACW,qBAAqB,CAACE,OAAO;IAC5C,KAAK,oBAAoB;MACvB,OAAOb,KAAK,CAACW,qBAAqB,CAACG,gBAAgB;IACrD;MACE,OAAOC,SAAS;EAAC;AAEvB,CAAC","names":["Types","getGroupper","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/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"]}

package/lib/hooks/useKeyboardNavAttribute.js

@@ -7,7 +7,6 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
  * 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
@@ -17,23 +16,19 @@ export function useKeyboardNavAttribute() {
   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 {

package/lib/hooks/useKeyboardNavAttribute.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,SAA9B;AACA,SAAS,SAAT,EAAoB,OAApB,EAA6B,MAA7B,QAA2C,OAA3C;AACA,SAAS,sBAAT,QAAuC,oBAAvC;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAIA;;;;AAIG;;AACH,OAAM,SAAU,uBAAV,GAAiC;EACrC,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EACA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,cAAc,IAAI,aAAa,CAAC,cAAc,CAAC,WAAhB,CAAtC,EAAqE,CAAC,cAAD,CAArE,CAAvB;EACA,MAAM,GAAG,GAAG,MAAM,CAAI,IAAJ,CAAlB;EACA,SAAS,CAAC,MAAK;IACb,IAAI,OAAJ,EAAa;MACX,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;MACA,MAAM,EAAE,GAAoB,IAAI,IAAG;QACjC,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,IAA9B,CAAnB;MACD,CAFD;;MAGA,OAAO,CAAC,SAAR,CAAkB,EAAlB;MACA,OAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;IACD;EACF,CATQ,EASN,CAAC,OAAD,CATM,CAAT;EAUA,OAAO,GAAP;AACD;;AAED,SAAS,mBAAT,CAA6B,UAA7B,EAAiE,SAAjE,EAAoF,KAApF,EAAkG;EAChG,IAAI,CAAC,UAAU,CAAC,OAAhB,EAAyB;IACvB;EACD;;EACD,IAAI,KAAJ,EAAW;IACT,UAAU,CAAC,OAAX,CAAmB,YAAnB,CAAgC,SAAhC,EAA2C,EAA3C;EACD,CAFD,MAEO;IACL,UAAU,CAAC,OAAX,CAAmB,eAAnB,CAAmC,SAAnC;EACD;AACF","sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,aAAa,QAAQ,SAAS;AACvC,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAClD,SAASC,sBAAsB,QAAQ,oBAAoB;AAC3D,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAIjF;;;;;AAKA,OAAM,SAAUC,uBAAuB;EACrC,MAAM;IAAEC;EAAc,CAAE,GAAGF,SAAS,EAAE;EACtC,MAAMG,OAAO,GAAGP,OAAO,CAAC,MAAMM,cAAc,IAAIR,aAAa,CAACQ,cAAc,CAACE,WAAY,CAAC,EAAE,CAACF,cAAc,CAAC,CAAC;EAC7G,MAAMG,GAAG,GAAGR,MAAM,CAAI,IAAI,CAAC;EAC3BF,SAAS,CAAC,MAAK;IACb,IAAIQ,OAAO,EAAE;MACXG,mBAAmB,CAACD,GAAG,EAAEP,sBAAsB,EAAEK,OAAO,CAACI,wBAAwB,EAAE,CAAC;MACpF,MAAMC,EAAE,GAAoBC,IAAI,IAAG;QACjCH,mBAAmB,CAACD,GAAG,EAAEP,sBAAsB,EAAEW,IAAI,CAAC;MACxD,CAAC;MACDN,OAAO,CAACO,SAAS,CAACF,EAAE,CAAC;MACrB,OAAO,MAAML,OAAO,CAACQ,WAAW,CAACH,EAAE,CAAC;;EAExC,CAAC,EAAE,CAACL,OAAO,CAAC,CAAC;EACb,OAAOE,GAAG;AACZ;AAEA,SAASC,mBAAmB,CAACM,UAAkC,EAAEC,SAAiB,EAAEC,KAAc;EAChG,IAAI,CAACF,UAAU,CAACG,OAAO,EAAE;IACvB;;EAEF,IAAID,KAAK,EAAE;IACTF,UAAU,CAACG,OAAO,CAACC,YAAY,CAACH,SAAS,EAAE,EAAE,CAAC;GAC/C,MAAM;IACLD,UAAU,CAACG,OAAO,CAACE,eAAe,CAACJ,SAAS,CAAC;;AAEjD","names":["createKeyborg","useEffect","useMemo","useRef","KEYBOARD_NAV_ATTRIBUTE","useFluent_unstable","useFluent","useKeyboardNavAttribute","targetDocument","keyborg","defaultView","ref","setBooleanAttribute","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useKeyboardNavAttribute.ts"],"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"]}

package/lib/hooks/useModalAttributes.js

@@ -9,20 +9,18 @@ import { useTabster } from './useTabster';
  *
  * @returns DOM attributes to apply to the modal element and its trigger
  */
-
 export const useModalAttributes = (options = {}) => {
   const {
     trapFocus,
     alwaysFocusable,
     legacyTrapFocus
   } = options;
-  const tabster = useTabster(); // Initializes the modalizer and deloser APIs
-
+  const tabster = useTabster();
+  // Initializes the modalizer and deloser APIs
   if (tabster) {
     getModalizer(tabster);
     getDeloser(tabster);
   }
-
   const id = useId('modal-');
   const modalAttributes = useTabsterAttributes({
     deloser: {},

package/lib/hooks/useModalAttributes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/hooks/useModalAttributes.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,QAAsB,2BAAtB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,EAAqB,YAArB,QAAgE,SAAhE;AACA,SAAS,UAAT,QAA2B,cAA3B;AAyBA;;;;;;AAMG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,OAAA,GAAqC,EADL,KAE8E;EAC9G,MAAM;IAAE,SAAF;IAAa,eAAb;IAA8B;EAA9B,IAAkD,OAAxD;EACA,MAAM,OAAO,GAAG,UAAU,EAA1B,CAF8G,CAG9G;;EACA,IAAI,OAAJ,EAAa;IACX,YAAY,CAAC,OAAD,CAAZ;IACA,UAAU,CAAC,OAAD,CAAV;EACD;;EAED,MAAM,EAAE,GAAG,KAAK,CAAC,QAAD,CAAhB;EACA,MAAM,eAAe,GAAG,oBAAoB,CAAC;IAC3C,OAAO,EAAE,EADkC;IAE3C,SAAS,EAAE;MACT,EADS;MAET,kBAAkB,EAAE,CAAC,SAFZ;MAGT,kBAAkB,EAAE,eAHX;MAIT,SAAS,EAAE;IAJF;EAFgC,CAAD,CAA5C;EAUA,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;IAC7C,OAAO,EAAE;EADoC,CAAD,CAA9C;EAIA,OAAO;IAAE,eAAF;IAAmB;EAAnB,CAAP;AACD,CA3BM","sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getDeloser, getModalizer, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * Prefer this to `legacyTrapFocus`\n   * it forbids users to tab out of the focus trap into the actual browser.\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * This prop enables legacy behavior to match previous versions of Fluent and is not\n   * recommended for general use.\n   * Enabling `legacyTrapFocus` prevents users from tabbing out of the focus trap and into\n   * the actual browser. Prefer using `trapFocus` instead of this prop.\n   */\n  legacyTrapFocus?: boolean;\n\n  /**\n   * Always reachabled in Tab order\n   */\n  alwaysFocusable?: boolean;\n}\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n  options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n  const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n  const tabster = useTabster();\n  // Initializes the modalizer and deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n\n  const id = useId('modal-');\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus,\n    },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,KAAK,QAAQ,2BAA2B;AACjD,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,EAAEC,YAAY,QAA+B,SAAS;AACzE,SAASC,UAAU,QAAQ,cAAc;AAyBzC;;;;;;;AAOA,OAAO,MAAMC,kBAAkB,GAAG,CAChCC,UAAqC,EAAE,KACuE;EAC9G,MAAM;IAAEC,SAAS;IAAEC,eAAe;IAAEC;EAAe,CAAE,GAAGH,OAAO;EAC/D,MAAMI,OAAO,GAAGN,UAAU,EAAE;EAC5B;EACA,IAAIM,OAAO,EAAE;IACXP,YAAY,CAACO,OAAO,CAAC;IACrBR,UAAU,CAACQ,OAAO,CAAC;;EAGrB,MAAMC,EAAE,GAAGX,KAAK,CAAC,QAAQ,CAAC;EAC1B,MAAMY,eAAe,GAAGX,oBAAoB,CAAC;IAC3CY,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE;MACTH,EAAE;MACFI,kBAAkB,EAAE,CAACR,SAAS;MAC9BS,kBAAkB,EAAER,eAAe;MACnCS,SAAS,EAAER;;GAEd,CAAC;EAEF,MAAMS,iBAAiB,GAAGjB,oBAAoB,CAAC;IAC7CY,OAAO,EAAE;GACV,CAAC;EAEF,OAAO;IAAED,eAAe;IAAEM;EAAiB,CAAE;AAC/C,CAAC","names":["useId","useTabsterAttributes","getDeloser","getModalizer","useTabster","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","id","modalAttributes","deloser","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getDeloser, getModalizer, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * Prefer this to `legacyTrapFocus`\n   * it forbids users to tab out of the focus trap into the actual browser.\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * This prop enables legacy behavior to match previous versions of Fluent and is not\n   * recommended for general use.\n   * Enabling `legacyTrapFocus` prevents users from tabbing out of the focus trap and into\n   * the actual browser. Prefer using `trapFocus` instead of this prop.\n   */\n  legacyTrapFocus?: boolean;\n\n  /**\n   * Always reachabled in Tab order\n   */\n  alwaysFocusable?: boolean;\n}\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n  options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n  const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n  const tabster = useTabster();\n  // Initializes the modalizer and deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n\n  const id = useId('modal-');\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus,\n    },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"]}

package/lib/hooks/useTabster.js

@@ -9,7 +9,6 @@ import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
  * @internal
  * @returns Tabster core instance
  */
-
 export const useTabster = () => {
   const {
     targetDocument
@@ -19,7 +18,6 @@ export const useTabster = () => {
     if (!defaultView) {
       return null;
     }
-
     return createTabster(defaultView, {
       autoRoot: {},
       controlTab: false

package/lib/hooks/useTabster.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/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/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,aAAa,EAAEC,cAAc,QAA+B,SAAS;AAC9E,SAASC,yBAAyB,QAAQ,2BAA2B;AAErE;;;;;;;AAOA,OAAO,MAAMC,UAAU,GAAG,MAAsC;EAC9D,MAAM;IAAEC;EAAc,CAAE,GAAGL,SAAS,EAAE;EAEtC,MAAMM,WAAW,GAAG,eAAc,aAAdD,cAAc,uBAAdA,cAAc,CAAEC,WAAW,KAAIC,SAAS;EAC5D,MAAMC,OAAO,GAAGV,KAAK,CAACW,OAAO,CAAC,MAAK;IACjC,IAAI,CAACH,WAAW,EAAE;MAChB,OAAO,IAAI;;IAGb,OAAOL,aAAa,CAACK,WAAW,EAAE;MAAEI,QAAQ,EAAE,EAAE;MAAEC,UAAU,EAAE;IAAK,CAAE,CAAC;EACxE,CAAC,EAAE,CAACL,WAAW,CAAC,CAAC;EAEjBH,yBAAyB,CAAC,MAAK;IAC7B,OAAO,MAAK;MACV,IAAIK,OAAO,EAAE;QACXN,cAAc,CAACM,OAAO,CAAC;;IAE3B,CAAC;EACH,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,OAAOA,OAAO;AAChB,CAAC","names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useTabster.ts"],"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"]}

package/lib/hooks/useTabsterAttributes.js

@@ -4,7 +4,6 @@ import { useTabster } from './useTabster';
  * @internal
  * Hook that returns tabster attributes while ensuring tabster exists
  */
-
 export const useTabsterAttributes = props => {
   // A tabster instance is not necessary to generate tabster attributes
   // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same

package/lib/hooks/useTabsterAttributes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,QAA2D,SAA3D;AACA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;;AAGG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAgF;EAClH;EACA;EACA,UAAU;EAEV,OAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,CANM","sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,mBAAmB,QAA+B,SAAS;AACpE,SAASC,UAAU,QAAQ,cAAc;AAEzC;;;;AAIA,OAAO,MAAMC,oBAAoB,GAAIC,KAAyC,IAAsC;EAClH;EACA;EACAF,UAAU,EAAE;EAEZ,OAAOD,mBAAmB,CAACG,KAAK,CAAC;AACnC,CAAC","names":["getTabsterAttribute","useTabster","useTabsterAttributes","props"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"]}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/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/"}
+{"version":3,"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,QACf,eAAe;AAOtB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,eAAe;AASxF,SAASC,yBAAyB,QAAQ,eAAe","names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/index.ts"],"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"]}

package/lib-commonjs/focus/constants.js

@@ -9,12 +9,10 @@ exports.KEYBOARD_NAV_SELECTOR = `:global([${exports.KEYBOARD_NAV_ATTRIBUTE}])`;
 /**
  * @internal
  */
-
 exports.FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
 /**
  * @internal
  */
-
 exports.FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
 exports.defaultOptions = {
   style: {},

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/focus/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,qBAAA,GAAwB,YAAY,OAAA,CAAA,sBAAsB,IAA1D;AAEb;;AAEG;;AACU,OAAA,CAAA,kBAAA,GAAqB,wBAArB;AAEb;;AAEG;;AACU,OAAA,CAAA,iBAAA,GAAoB,uBAApB;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;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAaA,8BAAsB,GAAG,mBAA4B;AACrDA,6BAAqB,GAAG,YAAYA,8BAAsB,IAAa;AAEpF;;;AAGaA,0BAAkB,GAAG,wBAAwB;AAE1D;;;AAGaA,yBAAiB,GAAG,uBAAuB;AAC3CA,sBAAc,GAAG;EAC5BC,KAAK,EAAE,EAAE;EACTC,QAAQ,EAAE;CACF","names":["exports","style","selector"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/constants.ts"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"]}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createCustomFocusIndicatorStyle = void 0;
-
 const constants_1 = /*#__PURE__*/require("./constants");
 /**
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
@@ -13,8 +12,6 @@ const constants_1 = /*#__PURE__*/require("./constants");
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
  * @param options - Configure the style of the focus outline
  */
-
-
 function createCustomFocusIndicatorStyle(style, {
   selector = constants_1.defaultOptions.selector,
   enableOutline = false
@@ -34,6 +31,5 @@ function createCustomFocusIndicatorStyle(style, {
     })
   };
 }
-
 exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
 //# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAiBA;;;;;;AAMG;;;AACH,SAAgB,+BAAhB,CACE,KADF,EAEE;EACE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe,QAD5B;EAEE,aAAa,GAAG;AAFlB,IAG4C,WAAA,CAAA,cAL9C,EAK4D;EAE1D,OAAO;IACL,UAAU;MACR,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;IADlC,CADL;IAIL,kBAAkB;MAChB,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;IAD1B,CAJb;IAQL,IAAI,QAAQ,KAAK,OAAb,IAAwB;MAC1B,CAAC,KAAK,WAAA,CAAA,kBAAkB,GAAxB,GAA8B;IADJ,CAA5B,CARK;IAWL,IAAI,QAAQ,KAAK,cAAb,IAA+B;MACjC,CAAC,KAAK,WAAA,CAAA,iBAAiB,KAAK,QAAQ,EAApC,GAAyC;IADR,CAAnC;EAXK,CAAP;AAeD;;AAtBD,OAAA,CAAA,+BAAA,GAAA,+BAAA","sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Enables the browser default outline style\n   * @default false\n   */\n  enableOutline?: boolean;\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 getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return {\n    ':focus': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n    ':focus-visible': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n\n    ...(selector === 'focus' && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n    }),\n    ...(selector === 'focus-within' && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n    }),\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAiBA;;;;;;;AAOA,SAAgBA,+BAA+B,CAC7CC,KAAa,EACb;EACEC,QAAQ,GAAGC,0BAAc,CAACD,QAAQ;EAClCE,aAAa,GAAG;AAAK,IACqBD,0BAAc;EAE1D,OAAO;IACL,QAAQ,EAAE;MACRE,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IACD,gBAAgB,EAAE;MAChBD,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IAED,IAAIJ,QAAQ,KAAK,OAAO,IAAI;MAC1B,CAAC,KAAKC,8BAAkB,GAAG,GAAGF;KAC/B,CAAC;IACF,IAAIC,QAAQ,KAAK,cAAc,IAAI;MACjC,CAAC,KAAKC,6BAAiB,KAAKD,QAAQ,EAAE,GAAGD;KAC1C;GACF;AACH;AAtBAM","names":["createCustomFocusIndicatorStyle","style","selector","constants_1","enableOutline","outlineStyle","undefined","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Enables the browser default outline style\n   * @default false\n   */\n  enableOutline?: boolean;\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 getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return {\n    ':focus': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n    ':focus-visible': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n\n    ...(selector === 'focus' && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n    }),\n    ...(selector === 'focus-within' && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n    }),\n  };\n}\n"]}

package/lib-commonjs/focus/createFocusOutlineStyle.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createFocusOutlineStyle = void 0;
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const createCustomFocusIndicatorStyle_1 = /*#__PURE__*/require("./createCustomFocusIndicatorStyle");
-
 const constants_1 = /*#__PURE__*/require("./constants");
 /**
  * NOTE: the element with the focus outline needs to have `position: relative` so that the
@@ -19,11 +15,8 @@ const constants_1 = /*#__PURE__*/require("./constants");
  * @param options - Configures the style of the focus outline
  * @returns focus outline styles object
  */
-
-
 const getFocusOutlineStyles = options => {
   var _a, _b, _c, _d;
-
   const {
     outlineRadius,
     outlineColor,
@@ -34,7 +27,8 @@ const getFocusOutlineStyles = options => {
   const outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
   const outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
   const outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
-  return { ...react_1.shorthands.borderColor('transparent'),
+  return {
+    ...react_1.shorthands.borderColor('transparent'),
     '::after': {
       content: '""',
       position: 'absolute',
@@ -58,8 +52,6 @@ const getFocusOutlineStyles = options => {
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
  */
-
-
 const createFocusOutlineStyle = ({
   selector = constants_1.defaultOptions.selector,
   style = constants_1.defaultOptions.style
@@ -72,6 +64,5 @@ const createFocusOutlineStyle = ({
 }), {
   selector
 });
-
 exports.createFocusOutlineStyle = createFocusOutlineStyle;
 //# sourceMappingURL=createFocusOutlineStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iCAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AAIA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAiBA;;;;;;AAMG;;;AACH,MAAM,qBAAqB,GAAI,OAAD,IAAoD;;;EAChF,MAAM;IAAE,aAAF;IAAiB,YAAjB;IAA+B,aAA/B;IAA8C;EAA9C,IAA+D,OAArE;EAEA,MAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,GAAvC,KAA8C,aAAvE;EACA,MAAM,mBAAmB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,MAAvC,KAAiD,aAA7E;EACA,MAAM,iBAAiB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,IAAvC,KAA+C,aAAzE;EACA,MAAM,kBAAkB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,KAAvC,KAAgD,aAA3E;EAEA,OAAO,EACL,GAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,aAAvB,CADE;IAEL,WAAW;MACT,OAAO,EAAE,IADA;MAET,QAAQ,EAAE,UAFD;MAGT,aAAa,EAAE,MAHN;MAIT,MAAM,EAAE,CAJC;MAMT,GAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,OAAvB,CANM;MAOT,GAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,YAAvB,CAPM;MAQT,GAAG,OAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,aAAxB,CARM;MAST,GAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,YAAvB,CATM;MAWT,GAAG,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,gBAAgB,GAXlF;MAYT,MAAM,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,mBAAmB,GAZxF;MAaT,IAAI,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,iBAAiB,GAbpF;MAcT,KAAK,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,kBAAkB;IAdtF;EAFN,CAAP;AAmBD,CA3BD;AA6BA;;;;;;AAMG;;;AACI,MAAM,uBAAuB,GAAG,CAAC;EACtC,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe,QADY;EAEtC,KAAK,GAAG,WAAA,CAAA,cAAA,CAAe;AAFe,IAGJ,WAAA,CAAA,cAHG,KAIrC,iCAAA,CAAA,+BAAA,CACE,qBAAqB,CAAC;EACpB,YAAY,EAAE,aAAA,CAAA,MAAA,CAAO,iBADD;EAEpB,aAAa,EAAE,aAAA,CAAA,MAAA,CAAO,kBAFF;EAGpB;EACA,YAAY,EAAE,KAJM;EAKpB,GAAG;AALiB,CAAD,CADvB,EAQE;EAAE;AAAF,CARF,CAJK;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAIA;AAiBA;;;;;;;AAOA,MAAMA,qBAAqB,GAAIC,OAAiC,IAAkB;;EAChF,MAAM;IAAEC,aAAa;IAAEC,YAAY;IAAEC,aAAa;IAAEC;EAAY,CAAE,GAAGJ,OAAO;EAE5E,MAAMK,gBAAgB,GAAG,OAACF,aAAoC,0CAAEG,GAAG,KAAIH,aAAa;EACpF,MAAMI,mBAAmB,GAAG,OAACJ,aAAoC,0CAAEK,MAAM,KAAIL,aAAa;EAC1F,MAAMM,iBAAiB,GAAG,OAACN,aAAoC,0CAAEO,IAAI,KAAIP,aAAa;EACtF,MAAMQ,kBAAkB,GAAG,OAACR,aAAoC,0CAAES,KAAK,KAAIT,aAAa;EAExF,OAAO;IACL,GAAGU,kBAAU,CAACC,WAAW,CAAC,aAAa,CAAC;IACxC,SAAS,EAAE;MACTC,OAAO,EAAE,IAAI;MACbC,QAAQ,EAAE,UAAU;MACpBC,aAAa,EAAE,MAAM;MACrBC,MAAM,EAAE,CAAC;MAET,GAAGL,kBAAU,CAACM,WAAW,CAAC,OAAO,CAAC;MAClC,GAAGN,kBAAU,CAACO,WAAW,CAAChB,YAAY,CAAC;MACvC,GAAGS,kBAAU,CAACQ,YAAY,CAACpB,aAAa,CAAC;MACzC,GAAGY,kBAAU,CAACC,WAAW,CAACZ,YAAY,CAAC;MAEvCI,GAAG,EAAE,CAACH,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMC,gBAAgB,GAAG;MAC9FG,MAAM,EAAE,CAACL,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMG,mBAAmB,GAAG;MACpGG,IAAI,EAAE,CAACP,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMK,iBAAiB,GAAG;MAChGG,KAAK,EAAE,CAACT,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMO,kBAAkB;;GAElG;AACH,CAAC;AAED;;;;;;;AAOO,MAAMW,uBAAuB,GAAG,CAAC;EACtCC,QAAQ,GAAGC,0BAAc,CAACD,QAAQ;EAClCE,KAAK,GAAGD,0BAAc,CAACC;AAAK,IACMD,0BAAc,KAChDE,iEAA+B,CAC7B3B,qBAAqB,CAAC;EACpBG,YAAY,EAAEyB,oBAAM,CAACC,iBAAiB;EACtC3B,aAAa,EAAE0B,oBAAM,CAACE,kBAAkB;EACxC;EACAzB,YAAY,EAAE,KAAK;EACnB,GAAGqB;CACJ,CAAC,EACF;EAAEF;AAAQ,CAAE,CACb;AAbUO,+BAAuB","names":["getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","top","outlineOffsetBottom","bottom","outlineOffsetLeft","left","outlineOffsetRight","right","react_1","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","createFocusOutlineStyle","selector","constants_1","style","createCustomFocusIndicatorStyle_1","react_theme_1","colorStrokeFocus2","borderRadiusMedium","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"]}

package/lib-commonjs/focus/focusVisiblePolyfill.js

@@ -4,50 +4,43 @@ 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
-
+  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
+  });
+  // 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
-
-
+  };
+  // 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) {
@@ -56,11 +49,10 @@ function applyFocusVisiblePolyfill(scope, win) {
       }
     }
   };
-
   scope.addEventListener(keyborg_1.KEYBORG_FOCUSIN, keyborgListener);
   scope.addEventListener('focusout', blurListener);
-  scope.focusVisible = true; // Return disposer
-
+  scope.focusVisible = true;
+  // Return disposer
   return () => {
     scope.removeEventListener(keyborg_1.KEYBORG_FOCUSIN, keyborgListener);
     scope.removeEventListener('focusout', blurListener);
@@ -68,34 +60,26 @@ function applyFocusVisiblePolyfill(scope, win) {
     keyborg_1.disposeKeyborg(keyborg);
   };
 }
-
 exports.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
-
 function applyFocusVisibleClass(el) {
   el.setAttribute(constants_1.FOCUS_VISIBLE_ATTR, '');
 }
-
 function removeFocusVisibleClass(el) {
   el.removeAttribute(constants_1.FOCUS_VISIBLE_ATTR);
 }
-
 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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/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,YAAH,CAAgB,WAAA,CAAA,kBAAhB,EAAoC,EAApC;AACD;;AAED,SAAS,uBAAT,CAAiC,EAAjC,EAAgD;EAC9C,EAAE,CAAC,eAAH,CAAmB,WAAA,CAAA,kBAAnB;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_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\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.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_VISIBLE_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\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n  if (!el) {\n    return false;\n  }\n\n  if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n    return true;\n  }\n\n  return alreadyInScope(el?.parentElement);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAoBA;;;;;AAKA,SAAgBA,yBAAyB,CAACC,KAAkB,EAAEC,GAAW;EACvE,IAAIC,cAAc,CAACF,KAAK,CAAC,EAAE;IACzB;IACA,OAAO,MAAMG,SAAS;;EAGxB,MAAMC,KAAK,GAAsB;IAC/BC,OAAO,EAAEF;GACV;EAED,MAAMG,OAAO,GAAGC,uBAAa,CAACN,GAAG,CAAC;EAElC;EACAK,OAAO,CAACE,SAAS,CAACC,wBAAwB,IAAG;IAC3C,IAAI,CAACA,wBAAwB,IAAIL,KAAK,CAACC,OAAO,EAAE;MAC9CK,uBAAuB,CAACN,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;EAE7B,CAAC,CAAC;EAEF;EACA;EACA,MAAMQ,eAAe,GAAIC,CAAsB,IAAI;IACjD,IAAIR,KAAK,CAACC,OAAO,EAAE;MACjBK,uBAAuB,CAACN,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;IAG3B,IAAIG,OAAO,CAACG,wBAAwB,EAAE,IAAII,aAAa,CAACD,CAAC,CAACE,MAAM,CAAC,IAAIF,CAAC,CAACE,MAAM,EAAE;MAC7E;MACAV,KAAK,CAACC,OAAO,GAAGO,CAAC,CAACE,MAAM;MACxBC,sBAAsB,CAACX,KAAK,CAACC,OAAO,CAAC;;EAEzC,CAAC;EAED;EACA,MAAMW,YAAY,GAAIJ,CAAa,IAAI;IACrC,IAAI,CAACA,CAAC,CAACK,aAAa,IAAKJ,aAAa,CAACD,CAAC,CAACK,aAAa,CAAC,IAAI,CAACjB,KAAK,CAACkB,QAAQ,CAACN,CAAC,CAACK,aAAa,CAAE,EAAE;MAC5F,IAAIb,KAAK,CAACC,OAAO,EAAE;QACjBK,uBAAuB,CAACN,KAAK,CAACC,OAAO,CAAC;QACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;;EAG/B,CAAC;EAEDH,KAAK,CAACmB,gBAAgB,CAACZ,yBAAe,EAAEI,eAAmC,CAAC;EAC5EX,KAAK,CAACmB,gBAAgB,CAAC,UAAU,EAAEH,YAAY,CAAC;EAC/ChB,KAA0C,CAACoB,YAAY,GAAG,IAAI;EAE/D;EACA,OAAO,MAAK;IACVpB,KAAK,CAACqB,mBAAmB,CAACd,yBAAe,EAAEI,eAAmC,CAAC;IAC/EX,KAAK,CAACqB,mBAAmB,CAAC,UAAU,EAAEL,YAAY,CAAC;IACnD,OAAQhB,KAA0C,CAACoB,YAAY;IAC/Db,wBAAc,CAACD,OAAO,CAAC;EACzB,CAAC;AACH;AAxDAgB;AA0DA,SAASP,sBAAsB,CAACQ,EAAe;EAC7CA,EAAE,CAACC,YAAY,CAACC,8BAAkB,EAAE,EAAE,CAAC;AACzC;AAEA,SAASf,uBAAuB,CAACa,EAAe;EAC9CA,EAAE,CAACG,eAAe,CAACD,8BAAkB,CAAC;AACxC;AAEA,SAASZ,aAAa,CAACC,MAA0B;EAC/C,IAAI,CAACA,MAAM,EAAE;IACX,OAAO,KAAK;;EAEd,OAAOa,OAAO,CAACb,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAI,WAAW,IAAIA,MAAM,IAAI,UAAU,IAAIA,MAAM,CAAC;AACvG;AAEA,SAASZ,cAAc,CAACqB,EAAkC;EACxD,IAAI,CAACA,EAAE,EAAE;IACP,OAAO,KAAK;;EAGd,IAAKA,EAAuC,CAACH,YAAY,EAAE;IACzD,OAAO,IAAI;;EAGb,OAAOlB,cAAc,CAACqB,EAAE,aAAFA,EAAE,uBAAFA,EAAE,CAAEK,aAAa,CAAC;AAC1C","names":["applyFocusVisiblePolyfill","scope","win","alreadyInScope","undefined","state","current","keyborg","keyborg_1","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","isHTMLElement","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","focusVisible","removeEventListener","exports","el","setAttribute","constants_1","removeAttribute","Boolean","parentElement"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_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\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.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_VISIBLE_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\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"]}

package/lib-commonjs/focus/focusWithinPolyfill.js

@@ -4,66 +4,55 @@ 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
-
+  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
+  });
+  // 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
-
-
+  };
+  // 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
-
+  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.setAttribute(constants_1.FOCUS_WITHIN_ATTR, '');
 }
-
 function removeFocusWithinClass(el) {
   el.removeAttribute(constants_1.FOCUS_WITHIN_ATTR);
 }
-
 function isHTMLElement(target) {
   if (!target) {
     return false;
   }
-
   return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
 }
 //# sourceMappingURL=focusWithinPolyfill.js.map